ブログテンプレートならHKD記事タイトル前にカテゴリごとのアイコンを表示する方法RSSはこちらブログテンプレートならHKDブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。変にこだわって時間をロスしています。MAP更新休止のお知らせ現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。2010⁄03⁄12(Fri)00:27記事タイトル前にカテゴリごとのアイコンを表示する方法comment:0trackback:0記事タイトル前にアイコンを挿入する方法。長くなるので二つに分けました。画像の内容は当テンプレートVer1です。※テンプレートを編集するのでカスタマイズを行う前に現在のテンプレートをバックアップすることをお勧めします。記事タイトルの前にカテゴリ別のアイコンを置く場合、次の手順が必要です。1)カテゴリ番号に対応したアイコン画像をアップロードする。2)HTML編集画面でタイトル前に<img>タグを挿入。仕組みとしては、カテゴリ番号に対応したアイコン画像のURLを<img>タグがそれぞれ呼び出して表示するという感じになります。それでは手順ごとに説明していきます。1)カテゴリ番号に対応したアイコン画像をアップロードする。単純にアップロードすればいいわけではありません。こちらでサンプルを作ってみたのでご覧下さい。http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_0.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_1.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_2.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_3.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_4.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_5.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_6.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_7.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_8.gifhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_9.gifファイル名が【icon_number01_*.gif】の形で統一されていて、後ろの*の部分が0~9になっているのがお分かりでしょうか。この0~9の数字の部分がカテゴリ番号に対応するようにアップロードしなくてはいけません。上のサンプルでは番号を表示するだけの単純なアイコンを用意しましたが、例えばお使いのブログに次のようなカテゴリが設定されているとすると・・・カテゴリ0:未分類カテゴリ1:日記カテゴリ2:カテゴリ3:料理カテゴリ4:愚痴カテゴリ分けは4つで、カテゴリ2には何も設定されていません。するとファイル名は次のようになります。未分類の画像ファイル名はicon_number01_0.gif日記の画像ファイル名はicon_number01_1.gif料理の画像ファイル名はicon_number01_3.gif愚痴の画像ファイル名はicon_number01_4.gif2)HTML編集画面でタイトル前に<img>タグを挿入。HTML編集画面で次の一文を画像の赤線のように挿入してください。/>【お使いのブログの画像サーバURL】とは私のブログで言うhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/の事です。これは人それぞれ変わってくるのでご自身でお調べ下さい。ファイルをアップロードするとここに収容されるようです。記事タイトルは<h2>で囲っているので、その前に先ほどの<img>タグがきているのが分かると思います。タグの中の<%topentry_category_no>でそれぞれのカテゴリ番号が自動的に割り振られるので、自動でタイトルの前にそれぞれのアイコンが表示されるという仕組みです。ファイル名は【icon_number01_*.gif】としましたが、このicon_number01_の部分はお好きに変更していただいてかまいません。その場合、2)のHTML編集画面で挿入した<img>のファイル名も変更する必要があります。Entry(関連記事)を非表示にする。Entry検索フォームプロフィールAuthor:Hellowmail:hkdesign.mail☆gmail.com☆を半角@に変えてください。HenniKodawaruDesign略してHKDブログテンプレートならHKDにようこそ!このサイトではFC2で使える共有テンプレートを配布しています。サイトについての説明はこちらをどうぞ。like!」を作りました。機能1:はてなハイクをサイト上に投稿できる機能2:はてなハイク投稿時に同時にtwitterにも投稿する詳しくは次のURLへお越しくださいhk-factoryGoogleウェブストアプラグインギャラリーブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。日付が未来になっている記事の表示設定CustomRssReaderを2つ同時に使う方法カスタムデザインサンプルImageClock詳しくはこちらカスタマイズはこちらImageClockを二つ以上表示する方法ImageClockカスタマイズ用Flashを作成テンプレートギャラリーブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。詳しくはこちら動作環境についてテンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。BrowserLabを使ってチェックしています。BrowserLabhttps://browserlab.adobe.com/ライセンスについてライセンス形態はGPLライセンスをとります。簡単に言うと次の4つです。カスタマイズ・再配布など連絡なしに使用OK。著作権表示は消したらダメです。なんらかの損害が出た場合は自己責任です。再配布する場合、GPLライセンスが適用されます。ブログテンプレートならHKD。