どうも。
アイコンフォントのお話です。
アイコンを画像では無くフォント同様に使える為、色を変えたりサイズ調整も出来ます。
このデザイン性も良いアイコンフォントですが、各管理者単位の運用サーバーを持たないBlogger環境でVaster2が何処を参照しているのか気になったので確認してみました。
結論から言うと、Vaster2の参照しているアイコンフォントはFont Awesomeのサービス（CDN）を利用しているようです。
パッケージをダウンロードして、ブログを運営しているサーバーにアップロードして保存するか、CDNに用意されているcssを読み込む事で使用出来ます。
bloggerの各テンプレートの場合、後者のCDNを使いアイコンフォント（正確には、css）を読み込む方法になります。
読み込む為のコードはBootstrapのCDN サイトより最新版が確認出来ますので、確認したコードをコピーしてブログHTMLに貼るだけです。
もちろんFont Awesomeのサイトからも提供されています。（メールアドレスの登録が必要）
*Bootstrapはcssフレームワークと呼ばれる素材集でリンクして、デザインされたいろいろな素材（ボタンとか）のclass利用する事が出来るcssです。
用意されているアイコンフォントのコードは
表示に関して幾つかオプションのclassも用意されています。
など…使用する機会があれば紹介したいと思います。
Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進むと、<head>の近い所に以下の通り記述されています。
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Vaster2では、コードのバージョンが4.4.0となっているようなので、最新バージョン4.7.0に変えてもよろしいかと。
新しいアイコンフォントが増えているようです。
続いて、アイコンフォントを指定している箇所class='fa faを検索します。
アイコンフォントを使っている箇所が幾つか見つかると思います。
SNSのボタンに表示されているマークもアイコンフォントでした。
以下は、投稿日な左側に付く時計のアイコンフォントのコード。
変更したい場合は、別のアイコンフォントのコードに変えるだけです。
Font Awesomeのサイトに掲載されているリストより使いたいアイコンフォントをクリックして、詳細ページを表示します。
今回は、「calendar-o」をクリックして詳細ページを表示。
詳細ページに<i>タグで囲まれているコードが記載されているのでコピーします。
BloggerのテーマHTML編集画面に戻り、<i aria-hidden='true' class='fa fa-clock-o'/>を検索します。
記事一覧と記事で同じコードが、2箇所あります。いずれもHTMLのみ変更です。
＊Vaster2で記述されているコードとコピーしたコードが違いますが同じ事を示してます。
コピーしたコードと入れ替えて保存または、'fa fa-clock-o'の部分を'fa fa-calendar-o'に書き換えます。
プレビューしてみました。
きちんと表示されました。
ブログで使用するアイコンフォントは、ちょっとしたアクセントになってなかなか良いですよ。
他にもやりたい事があるので、別途取りまとめたらと思います。
アイコンフォントのお話です。
Bloggerでアイコンフォントの使用ついて
Vaster2は記事の投稿日やラベルについている こんなのや、 こんなのとか 、所々にアイコンフォントを使っています。見た目は絵文字に近いですかね。アイコンを画像では無くフォント同様に使える為、色を変えたりサイズ調整も出来ます。
このデザイン性も良いアイコンフォントですが、各管理者単位の運用サーバーを持たないBlogger環境でVaster2が何処を参照しているのか気になったので確認してみました。
結論から言うと、Vaster2の参照しているアイコンフォントはFont Awesomeのサービス（CDN）を利用しているようです。
Font Awesomeとは
Font Awesomeはアイコンフォントをフリーで提供頂けるありがたいサービス。パッケージをダウンロードして、ブログを運営しているサーバーにアップロードして保存するか、CDNに用意されているcssを読み込む事で使用出来ます。
bloggerの各テンプレートの場合、後者のCDNを使いアイコンフォント（正確には、css）を読み込む方法になります。
読み込む為のコードはBootstrapのCDN サイトより最新版が確認出来ますので、確認したコードをコピーしてブログHTMLに貼るだけです。
もちろんFont Awesomeのサイトからも提供されています。（メールアドレスの登録が必要）
*Bootstrapはcssフレームワークと呼ばれる素材集でリンクして、デザインされたいろいろな素材（ボタンとか）のclass利用する事が出来るcssです。
アイコンフォントの使い方
- テンプレートのHTMLにCDNにリンクするコードを追加。
- アイコンフォントのコードを表示したい箇所のHTMLまたはcssに追加。
用意されているアイコンフォントのコードは
表示に関して幾つかオプションのclassも用意されています。
- 大きさ
- 回転させる
- 角度を付けて表示
- 水平/垂直方向への反転
- 余白を付ける
- 枠を付ける
- アイコンフォントを重ねる
など…使用する機会があれば紹介したいと思います。
Vaster2 でのアイコンフォント使用例
CDNのコードを確認します。Bloggerの左側メニュー＞＞テーマ＞＞HTMLの編集と進むと、<head>の近い所に以下の通り記述されています。
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
Vaster2では、コードのバージョンが4.4.0となっているようなので、最新バージョン4.7.0に変えてもよろしいかと。
新しいアイコンフォントが増えているようです。
続いて、アイコンフォントを指定している箇所class='fa faを検索します。
（HTML編集画面でCtrl＋fでi class='fa fa-を検索。）
SNSのボタンに表示されているマークもアイコンフォントでした。
以下は、投稿日な左側に付く時計のアイコンフォントのコード。
<i aria-hidden='true' class='fa fa-clock-o'/>
表示したくない場合は、この部分を削除なりすれば良し。変更したい場合は、別のアイコンフォントのコードに変えるだけです。
アイコンフォントの変更
アイコンフォントを変更したい場合は、アイコンリストより好みのアイコンフォントを選び、表示されるコードをコピーするだけです。投稿日の時計アイコンフォントを変更
今回は投稿日に付いている のアイコンフォントを に変更してみましょう。Font Awesomeのサイトに掲載されているリストより使いたいアイコンフォントをクリックして、詳細ページを表示します。
今回は、「calendar-o」をクリックして詳細ページを表示。
詳細ページに<i>タグで囲まれているコードが記載されているのでコピーします。
<i class="fa fa-calendar-o" aria-hidden="true"></i>
このコード内のaria-hidden="true"は読み上げソフト等で対象にするか対象外にするかの指定です。"true"にする事で読み上げ対象外にしています。BloggerのテーマHTML編集画面に戻り、<i aria-hidden='true' class='fa fa-clock-o'/>を検索します。
記事一覧と記事で同じコードが、2箇所あります。いずれもHTMLのみ変更です。
＊Vaster2で記述されているコードとコピーしたコードが違いますが同じ事を示してます。
コピーしたコードと入れ替えて保存または、'fa fa-clock-o'の部分を'fa fa-calendar-o'に書き換えます。
プレビューしてみました。
きちんと表示されました。
ブログで使用するアイコンフォントは、ちょっとしたアクセントになってなかなか良いですよ。
他にもやりたい事があるので、別途取りまとめたらと思います。
0 件のコメント:
コメントを投稿