Top ＞ CSS ＞ CSSでブログに影をつける（ドロップシャドウ）
2006年11月29日

CSSでブログに影をつける（ドロップシャドウ）

Posted at November 29,2006 1:55 AM
Category：[CSS]
Tag：[, , ]

CSSでブログに影をつける（ドロップシャドウ）ブログのサイドバー部分に影（ドロップシャドウ）を作成するカスタマイズを紹介します。

ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず（そのテクニックが紹介されている記事もなく）、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。
最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。

このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。

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

１．１ 固定レイアウト

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

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

背景画像

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

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

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

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

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

１．２ リキッドレイアウト

基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。

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

こちらもサンプルを用意していますのでご覧ください。

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

２．１ 共通事項 - テンプレートの修正

固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

２．２ 固定レイアウトの場合

２．２．１ 画像のダウンロード

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

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。

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

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    width: 870px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.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%;
}

これでドロップシャドウが表示されればOKです。なお上記のサンプルは、背景画像（back_fixed.gif）がスタイルシートと同じディレクトリにあることを想定しています。

#inner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

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

２．３．１ 画像のダウンロード

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

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

スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。（略）と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。

/* タイトルバナー */
#banner {
    margin:0 15px;
    _height: 100%;
    padding: 15px;
    border-bottom: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
*:first-child+html #banner {
    height: 100%;
}
　　　　　　：
　　　　　（略）
　　　　　　：
/* 3カラム(リキッドレイアウト) */
.layout-three-column-liquid #content {
    margin: 0 185px 10px;
    margin: 0 200px 10px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}
.layout-three-column-liquid #links-left{
    position: absolute;
    width: 155px;
    top: 95px;
    left: 15px;
    left: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #links-right{
    position: absolute;
    width: 155px;
    top: 95px;
    right: 15px;
    right: 30px;
    color: #ffffff;
}
.layout-three-column-liquid #inner {
    background: url("back_liquid_left.gif") repeat-y top left;
}
.layout-three-column-liquid #box {
    background: url("back_liquid_right.gif") repeat-y top right;
    width:100%;
}

#banner に height プロパティを設定しているのは、IE6 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。

2007.05.09 追記
CSS に IE7 対応のセレクタを追加しました。

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

*2：背景画像の高さは、他のサイトを拝見すると、3px?5pxと、非常に薄いものが多いです。CSS によって繰り返し表示するということはブラウザのレンダリング性能に依存する訳ですが、どの程度の高さが妥当であるかは不明です。個人的にはサンプルで示している高さでも特に問題ないと思ってます。言い換えると、繰り返し表示することでブラウザ下の部分が「はみだす」とか「帳尻が合わない」ということにはならないようです。

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

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


コメント

ありがとうございます！　早速エントリーありがたく思います。また、先日にもお願いしておりました「Photoshop CS2」での影画像作成方法なども引き続きエントリーお願いします。　なかなか幅を変更した時また、影画像を修正したい時などに影画像が必要になってきますので。　検索などで調べてもこのような影画像の作成方法のいいネタがないので。（写真に影をつけるなどの解説などあるのですが・・・・）
お手数ですが宜しくお願いします。

[1] Posted by panser : November 29, 2006 3:10 AM

早速固定レイアウト用のみカスタマイズしてみました。　するとbottomラインが表示されません。
どうしてでしょうか？　CSSでどこか影響してるようですね　ちなみにこんな感じです。また、ちなみにこのようなテンプレートでは、bottomラインについては、影をつけないと両サイドだけではおかしくないでしょうか？（小粋空間のBlogでは、下部は表示されてないようですからいいとは思うのですが）　また、コンテナの両サイドなんかも影表示する方法などもエントリーに加えて頂ければ幸いです。　では宜しくお願いします。　今回のエントリーありがとうございました。大変参考になりわかりやすいです。

URL:テスト用

[2] Posted by panser : November 29, 2006 4:08 AM

＞panserさん
こんにちは。
ご質問の件ですが、bottom ラインは、２．２．２項のCSSの修正にて削除しておりますので、必要であれば適宜復活させてください。
「おかしい・おかしくない」という点につきましては、個人的な感覚の問題と思いますが、上下のドロップシャドウについては機会があればエントリーしたいと思います。
可能であれば、本カスタマイズを単純に適用するだけでなく、いろいろ応用してご自身の素敵なデザインを是非作ってみてください。
それではよろしくお願い致します。

[3] Posted by yujiro : November 29, 2006 10:33 AM

わかりました！　まだまだ知識不足とMTの難しさとWEB系の経験などもまったくないのもあり試行錯誤している状態です。　しかし、お蔭様でこちらのBlogでMTを運用できている状態なので大変感謝しております。　今後はプラスアルファ自分自身の力もつけていきたいと思いますのでこれに懲りず宜しくお願いします。　ではではアドバイスありがとうございました！

[4] Posted by panser : November 29, 2006 11:27 AM

yujiroさん、おはようございます。
　すいません、サイドバーの両端に影をつける場合はどうすれば良いのでしょうか？

