iPhone/ カメラ/ 自転車/ ブログ/ 食べ物についてプログラマーやらしてもらっているtakoashiがぐちぐち言う日記系ブログです。
電化製品は機能重視。takoashiはtoshiba:RDを応援してます。
プログラマ系ブログ「takoashiの開発記録」も、よろしくお願いします。

ミニカスタマイズ　１３

課題：
カテゴリーごとにタイトルの画像をかえる

方法：
FTP機能(Pro版)
HTMLテンプレートを編集
のふたつを使います。

まず、カテゴリー名と同じ画像ファイルを用意します。
すべて、FTPで、サイトにアップします。
用意する画像はなんでもよいです。
下の変更例はpngファイルになってますけど。

HTMLテンプレートで

<h3 class="title"><$ArticleTitle ESCAPE$></h3>

を

<h3 class="title"<IfArticleCategory> style="background: url(<$BlogUrl$>/<$ArticleCategory ESCAPE$>.png) no-repeat fixed 100% 0%;"</IfArticleCategory>><$ArticleTitle ESCAPE$></h3>

のように変更します。

すると・・・・
タイトルの右側に画像が表示されます。

注意：
用意する画像は、ファイルより記事のタイトルの幅以上は表示されません。
左側に表示するようにして、アイコンのように表示することも可能です。

うまい画像が作れないのでサンプルはまだありません。
かっこよく出来上がったらだれか見せてください。

つぎは、無料版でも実現可能なスタイルシート版を作ってみます。
条件は、カテゴリー名がアルファベットのみです。
そして、設定が結構めんどくさいかも。。

このカスタマイズは、nicoさんの要望で対応しました。
どんどん要望受け付けま～す

-------------------
ほかのミニカスタマイズも見てみようか

参考になりました？応援だと思ってお願いします。