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

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

Posted at May 26,2006 1:38 AM
Tag：[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 タグがエントリー数分必要となるため転送バイト数が増加し、僅かですが表示速度のパフォーマンスに影響します。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ CSSでエントリータイトルに画像を表示する　と、更新マーク from チームニゴイでございます。
いつもお世話になってる小粋空間さんのエントリー「CSSでエントリータイトルに画像... [続きを読む]

Tracked on May 26, 2006 5:55 PM
コメント

お世話になります。こんにちは。
ウチは思い切り悪い例です(^^ゞ
後日修正したいと思います。。。(^O^)
勉強になります(^^ゞ

[1] Posted by くんぞー : May 26, 2006 5:15 AM

お世話になります。こんにちは(^O^)
早速やってみました。意外と簡単で助かりました！ありがとうございました。
というわけでエントリーしてトラバさせていただきましたm(_ _)m

[2] Posted by くんぞー : May 26, 2006 5:58 PM

＞くんぞーさん
こんばんは。
早速のご利用＆トラックバックありがとうございました。
説明不足でしたが、くんぞーさんの元の設定からすると、h3 タグに直接スタイルを設定されても大丈夫ではないかと思います。よろしければお試しください。
ではでは！

[3] Posted by yujiro : May 27, 2006 2:48 AM

yujiroさんこんにちは(^O^)
そうですよねぇ(^O^)
更新マークと差し替える方法があれしか思い浮かばなくて(^^ゞありがとうございましたm(_ _)m

[4] Posted by くんぞー : May 27, 2006 12:52 PM

＞くんぞーさん
こんばんは。
すいません。そこまで読め切れてませんでした。
class 名を変更するのはグッドアイデアですね。

[5] Posted by yujiro : May 28, 2006 12:57 AM

こんにちは(^O^)
yujiroさんにそう言っていただけると安心します(^_^)b
これからもよろしくお願い致しますm(_ _)m

[6] Posted by くんぞー : May 28, 2006 12:08 PM

＞くんぞーさん
こちらこそ。
ではでは！

[7] Posted by yujiro : May 29, 2006 12:43 PM

いつもお世話になっております
こちらの方法を使わせていただいておりますが
画像をエントリー名の左に載せる際、テキストよりも大きかった場合その分切れて表示されてしまうのですがこれを回避する方法はありますか？

[8] Posted by CHOBI : November 20, 2006 1:33 AM

＞CHOBIさん
こんにちは。
ご質問の件ですが、貴サイトの場合であれば、.entry-header に height プロパティ、または line-height プロパティを設定すれば大丈夫と思われます。
それではよろしくお願い致します。

[9] Posted by yujiro : November 21, 2006 11:19 AM

yujiro様、こんばんわ。
そしていろんなところで質問ばかりですみません。
以前はタイトル画像をつけることが出来たのですが、今回は出来ません。
まず、画像の大きさは37×15なので、padding-left: は一応40px;にしました。
位置的には納得したのですが、いろいろなところを削除したりしたのですが、元のテンプレートの縦棒を消すことができません。
そしてこの記事の最初の方で言っているテンプレートの●の削除。
ここが全くわかりません。
正直どのテンプレートをさわれば良いのかから「？」なのです。
完成品としてはpenでサラサラと書いている画像だけをイメージしているのですが、どうすれば良いのでしょうか？
たびたび申し訳ありませんがよろしくお願いいたします。

[10] Posted by tsudku : September 1, 2010 8:04 PM

yujiro様、おはようございます。
いろいろとテンプレートを直したり、CSSを見直したりしましたが、今朝ボーっとやっていたらグレーの縦棒が消え、自分のアップデートした画像のみが表示されました。
いろいろお騒がせいたしましたが、無事解決に至った訳です。
また、helpコメントを出すかもしれませんが、その時はよろしくお願い致します。

[11] Posted by tsuduku : September 10, 2010 8:52 AM

こんにちは。
ｆｃ2ブログでお世話になっているＢｌｅｎｄです。
素敵なテンプレートを使わせていただいています。

早速ですが、エントリータイトルの画像高さ50pxなのですが、
上記のやり方ですと、画像が入りきらないですよね？

画像をこれ以上はあまり小さくしたくないのです。
どうしたら全部映るようにできますか？

http://xxxblendxxx.blog.fc2.com/

よろしくお願い致します。

[12] Posted by crazy_blend logo : July 14, 2012 4:30 AM

＞crazy_blendさん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、以下のようにしてみていただけますでしょうか。

.entry-header {
    background: url("http://blog-imgs-54-origin.fc2.com/x/x/x/xxxblendxxx/starbucks.jpg") no-repeat scroll 0 0 transparent;
    font-size: 100%;
    font-weight: bold;
    height: 55px;
    margin: 15px 0 0;
    padding-left: 45px;
    padding-top: 15px;
}

画像がすべて表示されて、記事タイトルは画像の中央に表示されると思います。
それではよろしくお願い致します。

[13] Posted by yujiro logo : July 15, 2012 1:53 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）