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

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

Posted at September 30,2008 1:55 AM
Tag:[CSS, Image]

以前エントリーした「CSSでタイトルバナーに画像を表示する」の Movable Type 4 版です。

デフォルトテンプレート・配布テンプレートともにMovable Type 3.x からマークアップが変更されたため、本エントリーでヘッダに画像を設定する方法を簡単に紹介します。
この内容は Movable Type 以外のブログでも利用可能です。

配布テンプレートに画像を表示

エントリーの中で用いている背景画像は Link Style 様より利用させて頂きました。ありがとうございました。

1.基本

デフォルトテンプレートのヘッダー部分の(X)HTMLマークアップと、画像を表示するためのCSSの基本的な設定は次の通りです。

1.1 ヘッダーの (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 マークアップを変更する必要はありませんが、基礎として覚えておくと良いでしょう。

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

1.2 ヘッダーの CSS

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

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

1.3 プロパティの説明

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;
}

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

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ(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; 
}

完成イメージ
デフォルトテンプレートに画像を表示

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

ブログ管理画面の「デザイン」→「テンプレート」の「スタイルシート」インデックステンプレートを開き、テンプレート編集画面で、下記の青色部分を追加します。背景画像はお好きなものを予めブログディレクトリ(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; 
}

完成イメージ
配布テンプレートに画像を表示

4.リキッドレイアウトの場合

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

5.画像が垂直方向に収まらない場合

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

/* ヘッダ */
#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;
}

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

6.ブログタイトルの位置を補正する

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

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

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

6.1 デフォルトテンプレートの場合

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

@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;

を追加します。

6.2 配布テンプレートの場合

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

/* ヘッダ */
#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;
}

完成イメージ
配布テンプレートに画像を表示

関連記事
トラックバックURL


コメント

こちらの記事を拝見させて頂きカスタマイズしました。
ところで、ヘッダーに画像を表示させタイトル名リンクをやめ画像全体にhomeに戻るリンクを適用させたいと思います。
お手数ですがご教授の程宜しくお願い致します。

[1] Posted by conan : October 8, 2008 10:02 PM

>conanさん
こんにちは。
ご質問の件ですが、「CSS の画像置換で画像にリンクを設定する」を元にしてみました。

ヘッダー部分のマークアップ

<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 プロパティのみ追加しています。

#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;
}

Windows の主要ブラウザ(IE6/IE7/Firefox3/Opera9/Safari3/Google Chrome)ではうまく表示されることを確認しています。

[2] Posted by yujiro logo : October 9, 2008 1:45 PM

早速のご教授ありがとうございます。
若干スタイルが崩れましたけどCSSの修整でなんとか正常に表示できました。
これでトップバナーもオリジナルスタイルでできそうです。
ありがとうございました。

[3] Posted by conan : October 9, 2008 11:25 PM

>conanさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
ではでは!

[4] Posted by yujiro logo : October 10, 2008 1:29 AM

ご多忙の中、誠に失礼致します。
私、ムーバブルタイプの初心者なのですが、貴殿の書籍を購入したり、web上を色々調べてみたのですが、どうしてもわからないので質問させて頂きます。
現在、ヴァージョンは4.2を使用しています。

ヘッダーのタイトル部分の文字色を変えるにはどうしたらよいのでしょうか。

初心者なので、できるだけ詳細に教えて頂けると助かります。
以上、宜しくお願い致します。

[5] Posted by やまだまん : January 1, 2009 12:57 AM

>やまだまんさん
こんばんは。
ご質問の件ですが、テンプレートセットによって回答が異なるため、ご利用のテンプレートセット名をお知らせ願えますでしょうか。
お分かりにならない場合は、サイトのURLをお知らせください(非公開にしたい場合はメールにてお知らせください)。
それではよろしくお願い致します。

[6] Posted by yujiro logo : January 6, 2009 12:47 AM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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