TopCSS > 2008年9月
2008年9月30日

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

September 30,2008 1:55 AM
Tag:[, ]
Permalink

以前エントリーした「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;
}

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

Comments [6] | Trackbacks [0]
2008年9月11日

CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)

September 11,2008 1:55 AM
Tag:[, , ]
Permalink

CSSでブログの横に影をつける方法です。

背景画像

以前エントリーした、「CSSでブログに影をつける(ドロップシャドウ)」は、Movable Type 3 向け配布テンプレートの CSS レイアウトに合わせたものでしたが、Movable Type 4 では CSS レイアウトを変更したので、そのままでは適用できません。

ということで、Movable Type 4 向けの配布テンプレートによる設定方法を紹介します。このエントリーでは固定レイアウトのみを対象にしています。

1.ドロップシャドウの仕組み

固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、CSS を利用して表示します。ドロップシャドウとはいっても、要するにブログ幅に合わせた、単なる背景画像です。

下のスクリーンショットはその一部分です。固定レイアウトの場合、下の画像と、これを 180℃反転させた画像を、幅900px ほどの GIF 画像の両端に配しています。

背景画像

基本的には、body 要素の背景画像(CSS で言えば body 要素セレクタの background プロパティ)に背景画像を指定すれば良いのですが、IE6 の場合、ブラウザのリサイズでタイトルバナー右端と背景画像の間に空白が時々発生するという問題があります *1 ので、ここでは div 要素に背景画像を与えています。

また、div 要素に設定する場合でも、width プロパティを指定した親の div 要素がないと、body 要素に背景画像を設定した場合と同様の事象になるようです。
かなりおおざっぱですが下記に(X)HTMLマークアップのイメージを記します。*2

<body>
  <div> ← ブログの幅を指定
    <div> ← 背景画像を指定
   :
 [ブログ本体のマークアップ]
   :
    </div>
  </div>
</body>

設定内容については、後述する公開テンプレートによるカスタマイズをご覧ください。

下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。

2.配布テンプレートによるカスタマイズ

2.1 ドロップシャドウ用画像のダウンロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

保存したファイルは、サーバのブログディレクトリ(index.html があるディレクトリ)にアップロードしてください。
この背景画像は、配布テンプレートの3カラム固定レイアウトの幅に合わせています。

異なる背景画像を作りたい場合は、下記の記事を参考にしてください。

CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方

2.2 テンプレートの修正

ページ全体の修正イメージ(赤色を削除して青色を追加)は次の通りです。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
    ...中略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

このように変更するためには、まず、「ヘッダー」テンプレートモジュールに対し、下記の修正(赤色を削除して青色を追加)を行ってください。

...前略...
<div id="box" class="clearfix">
  <div id="inner" class="clearfix">
...後略...

次に、「フッター」テンプレートモジュールに対し、下記の修正(赤色を削除して青色を追加)を行ってください。

...前略...
  </div>
</div>
<div id="footer">
  <div id="footer-inner" class="clearfix">
    <p id="footer">Copyright ...中略... All Rights Reserved.</p>
  </div>
</div>
...後略...

2.3 スタイルシートの修正

スタイルシートに対し、下記の修正(赤色を削除して青色を追加)を行ってください。

注:配布テンプレートのバージョンによっては修正前の内容が表示しているものと若干異なる場合があります。対応するセレクタ(.layout-three-column と組み合わせたもの)は同じなので、セレクタと変更内容をよく確認して修正してください。

/* カラム切り替え */
body.layout-three-column,
body.layout-three-column-right,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    text-align: center;
    background: #36414d;
}
...中略...
/* 固定レイアウト共通 */
.layout-three-column #box,
.layout-three-column-right #box,
.layout-two-column-left #box,
.layout-two-column-right #box,
.layout-one-column #box {
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #669;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    text-align: left;
    background-color: #fff;
}
 
/* 3カラム固定レイアウト幅 */
.layout-three-column-right #box,
.layout-three-column #box {
    width: 850px;
    width: 870px;
}
.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner {
    height:100%;
}
...中略...
/* フッタ */
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    margin-right: auto;
    margin-left: auto;
    border-left: 1px solid #669;
    border-right: 1px solid #669;
    border-bottom: 1px solid #669;
    height: 45px;
    color: #ffffff;
    background: #8fabbe;
    font-size: 12px;
    text-align: center;
    line-height: 3.5;
    line-height: 3.7;
}
.layout-three-column #footer,
.layout-three-column-right #footer {
    width: 850px;
    width: 870px;
}
.layout-three-column #footer-inner {
    _height:100%;
    padding: 0 10px;
    background: url("back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #footer-inner {
    height:100%;
}
.layout-three-column #footer-inner p {
    color: #fff;
    background: #8fabbe;
}
...中略...
.clearfix:after {
    content: ""; /* ピリオドを削除*/
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

2008.09.17
2.2項の説明が誤っていたので修正しました。また、2.1項に背景画像を作る記事へのリンクを追加しました。


*1:これは当サイトのテンプレートだけかもしれませんので、表示はご利用のテンプレートによって異なる可能性があります。

*2:div 要素を背景画像表示のために用いるのはXHTMLとして適正な文書構造ではありません(本来はブログ全体を括る要素に与えるのが妥当)が、クロスブラウザ対応のためのテクニックとして記しています。

Comments [4] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3