[5] Posted by キラタマ : November 30, 2006 6:34 AM

＞キラタマさん
こんにちは。
ご質問の件につきまして、とりあえず「CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方」の一番最後に記しております。
説明不足かもしれませんがとり急ぎご連絡まで。

[6] Posted by yujiro : November 30, 2006 9:52 AM

yujiroさん、ありがとうございます。
　自分はフォトショップ持ってないので、お金が出来たらやってみますね（笑）
　返事、遅くなってしまいすいません。

[7] Posted by キラタマ : December 4, 2006 5:11 PM

＞キラタマさん
ご連絡ありがとうございました。
ではでは！

[8] Posted by yujiro : December 4, 2006 11:44 PM

内側にもシャドウつけることはできますでしょうか？
甘えてしまってすみません＞＜；

[9] Posted by きみまろ : December 14, 2006 4:18 AM

なんとか自力でひらめくことができました。
私がおもいついた方法は、こちらで配布されている
back_fixed.gif　という画像を２本線から４本線にしてみました。　内側の２本線はｻｲﾄのキャプチャー画像をとってアナログ的に貼り付けました（笑

[10] Posted by きみまろ : December 14, 2006 5:58 AM

ですが、元からある線が消えません＠＠；
管理人さん、助けてください＞＜；

[11] Posted by きみまろ : December 14, 2006 6:15 AM

テンプレート（私がお借りしたのはtemplate_3_3_shift_jis　です。)

こちらのstyles-site.css　の

/* 3カラム */
.layout-three-column #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;

の下の２行を消したことにより解決しました。

ほんとうにお騒がせしました。　
　コメント欄を汚してしまってすみません。

[12] Posted by きみまろ : December 14, 2006 6:38 AM

＞きみまろさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件、自己解決されたようで良かったです。
ではでは！

[13] Posted by yujiro : December 17, 2006 9:18 PM

Yujiroさん、

IE7での不具合についても質問させて頂いておりますが、ドロップシャドウについても質問させてください。MT3.2固定のドロップシャドウの方法を試しましたが、左右の枠が消えた状態になってしまいます。修正方法をご教授下さい。

宜しくお願いします。

[14] Posted by kunio : January 9, 2007 5:17 PM

＞kunioさん
こんばんは。
ご質問の件ですが、2.1項の設定が行われていないようですので再度ご確認頂けますでしょうか。
それではよろしくお願い致します。

[15] Posted by yujiro : January 9, 2007 11:53 PM

2.1項の設定により解決しました。しかしながら、これは別に質問させて頂いておりますが、IE7で表示するとタイトルより下の本体の影が表示されません。解決策を教えてください。
また、Yujiroさんのサイトのように本体部分の最下部をボックスできちんと締めくくり、COPY RIGHT・・・の部分を作るにはどうすれば良いのでしょうか？

[16] Posted by kunio : January 10, 2007 10:09 AM

＞kunioさん
こんばんは。
てこずりましたが分かりました。
テンプレートの下記の部分が誤っています。

誤

</div><!-- /links-right -->
<!-- /links-right-box -->

正

</div><!-- /links-right -->
</div><!-- /links-right-box -->

テンプレート後方の div の位置を確認して上記のように修正してください。フッタも正常に表示されるようになると思います。
それではよろしくお願い致します。

[17] Posted by yujiro : January 11, 2007 11:44 PM

Yujiroさん、

ありがとうございます。
無事フッターが表示されるようになりました。
ただ、最下部の枠線が表示されないのはmarginなどの数値の設定でしょうか？いくつか自分なりに試してみたいと思います。

[18] Posted by kunio : January 12, 2007 9:22 AM

＞kunioさん
こんばんは。
ご連絡ありがとうございました。
フッタについては「公開テンプレートにフッタを追加する」が参考になれば幸いです。
それではよろしくお願い致します。

[19] Posted by yujiro : January 12, 2007 9:27 PM

Yujiroさん、

フッタのアドバイスありがとうございました。
追加方法を参考にさせて頂き、無事フッタは表示されたのですが、一番下のborderが上手く表示されません。border-bottomを指定して線を表示させるところまではできるのですが、横の長さが影の部分にまで掛かってしまいます。色々自分なりにいじってみたのですが、影に掛からずにborderの幅を調整するには、どこをどう調整すれば良いのでしょうか？

[20] Posted by kunio : January 15, 2007 1:20 PM

＞kunioさん
こんばんは。
ご返事遅くなってすいません。
拝見させて頂きましたが Firefox ではきれいに表示されているようです。IE はタイトルバナー含め若干左にずれているようですがこのことでしょうか？

[21] Posted by yujiro : January 18, 2007 1:13 AM

Yujiroさん、おはようございます。

１つは、タイトルバナーとフッターが若干左にずれていることで、これは確かにIE7では問題ないのですが、IE6だとズレてしまいます。
もう１つは、サイト最下部の線（フッターよりも下の画面下スレスレの線）が表示されないので、画面よりも下にずっと続いているように見えてしまいます。
これら２つの解決策をお教え下さい。お願いします。

