記事ごとのカテゴリー指定に合わせた背景画像をつけてみる。 これを応用することによって、CSSでやれることなら何でも可能となる。
と、その前に、IEで表示確認をしてみたところ二つ問題が発生していた。 普段Fxを使う身としては、たまにこういうIEでのチェック忘れがある。
まず、PNG画像の透過処理はIEだと無効で、ただ灰色に表示されているだけだった。
二つめは、前回の<code>でカスタマイズしたオーバーフローと改行が想定外の動作をしていた。
PNG画像の透過問題は、透過部分を背景色に合わせた白にしてしまうか、GIF画像にするかで解決する。 GIFを避ける意味でPNGを使っているのだから、今回は透過無しの白背景画像を新たに作った。 どうしても透過が必要な場合はGIFを使うしかないだろう。
本題のカテゴリー別背景画像貼り付けを。 ちょっとしたシールを貼り付けたような感じにしようと決めて、横200pxの画像をカテゴリー別に用意した。
PERSONA3:TNB用画像
Electronics用画像
F1用画像
WordPress用画像
そして、テンプレートとCSSの編集をする。
PHPに関してはズブの素人なので、本来ならWPのテンプレート内にあるPHP部分はいじれないというか、いじってはいけないのだが、テンプレートいじりで少し複雑なことがやりたければ、PHPを編集するしかない。 ここがレンタル物とは違う自前設置ならではの好き放題やり放題となるわけだが、これがモロに敷居の高さとなってくるのだろう。 ましてやWPは英語ができなければまず使いこなすことは不可能。 そして、小生、自慢できるほどに英語が大の苦手でして…、ほんと大変なのです。 っていうか無理がある。
やり方としては、post部分のclassにカテゴリ名を仕込んで、CSSからカテゴリ名のセレクタで背景画像設定をしておく。 これでロジカルなカテゴリシール貼りができる。
予備知識ゼロ、経験値ゼロスタートだから、これまた色々調べてめちゃくちゃ苦労したけれども、修正はたった一行。
<div class="post <?php foreach((get_the_category()) as $cat) { echo $cat->category_nicename . ' '; } ?>" id="post-< ?php the_ID(); ?>"></div>
いつものデフォルトテーマのテンプレートファイル、index.php内の該当箇所をこんな感じにする。 深い意味は考えないほうがいい…。 プログラミングなんてのはTry＆Errorの積み重ねと勘で乗り切るものさ…。
次に、いつものCSSを編集する。
.post.persona3tnb {
background: url(images/p3tnb_2.png) no-repeat right 50%;
}
.post.wordpress {
background: url(images/wordpress-logo-cristal_2b.png) no-repeat right 50%;
}
.post.f1 {
background: url(images/honda_2.png) no-repeat right 50%;
}
.post.electronics {
background: url(images/edison2c.png) no-repeat right 50%;
}
意味としては、まず背景画像を指定して、ノーリピート、右寄せ、縦は領域の中央配置という意味。 これはプログラミングなんかが分からなくても、なんとなく読んで理解できるもの。 もちろん書式の間違いは許されないけれども、とっつきはいい。 CSSは誰でもいじれます。
さらにこれを応用しやすいように、画像ファイル名とカテゴリ名（カテゴリースラッグ）を一緒にしておくといいかも。 そうすればCSS以外の場所でこの画像を引っ張り出せるから。 暇があったらそれもやってみよう。
で、ちょちょっとmemoページを更新。
