Google BloggerにアイコンWebフォントで可愛いワンポイント♪

FontAwesome

個人のブログでもよく見かけるようになった
リンクURLの後ろに引っ付いた
リンクマーク
見れば見るほど「私も欲しい!」
png画像を貼ってるだけかと思ってフリー画像を探してたら、なんと画像ではなくWebフォントなるものでした。

スポンサーリンク

Webフォント とは?

猫にも分かるほど超簡単に説明すると(難しい説明はムリ)

【 良い点 】

  1. Web上のフォントを呼び出すので持ってないフォントや、ここだとBloggerにないフォントが使えるようになる。
  2. 画像ではなくフォントなので拡大・縮小しても綺麗。
  3. フォントだからコードだけで色まで変えられる。

【 悪い点 】

  1. 環境により(古いブラウザなど)表示されない。化けることもある。
  2. 携帯からは表示されない。(スマホでもモバイルビューでは表示されませんでした。)

以上の条件を理解した上で、
表示されなかった時に意味不明な文章とならない程度のワンポイントして取り入れるべく導入法を勉強してみました。

 サーバーのないGoogle BloggerではFontAwesomeが簡単

Webフォントのサイトはたくさんあっても
どれもダウンロードしたファイルを自サーバーへアップロードして使用するタイプが多いため画像と動画しかアップロードできない
BloggerWebフォントを使うのに FontAwesome へ辿り着きました。

Font Awesome, the iconic font and CSS toolkit
ここは、アイコン型Webフォントのサイトでダウンロード無しでも使用することができます。

まずは、↑ここの Get Started から最初のコード

↑このコードをBlogger テンプレートHTMLの編集 から

bloggerでFontAwesome 1

head ~ /head 内へペーストします。 ペースト後、テンプレートを保存をクリックして もしも</link>がどうのと、エラーが表示された場合(私がそうでした) コードの後ろへ </link> の閉じタグを追加して下さい。
このコード内の「4.2.0」は現在のバージョンになります。 時々チェックしてバージョンアップしてたら上書きして下さい。

これで準備は完了です。(^^)v Bloggerを利用してる人でWebフォントを解説してるブログがあまりなく、あっても私のスキルでは理解できないことが多くて、ここまででもかなりの時間がかかってしまいました。(^^;)

 好きなアイコンを選んで入れてみよう♪

blogger FontAwesome 1

FontAwesome の Icons から 好きなアイコンを選びクリックします。

 
リンク・アイコンで解説すると
blogger FontAwesome 2

↑の画像のコード<i class="fa fa-external-link"></i>をコピーしてBloggerの記事の作成をHTMLモードへ切替えペーストするだけです。

ちょっとした活用法

1. 隙間

例えば、このブログのアドレスの後ろへ入れると Lahat ng gusto

↑このように文字とアイコンが引っ付いて見えてしまいます。
コード内へfa-fwと追記することで固定幅が追加されます。
Lahat ng gusto

もっと隙間を空けたい場合は、
Lahat ng gusto  
文字とコードの間に半角スペース&nbsp;を追記します。

2. 大きさを変えるには

blogger FontAwesome 3

↑このようにタグ内へfa-1g標準 fa-2x2倍 と、5倍まで大きさを変えることができます。

3. 色を変えるには

←このマーク。
今後2度と色は変更しないだろうと思うものはCSSから変更しておきます。
HTMLコードは、幅固定で2倍の大きさにした
<i class="fa fa-hand-o-right fa-fw fa-2x"></i>
これをCSSで青色に固定してやります。
Bloggerのテンプレート→カスタマイズ→上級者向けを開き↓のコードをペーストして保存。

毎回色を指定する場合は

作成画面のHTMLモードから
色指定なし
<i class="fa fa-exclamation-circle fa-fw fa-2x"></i>

赤に指定
<span style="color: red;"><i class="fa fa-exclamation-circle fa-fw fa-2x"></i></span>
↑このようにで囲って「red」の部分を他の色コードへ変えればCSSを弄らなくても色を変更可能です。

3. その他

私はまだ試してないので参考リンクだけ。

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips – HAM MEDIA MEMO
回り込みや、角度・回転など様々な活用法が解説されていました。

 


お疲れ様でした。(^^)

自分への備忘録になればと、
自分が行き詰まった箇所への解説も書いたつもりですが
同じ Google Bloggerの方への参考にもなれば幸いです。

おすすめ

スポンサーリンク

このページをシェアしてくれたら嬉しいな~(*'∀'人)

テスト
おじぎ猫 訪問ありがとうございました。

お知らせ
スパムが多いため、コメントは承認制になっています。
確認次第、承認と返信をいたしますね。(^^)/

My Youtube
石巻貝を助けるコリドラス 石巻貝を助けるコリドラス
morphing morphing
恐竜体操で食べられた!? 恐竜体操で食べられた!?
ゴジラのパロディ ゴジラのパロディ
アナと雪の猫王 アナと雪の猫王
Prince PURI #2 Prince PURI #2
トカゲ酒飲んで変身!! トカゲ酒飲んで変身!!

 15日月末ポイント消滅 !? 確認はこちら 楽天市場

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

トップへ戻る