[22] Posted by kunio : January 18, 2007 6:05 AM

＞kunioさん
こんにちは。
ご質問の件ですが、1番目の問題は中央カラムの情報（画像？）が影響しているようです（中央カラムの情報をすべて空にしたところズレはなくなりました）。
2番目の問題については下記の赤色部分を 0 に修正してください。つまり inner を表示する際のパディングが存在するために下のボーダーが画面下に表示されていません。

.layout-three-column #inner {
    _height:100%;
    padding: 0 10px 15px 10px;
    background: url("back_fixed.gif")  repeat-y top center;
}

表示の問題が発生した場合は、CSSでどの部分がどのように対応しているかをお調べ頂ければ幸いです。
それではよろしくお願い致します。

[23] Posted by yujiro : January 18, 2007 2:13 PM

Yujiroさん、

いつも適切なアドバイスありがとうございます。
無事表示できるようになりました。

[24] Posted by kunio : January 19, 2007 10:11 AM

＞kunioさん
こんばんは。
ご連絡ありがとうございました。
こちらも無事に直ったようでよかったです。
ではでは！

[25] Posted by yujiro : January 20, 2007 3:25 AM

あのメインページにドロップシャドウがつくのですが、エントリーアーカイブページにドロップシャドウがつきません。　エントリーアーカイブページでもメインページが読み込んでいるＣＳＳを読み込んでいます。

どうすればエントリーアーカイブページにドロップシャドウを適用できるでしょうか？

どうぞよろしくお願い致します。

[26] Posted by とろ : February 24, 2007 1:22 AM

＞とろさん
こんばんは。
ご質問の件ですが、エントリーアーカイブページ用のテンプレート編集画面で、２．１項の修正を行い、再構築を実施すれば反映されると思います。
うまくいかないようでしたらご利用のサイトのURLをお知らせください。
それではよろしくお願い致します。

[27] Posted by yujiro : February 24, 2007 7:15 PM

Yujiroさん、こんばんは。
ブログサイトの開設を目指しておりますが、テンプレートを使用させていただき、
ありがとうございます。

いまは、タイトルより下の本体の影が表示されず、悪戦苦闘しております。
URLを明記しましたので、ご助言を頂けないでしょうか。よろしくお願いいたします。

[28] Posted by 雲水 : May 7, 2007 10:41 PM

＞雲水さん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、スタイルシートの画像表示部分

background: url("back_fixed.gif") repeat-y top center;

を

background: url("<$MTBlogURL$>back_fixed.gif") repeat-y top center;

に変更して保存・再構築し、再度ブラウザで表示してみて頂けますでしょうか。
それではよろしくお願い致します。

[29] Posted by yujiro : May 7, 2007 10:54 PM

Yujiroさん、さっそくのご教授ありがとうございます。

さっそく試したのですが、どうもうまく表示されないようです。
何かほかに解決策はないでしょうか。
お手数をおかけしますが、よろしくお願いいたします。

[30] Posted by 雲水 : May 7, 2007 11:24 PM

＞雲水さん
こんばんは。
回答誤りでした。すいません。
メインページテンプレートに設定された

<div id="inner">?</div>

を他のテンプレート（カテゴリー/日付/エントリー等）に追加してください。
それではよろしくお願い致します。

[31] Posted by yujiro : May 7, 2007 11:38 PM

Yujiroさん、すばやいレスをありがとうございます。

教えていただいたとおり、ほかのテンプレートにも
追加しましたが、メインページと同じで、タイトルより
下の本体の影が表示されませんでした。

すみませんが、もう少しお手伝いいただけますか。

[32] Posted by 雲水 : May 7, 2007 11:53 PM

Yujiroさん、連続の投稿で申し訳ありません。

自宅でIE7.0を使用した場合、タイトルより
下の本体の影が表示されないのですが、
IE6.0を使用した別のパソコンから閲覧したら
影が表示されているようです。

[33] Posted by 雲水 : May 8, 2007 8:27 AM

＞雲水さん
こんにちは。
IE7で確認しておりませんでした。状況把握不足ですいません。

スタイルシートの

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

この対処の詳細は「IE7 の CSS ハック」が参考になれば幸いです。
それではよろしくお願い致します。

[34] Posted by yujiro : May 8, 2007 4:33 PM

Yujiroさん、無事に表示することができました。
本当にありがとうございました。

「ＩＥ7.0」でサイトの検索ばかりしていたので、
「IE7 の CSS ハック」が引っかからなかった
ようです。

ブログ作成に取り掛かり始めたばかりの私では
ありますが、これからもよろしくお願いいたします。

[35] Posted by 雲水 : May 8, 2007 8:00 PM

＞雲水さん
こんばんは。
無事に直ったようでよかったです。
本文も修正しておきました。
こちらこそよろしくお願い致します。

[36] Posted by yujiro : May 9, 2007 1:06 AM
コメントする

*必須



お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!