RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2010⁄03⁄12(Fri)
  • 00:27

記事タイトル前にカテゴリごとのアイコンを表示する方法

記事タイトル前にアイコンを挿入する方法。

長くなるので二つに分けました。

画像の内容は当テンプレートVer1です。
※テンプレートを編集するのでカスタマイズを行う前に現在のテンプレートをバックアップすることをお勧めします。

記事タイトルの前にカテゴリ別のアイコンを置く場合、次の手順が必要です。

1)カテゴリ番号に対応したアイコン画像をアップロードする。
2)HTML編集画面でタイトル前に<img>タグを挿入。

仕組みとしては、カテゴリ番号に対応したアイコン画像のURLを<img>タグがそれぞれ呼び出して表示するという感じになります。
それでは手順ごとに説明していきます。

1)カテゴリ番号に対応したアイコン画像をアップロードする。

ただ単純にアップロードすればいいわけではありません。こちらでサンプルを作ってみたのでご覧下さい。
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_0.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_1.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_2.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_3.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_4.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_5.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_6.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_7.gif
 http://blog-imgs-29.fc2.com/h/k/d/hkdesign/icon_number01_8.gif
 http://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.gif


2)HTML編集画面でタイトル前に<img>タグを挿入。

HTML編集画面で次の一文を画像の赤線のように挿入してください。
<img src="【お使いのブログの画像サーバURL】icon_number01_<%topentry_category_no>.gif" align="left" />

【お使いのブログの画像サーバURL】とは
私のブログで言うhttp://blog-imgs-29.fc2.com/h/k/d/hkdesign/の事です。
これは人それぞれ変わってくるのでご自身でお調べ下さい。ファイルをアップロードするとここに収容されるようです。



記事タイトルは<h2>で囲っているので、その前に先ほどの<img>タグがきているのが分かると思います。

タグの中の<%topentry_category_no>でそれぞれのカテゴリ番号が自動的に割り振られるので、自動でタイトルの前にそれぞれのアイコンが表示されるという仕組みです。


これで終了です。

なお、ファイル名は【icon_number01_*.gif】としましたが、このicon_number01_の部分はお好きに変更していただいてかまいません。
その場合、2)のHTML編集画面で挿入した<img>のファイル名も変更する必要があります。
関連記事
スポンサーサイト
category
カスタマイズ > その他カスタム
tag
カスタマイズ
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/79-6cd7cfd8

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
1441位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
15位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。