Base自分用のナレッジベース。Server、オープンソース系のシステムやフリーソフトに関する情報、iPhone、Androidスマホ便利情報など役立つ情報などを覚書しておくためのブログ。リニューアルされました。リダイレクトされます。FC2ブログのサイドバーにサイドバーのタイトルごとに異なるアイコンを表示させるFC2ブログのカスタマイズ方法を覚書します。カスタマイズ方法を紹介している他のブログがいくつかあったんだけど、ちょっと理解するまで時間がかかったので自分も含めてFC2ブログ初心者でもわかるように詳しく説明した内容にしたいと思って書いた記事です。サイドバーごとに異なるアイコンをタイトル左に表示する方法の概要サイドバーに表示される各タイトルは、"プラグイン"で管理されており、プラグインのタイトルがそのままサイドバーに表示されるタイトルになります。各"プラグイン"には、プラグインごとに一意の識別番号が割り当てられています。サイドバーに表示している各プラグインの識別番号をブログのHTMLのタグ内にIDとして表示させる設定を自分が使用しているテンプレートに設定します。次に各プラグインごとの識別番号をブログのソース表示で確認します。確認したプラグインの識別番号ごとに表示したいアイコンのリンクURLを指定したスタイル定義をテンプレートに追加します。使用したいアイコンは、スタイル定義の記述をする前に事前にアップロードしておいてください。上記の概要に沿った詳細な手順を以下に紹介します。※ブログのテンプレートに変更を加えますので、間違った場合などに備えて"複製"を使って現在のテンプレートのバックアップを取っておいてください。各プラグインの識別番号をHTMLソースとして表示させる方法FC2ブログにログインし、管理画面を開きます。管理画面左メニューから[テンプレートの設定]をクリックします。今使用しているブログのテンプレートのHTMLとCSSが編集できる画面が開くので、HTML編集画面から以下のタグで囲まれた範囲を探します。<!--/plugin_third-->上記の各タグで囲まれた範囲の中から以下のタグを探します。fを押すと検索画面が表示されるので、検索画面に探したい文字列を入力して探すとすぐに見つけられます。<!--/plugin_third-->の間であれば<%plugin_third_title>を探します。ちなみに<%plugin_first_title>は、プラグインのカテゴリ番号が"1"のプラグインのタイトルを表すFC2ブロクの変数を意味しています。見つかった各<%plugin_XXXX_title>タグの手前に記載されているタグの">"の手前に以下の文字列を追記します。id="pc<%plugin_third_no>"」です。なるように追記します。※"id="の手前に必ず半角スペースを入れてください。実際に今見ているこのブログの場合、以下のように変更されています。id="pc<%plugin_second_no>"><%plugin_second_title></div>変更したら[更新]ボタンをクリックしてテンプレートの変更を有効化します。わかりづらい点なので補足説明します。<!--/plugin_first-->タグで囲まれた範囲のHTMLの内容は、プラグインの"カテゴリ"番号が1番のプラグインの表示に関するHTMLが記載されています。同様にsecondはカテゴリ番号"2"、thirdはカテゴリ番号"3"に対応しています。<!--/plugin_first-->タグに囲まれた部分だけ、つまり<%plugin_first_title>の手前のタグに設定するだけで構いません。<%plugin_XXXXX_title>の手前のタグはテンプレートによって異なるため、"このタグ"という説明ができませんので自身のテンプレートで確認して下さい。管理画面の左メニューの[ブログの確認]をクリックして自分のブログを表示させます。表示されている通常のブログ画面(ブラウザ)で右クリックし、[ページのソースを表示](IEだと[ソースの表示])をクリックします。※表示されるメニュー名は使用しているブラウザによって異なります。ブログのソースが表示されるので以下の文字列を検索します。検索するとそれぞれのサイドバーのタイトル名ごとに見つかるはずです。このブログを例に取ると以下の様な感じです。id="pc127892">最近の記事</div>「id="pcXXXXXX」部分のpcXXXXXXがこのサイドバーを識別するために一意に与えられた識別番号となります。上記の例だと、サイドバー「最近の記事」の識別番号は、"pc127892"になります。各サイドバーの識別番号「pcXXXXXX」を全て検索して確認します。確認したら各識別番号がどのサイドバーを表しているかメモしておいてください。使用するアイコンをFC2ブログにアップロードする各サイドバーの識別番号が確認できたらあとは識別番号ごとに使用するアイコンを指定するスタイル定義の記述をするだけですが、その前に使用したいアイコンをFC2ブログにアップロードしておいてください。アイコンのアップロードは、ブログ管理画面の[ファイルアップロード]をクリックすればアップロードできる画面が表示されます。アイコンをアップロードしたら、それぞれのアイコンを表示するためのリンクURLをメモしておいてください。その際どのアイコンがどのURLかわかるようにしてメモしておくと後々楽です。最後に各サイドバーのタイトル横に表示するアイコンをスタイルシートに記述して指定する方法を説明します。管理画面左メニューから[テンプレートの設定]をクリックします。[スタイルシート編集]にブログに使用されているスタイルシート(CSS)の内容が表示されるので、最後の行に各サイドバーごとに以下のスタイル定義を追記します。no-repeat;}例えば、識別番号pc127892の「最近の記事」にアップロードしたアイコン画像(http://blog-imgs-75.fc2.com/b/i/l/billyboy/Write2.gif)を使用したい場合、以下のようになります。no-repeat;}上記のスタイル定義をアイコンを設定したいサイドバーごとに追記していきます。スタイルシートへの追記が終了したら[更新]ボタンをクリックして追記した内容を適用します。以上でこのブログのように各サイドバーのタイトル横に個別に指定したアイコンが表示されるようになります。ブログのサイドバーのタイトル横にタイトルごとに異なるアイコンを表示する方法まとめHTMLやCSS、FC2ブログの仕組みやブログテンプレート変数について多少理解がないと記事に記載した手順や説明を理解するのは難しいかもしれません。理解がなくてもできるように詳しく書いたつもりですが、文章だけで説明するのは難しいですね。データベースインポート位置webサイトウィンドウサイズ端末にAPNが正しく設定されていません。(11/25)プロフィールこのブログの中の人:billyboyこのブログを見に来てくれてありがとうございます。このブログの中の人はExcel、AccessのVBAに関するカスタマーサポート、技術ドキュメントのの作成業務を経験後、開発系SEを経て現在は金融系企業のシステム運用/保守SEとして働いています。当初自分が困ったときに解決した方法や社内/外からの技術的な問い合わせに回答した時に作ったプログラムなどを自分用の備忘録としてこのブログを開設しました。たくさんの方に見に来ていただけてることに気づいてからはなるべく誰が見てもわかるような記事内容にすることを意識して書いています。