1. 固定ページでは全ページのタイトルを画像に。
2. 投稿系では一覧・詳細共に共通でカテゴリー名をタイトル画像に。
   （記事が属するカテゴリは一つだけとする）

これを実現するためには、タイトル要素をCSSで指定できるようにすればいい。
Wordpressは body のクラスに自動でページIDや投稿IDをつけてくれているのですが、これをフックにする場合、以下の問題が・・・

• ページや投稿記事を作成するまでIDが何になるかわからない
• 投稿記事のbodyには属するカテゴリについての情報を出力しない

そこで、タイトル要素の親要素のクラスに

1. 固定ページでは、ページスラッグ
2. 投稿記事一覧・詳細では、カテゴリースラッグ

を出力するようにカスタマイズします。

1. ページスラッグの出力カスタマイズ例（page.php）

<div id="content" class="pgslug-<?php echo get_page_uri($post->ID);?>" role="main">

第3階層以下は全て第2階層のタイトル画像を使用する （2011/11/01追記）

• 商品紹介
  • 商品その1
  • 商品その2
    • 商品その2のバリエーションその1
    • 商品その2のバリエーションその2
  • ・・・

というような階層構造をWordpressで作成している場合、タイトル画像は商品紹介以下全ページで「商品画像」としたい、という場合が多いかと。
そんな場合はこれで。

<?php
$top_post = get_post($post->ID);
while ($top_post->post_parent) { $top_post = get_post($top_post->post_parent); }
$top_slug = get_page_uri($top_post->ID);
?>
<div id="content" class="pgslug-<?php echo $top_slug;?>" role="main">

2. カテゴリースラッグの出力カスタマイズ例（single.php, category.php）

<?php
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
?>
<div id="content" class="pgslug-<?php echo $catslug; ?>" role="main">

その他のコンテンツでは…

アーカイブや検索系では body に対応するクラスが付いているので、それをフックにします。

• アーカイブ：archive
• タグ：tag
• 検索系共通：search
  • 検索結果一覧：search-results
  • 検索で見つからない：search-no-results
• Not found：error404

あとはこれら全てのクラスに対して

.pgslug-xxxx #page-title {
width: 100%;
height: 35px;
overflow: hidden;
text-indent: -999em;
background: url(画像のパス) no-repeat;
}

のように背景画像を設定すればいいかと。

できればプレーンテキストでハマるデザインで提案しておきたいところですが…どうしてもって場合もあるので、備えあれば憂いなし。

こんなに便利なのに、IE6以前では A 要素にしか対応していない。不便。

例えば、フォームの input ボタンに マウスオーバー効果を付加したい。

なんて時には、泣く泣くCSSは諦めて、マウスオーバー用の画像を用意してonmouseover=”this.src=’button_over.gif’”
なんて事をしないといけなかった。

が、ここで朗報！
この問題だけをクリティカルに解決してくれる素晴らしい方法がありました。

• IEでa要素以外に:hover擬似クラスを適用させる

要するに、
Whatever:hover で配布している csshover.htc をダウンロードして、
これを body { behavior:url(“csshover.htc”); } で読込む。以上！

なんて簡単な・・いや、この htc を開発した開発者さんに感謝。