記事ごとのカテゴリー指定に合わせた背景画像をつけてみる。　これを応用することによって、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ページを更新。

　先日書き終えたD-VHS..の記事は少々マニアックというか、普通の人には分かりにくい用語や説明不足な箇所もあり、そこは毎度お馴染みWikipediaの力を借りるべく、該当リンクの追加作業をしていた。　そうこうしていると、このリンク部分にWikiのアイコンでもつけてみるか、などとまた余計なことをやり始める。
　リンクの横に画像をくっつけるのは簡単なことなのだが、この極小画像を作るのがやっぱり苦労した。　っていうか3バージョンほど作ったけれども、全然納得がいかない。

　んー、邪魔かなこれ…。

wiki icon 1
wiki icon 2
wiki icon 3

　いつものCSSファイルに以下を追加する。
a.wiki-link {
background: url(../../../wp-includes/images/wiki_icon3.png) no-repeat right bottom;
padding-right: 13px;
}

　Wikiへのアンカータグにクラス”wiki-link”を追加する。
<a class="wiki-link" href="http://ja.wikipedia.org/">Wikipedia</a>

　と、ここで前々から気になっていた<code>の処理がまったくダメダメな状態になり、これはもう放置するわけにもいかずCSSの調整をする。
　具体的にどこが気になっていたかというと、<code>内での自動改行処理で、これを自動改行禁止に設定変更し、さらに横スクロールバー処理を追加する。　この表示スタイルはコード表示として結構一般的になりつつある基本形だろう。　個人的にはあまり好きではないテキストスタイルというかレイアウトなのだが、自動処理にまかせていると本気でありえない改行と空白の演出をしてくれるから、やはり強制処理は必要になってくる。
code {
display: block;
overflow-x: scroll;　（横軸xの処理にスクロールバーを設定）
background-color: #F5FAFF;
white-space: pre;　（自動改行を禁止）
font: 1em 'Courier New', Courier, Fixed;
margin: 15px 15px 0 10px;
padding-left: 20px;
border-left: 5px solid #ddd;
}
　この二行を追加する。

　この変更により、過去の記事も全て影響を受けるので、念の為いくつか確認しておく。　普段から丁寧な記事書きを心掛けていれば、特に大きな問題とはならないはず。

　ふぅ…。

　あぁ…、あともう一つ、カテゴリーが増えてまた縦スクロールバーが出てきやがった。　ちょっと前にたしか16emに増やしたんだっけか。　ということで、20emに増やす。

　それほど邪魔になるもんでもないんで、先々のことを考え22emに増やす。　なぜか偶数にしてしまう…。

　っていうかこれ、height: 22em;をあらかじめ設定しておくことに意味があるのか？　なにも指定しないでおけば、普通IEやFxなら自動で高さ調整してくれんじゃねーの？　というわけでさっくり消してやった。　ふぅー、スッキリ。

　ある意味これは、カテゴリ数が膨大になった場合に縦の長さを適量に止める意味があるのか…。

　コメント表示をしてみて始めて気付くこのフォントワンサイズ落ち。　個人的に、読みにくい小フォントデザインは悪だと思っているので修正する。　相変わらず適用中のテーマはdefaultで。
　編集するファイルも前回同様↓
..\wp-content\themes\default\style.css
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
　0.9em → 1em
.commentlist li, #commentform input, #commentform textarea {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
　結構細かく定義されているんだなと思った。

　このブログの表示部分をCSSで少しいじってみる。　現在適用中のテーマはdefaultで。
　編集するファイルは↓
..\wp-content\themes\default\style.css

　ではまず、画像に枠線をつけてみる。
p img {
padding: 1px;　（1ピクセル隙間をあける）
max-width: 100%;　（拡大縮小せず100％表示）
border: 2px outset;　（2ピクセルで枠線をひく 線種はアウトセット）
}

　こんな感じ。

　そして、画像にリンク指定があった場合に、マウスカーソルが乗ったときの枠線に変化をつける。
a img {　（画像にリンク指定があった場合）
padding: 1px;
max-width: 100%;
border: 2px outset #DEF;　（枠線の色を#DEF（青白）にする）
}
a:visited img {　（リンク先が訪問（クリック）済みの場合）
padding: 1px;
max-width: 100%;
border: 2px outset #DEF;
}
a:hover img {　（マウスカーソルが乗ったとき）
padding: 0px;　（隙間なし）
max-width: 100%;
border: 3px outset #DEF;　（3ピクセルで枠線をひく）
}

　こんな感じ。

　とまあ、よくあるCSSでの枠線つけで。　IE6とFx1.5で動作確認をしながら微調整する。　多少色味の違い（outsetの描画処理）はあれど、これ以上の互換調整はむりということで終了。

　んー、<code>も少し変化をつける必要があるなぁ。
　他に、Faviconと、<hr>もいじってあるから、それも覚え書きしておきたいところ。

　というわけで、<blockquote>のCSSを参考に<code>を変更する。
code {
display: block;　（codeはインライン要素なので、ブロック要素に再定義する）
background-color: #F5FAFF;　（薄青白バック）
font: 1em 'Courier New', Courier, Fixed;
margin: 15px 15px 0 10px;　（右マージンを30→15ｐｘに減らす）
padding-left: 20px;
border-left: 5px solid #ddd;
}
　それに合わせて、参考元になった<blockquote>のCSSも変更する。
blockquote {
background-color: #F5FAFF;　（codeと同じバックカラー指定追加）
margin: 15px 15px 0 10px;　（codeと同じ右マージンに変更）
padding-left: 20px;
border-left: 5px solid #ddd;
}

　全体的に青を主体としたカラーリングに統一しながらCSSカスタマイズされた。