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

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 要素はブログ名、h2 要素はブログの説明を表示します。

<div id="header">
    <div id="header-inner">
        <div id="header-content">
            <h1 id="header-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
            <h2 id="header-description">description</h2>
        </div>
    </div>
</div>

配布テンプレートも大体同じですが、div の入れ子はデフォルトテンプレートより少ないです。h1 要素はブログ名、p 要素はブログの説明を表示します。ブログの説明を h2 要素にしていないのは、ブログ記事タイトルを h2 要素にしているためです。デフォルトテンプレートではブログ記事タイトルは h3 要素になります。

<div id="header">
<h1 id="blog-name"><a href="http://user-domain/" accesskey="1">My First Blog</a></h1>
<p class="blog-description">description</p>
</div>

画像を表示するにあたって、ヘッダーの (X)HTML マークアップを変更する必要はありませんが、基礎として覚えておくと良いでしょう。

なお、いずれのヘッダーも「ヘッダー」テンプレートモジュールにあります。構造を分かりやすくするため、上記のマークアップは再構築後のソースで表示しています。

１．２ ヘッダーの CSS

いずれの場合も、一番外側の div 要素に対し、下記の CSS を設定すれば背景画像（リストの「画像ファイル名」）を表示します。

#header {
    background-image: url("画像ファイル名");
    background-position: left top;
    background-repeat: no-repeat;
}

１．３ プロパティの説明

CSS で設定する各プロパティの内容は次の通りです。

background-image

画像ファイル名を指定します。画像ファイル名の部分にはURL指定（例：http://domain/images/hogehoge.gif）・ドキュメントルートからの絶対パス（例：/blog/image/hogehoge.gif）・スタイルシートからの相対パス（例：../images/hogehoge.gif）が指定できます。ダブルクォーテーションは任意です。

background-position

画像の表示開始位置を指定します。ここではleft（水平位置が左端）と top（垂直位置が上端）を指定しています。右下端から開始する場合は「right bottom」とします。記述順序は基本的に1番目が水平位置、2番目が垂直位置です。% や px 指定による設定も可能ですので、表示位置を細かく決めたい場合はこちらの方が良いでしょう。ご自身で調べていろいろお試しください。

background-repeat

画像の繰り返しを指定します。バナーのサイズに等しい画像を表示する場合はサンプルのように「no-repeat（繰り返しなし）」とします。バナーからはみ出した部分は表示されません。
バナーより小さい画像で繰り返し表示をするには、水平方向に繰り返す場合は「repeat-x」、垂直方向に繰り返す場合は「repeat-y」、水平・垂直方向に繰り返す場合は「repeat」とします。

上記の各プロパティを background プロパティにまとめて記述することも可能です。ここではこの方法で説明を進めます。

#header {
    background: url("画像ファイル名") no-repeat left top;
}

注：画像ファイルを記述した右カッコの直後には、必ず半角空白を入れてください。空白がないとブラウザによっては画像が正常に表示されない可能性があります。
下は誤った例です。

#header {
    background: url("画像ファイル名")no-repeat left top;
}

２．デフォルトテンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や style.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ

なお、画像の設定だけではヘッダー上部に border の設定が残っているため、ヘッダー全体を画像で埋めるには次のように border-top-width プロパティを追加してください。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header { 
    border-top-width: 0;
    background: url("背景画像ファイル名") repeat-x top left; 
}

完成イメージ

２．配布テンプレートに画像を表示する

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ（index.html や styles-site.css と同じディレクトリ）にアップロードしておき、赤色の部分にアップロードしたファイル名を記述してください。

/* ヘッダ */
#header {
    padding: 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
  
#header { 
    background: url("背景画像ファイル名") no-repeat top left; 
}

完成イメージ

４．リキッドレイアウトの場合

上記は固定レイアウトをサンプルに説明しました。リキッドレイアウトの場合はディスプレイの解像度によって横幅がかなり長くなる可能性があるので、横長の画像を用意するか、水平方向の繰り返し表示を指定するようにしてください。

５．画像が垂直方向に収まらない場合

作成した画像がヘッダーの縦方向に収まらない可能性もあります。このような場合、タイトルバナーの縦幅を広げます。配布テンプレートであれば、

/* ヘッダ */
#header {
    padding: 25px 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
...後略...

と、padding プロパティの上下方向の値を追加させることでタイトルバナー全体の縦幅が広がります。
デフォルトテンプレートの場合も padding プロパティで縦幅を広げることができます。

または、次のように line-height プロパティを与えます。

#header {
    line-height: 2.5;
}

デフォルトテンプレートでは #header-name に与えてください。

#header-name {
    line-height: 2.5;
}

値や単位の説明は省略しますので、他のサイトなどで調べてください。

６．ブログタイトルの位置を補正する

ブログタイトルの位置を補正したい場合は、padding プロパティを修正します。ここではデフォルトテンプレートの他のスタイルの背景画像

mt-static/themes/cityscape-portland/header.png

を利用して、左上に表示する例で説明します。

６．１ デフォルトテンプレートの場合

デフォルトテンプレートでは次のように設定します。

@import url(<$mt:StaticWebPath$>themes-base/blog.css);
@import url(<$mt:StaticWebPath$>themes/minimalist-red/screen.css);
 
#header {
    border-top-width: 0;
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") repeat-x top left;
    padding: 0 0 40px 5px;
}

完成イメージ

パディングを指定する順番は、左から時計回りに「上・右・下・左」です。ちなみにパディングを個別に指定する場合は、

padding-top: 0;
padding-right: 0;
padding-bottom: 40px;
padding-left: 5px;

とします。右のパディングについては

text-align: left;

と、テキストを左寄せにしているため、省略しても問題ありません（テキストを右寄せにする場合は必要になります）。

このように、タイトルを左上寄せに配置するには、左パディング・上パディングを少なくし、下パディングを増やせばよい訳です。

ブログタイトルを右寄せにする場合は、#header に

text-align: right;

を追加します。

６．２ 配布テンプレートの場合

配布テンプレートでは次のように設定します。青色部分のように設定してください。

/* ヘッダ */
#header {
    padding: 25px 15px 75px 25px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
 
#header {
    background: url("<$mt:StaticWebPath$>themes/cityscape-portland/header.png") no-repeat top left;
}

完成イメージ

• 
• Tweet

<div id="header">
<h1 id="blog-name"><a href="<mt:blogURL />" accesskey="1"><mt:blogName encode_html="1" /></a></h1>
<mt:if tag="BlogDescription"><p class="blog-description"><mt:blogDescription encode_html="1" /></p></mt:if>
</div>

<div id="header">
<h1><mt:blogName encode_html="1" /></h1>
<div><p><a href="<mt:blogURL />"><img src="http://vita.qee.jp/mt/imgcss/baner.png" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
</div>

/* ヘッダ */
#header {
    padding: 56px 15px;
    border-bottom: 1px solid #669;
    color: #999;
    background: #8fabbe;
    text-align: left;
}
 
#header a,
#header a:link,
#header a:visited {
    color: #fff;
    background: transparent;
    font-size: 32px;
    text-decoration: none;
}
#header a:hover {}
#header a:active {}
 
#header { 
    background: url("http://vita.qee.jp/mt/imgcss/baner.png") no-repeat top left; 
}

#header {
    height: 150px;
}
#header div {
    position: relative;
}
#header div p {
    position: absolute;
    top: -19px;
    _top: -18px; /* IE6 */
    left: 0;
}
*:first-child+html #header div p {
    top: -18px; /* IE7 */
}
/* opera9 \*/
html:\66irst-child #header div p {
    top: -18px;
}