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

FC2ブログのサイドバーにサイドバーのタイトルごとに異なるアイコンを表示させるFC2ブログのカスタマイズ方法を覚書します。

カスタマイズ方法を紹介している他のブログがいくつかあったんだけど、ちょっと理解するまで時間がかかったので自分も含めてFC2ブログ初心者でもわかるように詳しく説明した内容にしたいと思って書いた記事です。

サイドバーごとに異なるアイコンをタイトル左に表示する方法の概要

サイドバーに表示される各タイトルは、”プラグイン”で管理されており、プラグインのタイトルがそのままサイドバーに表示されるタイトルになります。

各”プラグイン”には、プラグインごとに一意の識別番号が割り当てられています。

まずサイドバーに表示している各プラグインの識別番号をブログのHTMLのタグ内にIDとして表示させる設定を自分が使用しているテンプレートに設定します。

次に各プラグインごとの識別番号をブログのソース表示で確認します。

確認したプラグインの識別番号ごとに表示したいアイコンのリンクURLを指定したスタイル定義をテンプレートに追加します。

使用したいアイコンは、スタイル定義の記述をする前に事前にアップロードしておいてください。

サイドバーごとに異なるアイコンをタイトル左に表示するカスタマイズ手順

上記の概要に沿った詳細な手順を以下に紹介します。

※ブログのテンプレートに変更を加えますので、間違った場合などに備えて”複製”を使って現在のテンプレートのバックアップを取っておいてください。

各プラグインの識別番号をHTMLソースとして表示させる方法

FC2ブログにログインし、管理画面を開きます。

管理画面左メニューから[テンプレートの設定]をクリックします。

今使用しているブログのテンプレートのHTMLとCSSが編集できる画面が開くので、HTML編集画面から以下のタグで囲まれた範囲を探します。

<!–plugin_first–> ～ <!–/plugin_first–> <!–plugin_second–> ～ <!–/plugin_second–> <!–plugin_third–> ～ <!–/plugin_third–>

上記の各タグで囲まれた範囲の中から以下のタグを探します。

※タグを探すときは、[Ctrl] + fを押すと検索画面が表示されるので、検索画面に探したい文字列を入力して探すとすぐに見つけられます。

<!–plugin_first–> ～ <!–/plugin_first–>の中であれば、<%plugin_first_title>、

<!–plugin_second–> ～ <!–/plugin_second–>の中であれば<%plugin_second_title>、

<!–plugin_third–> ～ <!–/plugin_third–>の間であれば<%plugin_third_title>

を探します。

ちなみに<%plugin_first_title>は、プラグインのカテゴリ番号が”1″のプラグインのタイトルを表すFC2ブロクの変数を意味しています。

見つかった各<%plugin_XXXX_title>タグの手前に記載されているタグの”>”の手前に以下の文字列を追記します。

<%plugin_first_title>タグであれば、「 id=”pc<%plugin_first_no>”」、 <%plugin_second_title>タグであれば「 id=”pc<%plugin_second_no>”」、 <%plugin_third_title>であれば「 id=”pc<%plugin_third_no>”」です。

つまり、<%plugin_first_title>タグの場合で説明するとテンプレートのHTMLを <・・・手前のタグ・・・><%plugin_first_title> となっている箇所を <・・・手前のタグ・・・ id=”pc<%plugin_first_no>”><%plugin_first_title> となるように追記します。

※”id=”の手前に必ず半角スペースを入れてください。

実際に今見ているこのブログの場合、以下のように変更されています。

変更前

変更後

変更したら[更新]ボタンをクリックしてテンプレートの変更を有効化します。

補足説明

少しわかりづらい点なので補足説明します。

まず<!–plugin_first–> ～ <!–/plugin_first–>タグで囲まれた範囲のHTMLの内容は、プラグインの”カテゴリ”番号が1番のプラグインの表示に関するHTMLが記載されています。

同様にsecondはカテゴリ番号”2″、thirdはカテゴリ番号”3″に対応しています。

もしサイドバーに表示しているプラグインがカテゴリ番号”1″のみであれば、<!–plugin_first–> ～ <!–/plugin_first–>タグに囲まれた部分だけ、つまり<%plugin_first_title>の手前のタグに設定するだけで構いません。

また、<%plugin_XXXXX_title>の手前のタグはテンプレートによって異なるため、”このタグ”という説明ができませんので自身のテンプレートで確認して下さい。

各プラグインの識別番号を確認する方法

管理画面の左メニューの[ブログの確認]をクリックして自分のブログを表示させます。

表示されている通常のブログ画面(ブラウザ)で右クリックし、[ページのソースを表示](IEだと[ソースの表示])をクリックします。 ※表示されるメニュー名は使用しているブラウザによって異なります。

ブログのソースが表示されるので以下の文字列を検索します。 「id=”pc」

検索するとそれぞれのサイドバーのタイトル名ごとに見つかるはずです。

このブログを例に取ると以下の様な感じです。

<div class=”sidebar-title” style=”text-align:left” id=”pc127892″>最近の記事</div>

「id=”pcXXXXXX」部分のpcXXXXXXがこのサイドバーを識別するために一意に与えられた識別番号となります。

上記の例だと、サイドバー「最近の記事」の識別番号は、”pc127892″になります。

各サイドバーの識別番号「pcXXXXXX」を全て検索して確認します。

確認したら各識別番号がどのサイドバーを表しているかメモしておいてください。

使用するアイコンをFC2ブログにアップロードする

各サイドバーの識別番号が確認できたらあとは識別番号ごとに使用するアイコンを指定するスタイル定義の記述をするだけですが、その前に使用したいアイコンをFC2ブログにアップロードしておいてください。

アイコンのアップロードは、ブログ管理画面の[ファイルアップロード]をクリックすればアップロードできる画面が表示されます。

アイコンをアップロードしたら、それぞれのアイコンを表示するためのリンクURLをメモしておいてください。

その際どのアイコンがどのURLかわかるようにしてメモしておくと後々楽です。

各サイドバーに表示するアイコンを指定するスタイル定義の追加方法

最後に各サイドバーのタイトル横に表示するアイコンをスタイルシートに記述して指定する方法を説明します。

管理画面左メニューから[テンプレートの設定]をクリックします。

[スタイルシート編集]にブログに使用されているスタイルシート(CSS)の内容が表示されるので、最後の行に各サイドバーごとに以下のスタイル定義を追記します。

例えば、識別番号pc127892の「最近の記事」にアップロードしたアイコン画像(http://blog-imgs-75.fc2.com/b/i/l/billyboy/Write2.gif)を使用したい場合、以下のようになります。

上記のスタイル定義をアイコンを設定したいサイドバーごとに追記していきます。

スタイルシートへの追記が終了したら[更新]ボタンをクリックして追記した内容を適用します。

以上でこのブログのように各サイドバーのタイトル横に個別に指定したアイコンが表示されるようになります。

ブログのサイドバーのタイトル横にタイトルごとに異なるアイコンを表示する方法まとめ

HTMLやCSS、FC2ブログの仕組みやブログテンプレート変数について多少理解がないと記事に記載した手順や説明を理解するのは難しいかもしれません。

理解がなくてもできるように詳しく書いたつもりですが、文章だけで説明するのは難しいですね。

本当はFC2側でプラグインの設定内容としてアイコンが指定できる設定を追加してくれたりすると助かるのですが…