micata|Hタグの見出しを画像で装飾する方法

流行りのCSSによる見出しもいいですが、background-imageを使ったカスタマイズはいかがでしょう。商用サイトならではの個性を引き出せるのが特徴です。

Adsense336

カテゴリー別に画像を別々の物で表示する時は、動的にIDセレクタを変えておくといいでしょう。

1 category.php
2 CSS
- 2.1 カスタマイズ例
3 カテゴリー一覧の記事タイトルを画像に置き換える
4 itiran-thumbnail-off.php
5 CSS
- 5.1 カスタマイズ例
- 5.2 画像サイズが大きすぎるとスマホで荒くなる

category.php

「

上記のH1要素内にIDセレクタを加えます。

「

こうする事で全カテゴリーページのH1に、別々のセレクタを設置することが出来ます。CSSでは#post-（取得したID）となるので、これをカスタマイズしてあげれば出来上がり。「post-」としたのは、セレクタの最初の文字は数字が駄目だからという単純な理由です。数字以外であれば何でも構いません。

CSS

せっかくIDセレクタを設けたのですから、そちらを使った影響を受けても問題のないレイアウトにしてみましょう。

ここで使うのはbackground-sizeプロパティです。要素内に収まるように背景画像を使用するのに使います。例えば見出しのIDをスタイルシートでレイアウトする方法ですが、装飾ではない画像は本来ならインライン要素として記述するのが好ましいです。しかし、今回の方法でIDセレクタを使うにはこの方法がベスト。要素内にアスペクト比率を維持した状態で拡大縮小が可能な背景画像は、まさにリキッドレイアウトにぴったり。

カスタマイズ例

#post-数字 {　//「数字」の部分は要素の検査で確認
	background: url(http://akky4976.info/....jpg) right no-repeat;
	-moz-background-size: contain;
	background-size: contain;
}

この例では見出しの右端部分に、はみ出さないように縦横比固定の拡大縮小できる背景画像を表示させています。左端には見出しの文字をそのまま使う手法です。文字に関しては適宜調整を行って下さい。letter-spacingプロパティが活躍します。

カテゴリー一覧の記事タイトルを画像に置き換える

上記の応用編で、今度は全て画像で表示します。サムネイル有りで"itiran-thumbnail-on.php"を、無しで"itiran-thumbnail-off.php"を編集します。

itiran-thumbnail-off.php

上記H3要素に下記のようにセレクタを追記します。

CSS

text-indent:-9999px;としておくことで、狙った表示になります。文字は見えませんが、背景画像はきっちり要素内に収まります。

カスタマイズ例

h3#heading数字 { //「数字」には取得したIDを代入
	background: url(http://akky4976.info/....png) left no-repeat;
	text-indent: -9999px;
	height: 42px; //画像の高さを指定
	background-size: contain;
	-moz-background-size: contain
}