CSS でヘッダーに画像を表示する for Movable Type 4

以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。 デフォルトテンプレート・配布テンプレートともにMovable Type 3.x からマークアップが変更されたため、本エントリーでヘッダに画像を設定する方法を簡単に紹介します。 この内容は Movable Type 以外のブログでも利用可能です。 エントリーの中で用いている背景画像は Link Style 様より利用させて頂きました。ありがとうございました。 １．基本 デフォルトテンプレートのヘッダー部分の(X)HTMLマークアップと、画像を表示するためのCSSの基本的な設定は次の通りです。 １．１ ヘッダーの (X)HTML マークアップ デフォルトテンプレートのヘッダーの (X)HTML マークアップは、div 要素と h1/h2 要素、a 要素でブログのタイトルを表示しています。h1

[naminori-man]

ブログタイトルのヘッダを画像にする

[kasedac]

"ブログの上部タイトル部分の背景に画像を表示するカスタマイズです。CSS のbackground プロパティを利用することで、スクリーンショットのように画像を表示することができます"