小粋空間  -  a cheap joke and a play on words site

CSSでエントリータイトルに画像を表示する

エントリータイトルの先頭に画像に表示する方法を紹介します。ここでは公開テンプレート（Movable Type）を用いた説明になりますが、HTMLとCSSの設定による一般的なテクニックですので、どのようなテンプレート（あるいはHTML）でも利用可能です。 本カスタマイズを行うことで、スクリーンショットのようにタイトル左に画像が表示されます。 以下カスタマイズ方法です。なお、リスト形式（ul - li）で画像を表示する場合はリストマークの画像のずれを修正するを参照ください。

１．テンプレートの修正

Movable Type の公開テンプレートではエントリータイトルを下記のように設定しています（分かりやすくするために一部省略しています）。

<h3 class="entry-header">●<$MTEntryTitle$></h3>

<$MTEntryTitle$> が実際にはエントリータイトルに変換されます。「●」は私が勝手につけたもので、エントリータイトルの先頭に付与されます。
この「●」を削除して、

<h3 class="entry-header"><$MTEntryTitle$></h3>

としてください。テンプレートの修正はこれだけです。他のテンプレートをお使いの方は、エントリータイトルを囲むタグに

class="entry-header"

が設定されていればOKです。

この entry-header を利用して次項でスタイルを設定しますが、補足しておくと entry-header という class 属性は不要で、

<h3><$MTEntryTitle$></h3>

として、hx（ここでは h3）タグに直接スタイルを設定することも可能です。ここでは h3 を h2 や h1 に変更する時の利便性を考慮してこのような設定にしていますが、hx タグにスタイルを設定する手法が本来的と思われます（同じ hx に異なるスタイルを設定する場合は class 属性を与えます）。

２．CSSの修正

スタイルシートで、エントリータイトル部分のスタイルを指定する entry-header に青色のプロパティを追加します。公開テンプレートを誤使用でない方も、青色部分のプロパティ設定は同じです。

/* エントリータイトル */
.entry-header {
    margin: 15px 0 0;
    color: #444444;
    font-size: 12px;
    font-weight: bold;
    padding-left: 17px;
    background: url(http://hogehoge/images/image.gif) no-repeat 0px 0.2em;
}

padding-left プロパティはテキストタイトルの左側に余白を作り、そこに画像を表示させるために設定します。
background プロパティで画像を表示させます。後続の設定の意味は下記の通りです。

url(?)

表示させたい画像のURL（background-image）

no-repeat

画像を繰り返さない（指定しないと繰り返し表示されます）（background-repeat）

0px

画像の左端からの表示位置（background-position）
*単に"0"でもOKですが値を設定する場合を考慮して単位を付与しています

0.2em

画像の上端からの表示位置（background-position）

カッコ内はプロパティを別々に設定した時に対応する名称です。
テキストタイトルのパディングと画像の表示位置は画像サイズによって変動するため、適宜調整してください。"17px" および "0.2em" という値を変えることで微調整できます。

またここでは説明を割愛しますが、画像をエントリーのテキスト全体に背景として表示させることも可能です。

３．非推奨

画像を表示する場合、img タグをテンプレートに設定して

<h3 class="entry-header"><img src="http://hogehoge/images/image.gif"><$MTEntryTitle$></h3>

とする手もありますが、ウェブスタンダード的には

• 文書構造とデザインの混在
• 転送バイト数の増加

の点からお勧めではありません。

具体的には、画像を他の画像に変更したい場合、HTMLに img タグを直接記述していると文書構造を表すHTMLを変更しなければなりません。また、エントリータイトルが同一ページに複数存在する場合、img タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。