CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）: 小粋空間

Top ＞ CSS ＞ CSSでブログに影をつける（ドロップシャドウ：Movable Type 4.x 配布テンプレート版）

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

Posted at September 11,2008 1:55 AM
Tag：[CSS, Dropshadow, Template]

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

背景画像

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

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

１．ドロップシャドウの仕組み

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

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

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

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

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

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

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

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

２．１ドロップシャドウ用画像のダウンロード

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

ドロップシャドウ用背景画像

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

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

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

２．２テンプレートの修正

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

...前略...
<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>
...後略...

２．３スタイルシートの修正

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

注：配布テンプレートのバージョンによっては修正前の内容が表示しているものと若干異なる場合があります。対応するセレクタ（.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
２．２項の説明が誤っていたので修正しました。また、２．１項に背景画像を作る記事へのリンクを追加しました。

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

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

Posted by yujiro このページの先頭に戻る

関連記事をもっと読む

トラックバックURL

このエントリーのトラックバックURL:

いつもありがとうございます。

また質問なんですが、

http://junnama.alfasado.net/online/2008/04/_mtpag.html

このPagerというプラグインを使ってページ分割させたいんですが、いかんせん
インストールの仕方がわかりません。
作者に問い合わせたんですが音無しなので…

PHP化しなくてもページ分割できるとあってすごくよさそうな感じなので
よろしくお願いします。

[1] Posted by 名無し : September 11, 2008 10:14 PM

＞名無しさん
こんにちは。
ご質問の件ですが、他の方からも（別の似たようなプラグインですが）ご質問を頂いているので、別途エントリーしたいと思います。
すいませんが少々お時間ください。
それではよろしくお願い致します。

[2] Posted by yujiro

: September 12, 2008 9:42 AM

エントリーありがとうございます。
現在、MT4.21を使用しております。
エントリーの説明はかなり割愛されているのでしょうか？
テンプレートでの修正がわかりにくいです。
一度チャレンジしてみましたが表示が崩れましたので元に戻しました。
私の知識不足なんでしょうがこちらの説明ではうまく表示さすことができません
でした。

[3] Posted by conan : September 15, 2008 10:02 PM

＞conanさん
こんばんは。
バージョンによってテンプレートの内容が少しずつ異なってしまったものになっているので、それぞれに対応したカスタマイズ手順を提示するのは困難です。
おそらく、本文に示している赤色の削除部分と、青色を追加するセレクタがどれかお分かりにならないと推測しますが、不具合がある状態で拝見させて頂ければ、個別に対応します。
それではよろしくお願い致します。

[4] Posted by yujiro

: September 15, 2008 11:56 PM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

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

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

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

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

Now loading...

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