乐胖代购免代理版

FC2ブログのサイドバーのタイトルの手前にFontAwesomeのアイコンフォントを表示する方法について覚書。

以前アイコン画像(jpeb等)をサイドバーのタイトルの手前に表示する方法を記事にしましたが、今回はFontAwesomeのアイコンフォントを使用する方法について書きます。

アイコンフォントの方が大きさや色などをCSSで自由に定義できるため、アイコン画像を使うよりかなり便利です。

使用しているテンプレートの問題で若干手こずったので、しっかりと覚書きしておきます。

FontAwesomeのアイコンフォントを使ったサイドバーのイメージ
事前準備
FontAwesomeを使用するための記述をブログのhtmlテンプレートのヘッダーに追加する
ブログのhtmlテンプレートからサイドバーが定義されている記載を探す
各サイドバーにid属性として識別番号を設定する
1. 注意
各サイドバーの識別番号を調べる
各id属性に対するスタイルをCSSテンプレートに記述する。
記事まとめ

FontAwesomeのアイコンフォントを使ったサイドバーのイメージ

やりたいことのイメージとしては、こんな感じです。

以下のSimplicityのカスタマイズの記事と同じイメージです。

Simplicity2のサイドバーウィジェットのタイトルの前にFont Awesomeのアイコンフォントを表示する方法

WordPressのテーマ「Simplicity2」の各サイドバーウィジェットのタイトルの前にFont Awesomeのアイコンフォントを表示するCSSの表記方法について覚書。Simplicity2はとても優れたテーマで名前の通り非常にシン...

事前準備

ブログのhtmlテンプレート、CSSテンプレートを編集するので必ずブログテンプレートの複製を実行してバックアップしておいてください。

ブログテンプレートの複製方法については以下の記事を参照してください。

FC2ブログのテンプレートを編集する前にテンプレートの複製をしてバックアップする方法 | FC2ブログカスタマイズ

FC2ブログをカスタマイズする際にテンプレートを編集する前に複製をしてバックアップを取る手順について覚書。FC2ブログをカスタマイズする記事の中でちょくちょくテンプレートの複製によるバックアップ手順が出てきます。その際いちいち同じ手順を記事...

FontAwesomeを使用するための記述をブログのhtmlテンプレートのヘッダーに追加する

FC2ブログでFontAwesomeを使用するためにブログテンプレートのヘッダー部分(<head>～</head>の間)に以下のhtmlを追記してください。

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

上記のhtmlのURL部分の"4.6.1"はFontAwesomeのバージョンを示しています。バージョンによって用意されているアイコンフォントが異なりますので注意してください。

ブログのhtmlテンプレートからサイドバーが定義されている記載を探す

ブログのhtmlテンプレートの中から、ブログで使用しているサイドバーが定義されている記載を探します。

探し方についてですが、chromeの[検証]機能を使うと簡単に見つけられます。自分のブログをchromeブラウザで表示し、サイドバーのタイトル部分を右クリックして[検証]をクリックします。

chromeの右側にデバッグウィンドウが表示され、以下のようにサイドバーのタイトル部分のhtmlを簡単に見つけることができます。

各サイドバーにid属性として識別番号を設定する

ブログのhtmlテンプレートからサイドバーのタイトル部分の記載箇所のhtmlに以下のコードを追記します。

id="pc<%plugin_second_no>"

例えば、私の使っているhtmlテンプレートはchromeの[検証]機能で調べた結果、サイドバーのタイトルの記載は以下のようになっています。

<!--plugin_second-->
<div class="sidebar">
<div class="sidebar-title-outer">
<div class="sidebar-title" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
</div>
</div>

これを以下のように変更します。

<!--plugin_second-->
<div class="sidebar">
<div class="sidebar-title-outer">
<div class="sidebar-title" id="pc<%plugin_second_no>" style="text-align:<%plugin_second_talign>"><%plugin_second_title></div>
</div>
</div>

4行目の<div class="sidebar-title" の後に半角スペースを入れてid="pc<%plugin_second_no>"を追加しています。

追記したら一度テンプレートを更新して変更を反映させます。

注意

サイドバーの記載は、サイドバーが右の場合は、""、左の場合は、""から始まります。

左右もしくは両方にサイドバーが設置できるテンプレートの場合、右サイドバーと左サイドバーについてそれぞれサイドバーに関するhtmlが記載されていますので自分のサイドバ―の位置に合わせた正しい箇所に追記してください。

各サイドバーの識別番号を調べる

テンプレートを更新後、ブログをブラウザで表示します。

chromeの[検証]機能を使用してサイドバーのhtmlを表示させると以下のようにid="pcXXXXXX"と表示されていることがわかるはずです。

このid="pcXXXXXX"が各サイドバーを一意に識別する番号であり、それをhtmlのid属性として指定している形になります。

サイドバーの各項目ごとにid="pcXXXXXX"に記載されている数字を控えてください。

各id属性に対するスタイルをCSSテンプレートに記述する。

各サイドバーのid属性ごとにスタイルを定義します。

例えば、私の使用しているテンプレートでは、サイドバーの"ブログ内検索"部分のhtmlは、以下のようになっています。

<div class="sidebar">
  <div class="sidebar-title-outer">
    <div class="sidebar-title" id="pc127897" style="text-align:left">ブログ内検索</div>
  </div>
</div>

クラスが"sidebar-title"、id属性が"pc127897"のdivタグで記述されているので、CSSに記載する内容は以下のようになります。

FontAwesomeのどのアイコンフォントを使用するかは、下記CSSの6行目の"content"にUnicodeで指定しています。

div#pc127897.sidebar-title:before {
 margin-right:10px;
 color:#3F78E2;
 font-size:120%;
 font-family:"FontAwesome";
 content:"\f002";
}

各アイコンフォントのユニコードは、以下のページで確認できます。

Site not found · GitHub Pages

Unicodeは、[]内のx以降の文字列です。

例えば使いたいアイコンフォントのUnicodeが[]であれば、CSSに記述するUnicodeは、"f17b"となります。

使用するアイコンフォントのUnicodeは、先頭に"\(バックスラッシュ)"を付加して"(ダブルクォーテーション)でくくって指定します。

後は各サイドバーごとのid属性値を使って同じようにCSSにスタイルを記載していけばよいです。

記事まとめ

基本的には、以前書いたサイドバーのタイトル手前にアイコン画像を表示させる記事の内容とほぼ同じです。

各サイドバーごとにid属性をつける方法については、こちらの記事の方が詳細に書いてあるのでこの記事でわかりにくければ一度以下の記事に目を通してみてください。

FC2ブログのサイドバーのタイトル横にタイトルごとに異なるアイコンを表示する方法 | FC2ブログカスタマイズ

FC2ブログのサイドバーにサイドバーのタイトルごとに異なるアイコンを表示させるFC2ブログのカスタマイズ方法を覚書します。カスタマイズ方法を紹介している他のブログがいくつかあったんだけど、ちょっと理解するまで時間がかかったので自分も含めてF...

アイコンフォントの方がサイズや色などがCSSで自由に変更できるため使い勝手が良いです。

FontAwesomeのどのアイコンフォントを使用してSNSの丸ボタンを作ったりもできます。

ただ、FontAwesomeのアイコンフォントには当然ながら日本のサービス、例えば"はてブ"などのアイコンフォントは用意されていません。

バージョンアップごとに使えるアイコンフォントが増えていっているので"はてブ"や"LINE"のアイコンフォントなんかも用意されるといいですね。

FC2ブログのサイドバーのタイトルの前にFontAwesomeのアイコンフォントを表示する方法 | FC2ブログカスタマイズ