CSSでブログに影をつける(ドロップシャドウ)
ブログのサイドバー部分に影(ドロップシャドウ)を作成するカスタマイズを紹介します。
ブログを閲覧されている方なら、1度はこのドロップシャドウデザインのサイトをご覧になったことがあると思います。当サイトでも以前よりこのデザインを用いてますが、最初はどのようにしたら影をつけられのかがさっぱり分からず(そのテクニックが紹介されている記事もなく)、適用されているサイトのソースやCSSを眺めて勉強した想い出があります。
最近、いくつかのブログで紹介され始めたようで、このサイトでも取り上げたいと思います。
このエントリーでは固定レイアウトでのドロップシャドウとリキッドレイアウトのドロップシャドウについて説明します。サンプルには当サイトのテンプレートを使用しますが、仕組みがお分かりになればどのテンプレートでも適用可能です。なお、ドロップシャドウ画像自体の作成方法についても別途エントリーしたいと思います。
2008.09.11 追記
Movable Type 4.x 配布テンプレートご利用の方は「CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)」をご覧ください。
1.ドロップシャドウの仕組み
1.1 固定レイアウト
固定レイアウトの場合、ブログ全体のカラム幅に合わせて影をつけた横長の画像を、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項)をご覧ください。
下記にサンプルを用意しています。前述の不具合についてもサンプルをご覧頂ければお分かりになると思います。
1.2 リキッドレイアウト
基本は固定レイアウトと同じですが、左寄せの背景画像と右寄せの背景画像を2つ作って表示させることで実現します。背景画像は異なる要素に与えます。例えば、html 要素と body 要素、あるいは body 要素の次に与えた 2つの div 要素等です。*3
下記にHTMLマークアップのイメージを記します。
<body>
<div> ← 背景画像(左用)を指定
<div> ← 背景画像(右用)を指定
:
[ブログ本体のマークアップ]
:
</div>
</div>
</body>
こちらもサンプルを用意していますのでご覧ください。
2.公開テンプレートによるカスタマイズ
2.1 共通事項 - テンプレートの修正
固定レイアウト・リキッドレイアウトともに、テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。
<body class="layout-three-column">
<div id="box">
<div id="inner">
:
(中略)
:
</div>
</div>
</body>
2.2 固定レイアウトの場合
2.2.1 画像のダウンロード
下記のリンクを右クリックして[対象をファイルに保存]を選択します。
この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に合わせています。
2.2.2 スタイルシート修正
スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。
/* 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 の場合にスクロールでバナー部分が白くなってしまう事象を回避するためです。
2.3 リキッドレイアウトの場合
2.3.1 画像のダウンロード
下記のリンクを右クリックして[対象をファイルに保存]を選択します。
2.3.2 スタイルシート修正
スタイルシートにある、下記の部分の赤色を削除し、青色を追加してください。(略)と書いてある部分は、表示を省略しているだけで、「その部分を全て削除する」という意味ではありません。
/* タイトルバナー */
#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として適正な文書構造ではありません(本来はブログ全体を括る要素に与えるのが妥当)が、クロスブラウザ対応のためのテクニックとして記しています。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か?
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ ブログの両脇に影をつける from Kim's Blog-2
「小粋空間」さんの記事「CSSでブログに影をつける(ドロップシャドウ)」を参考に... [続きを読む]
ありがとうございます! 早速エントリーありがたく思います。また、先日にもお願いしておりました「Photoshop CS2」での影画像作成方法なども引き続きエントリーお願いします。 なかなか幅を変更した時また、影画像を修正したい時などに影画像が必要になってきますので。 検索などで調べてもこのような影画像の作成方法のいいネタがないので。(写真に影をつけるなどの解説などあるのですが・・・・)
お手数ですが宜しくお願いします。
早速固定レイアウト用のみカスタマイズしてみました。 するとbottomラインが表示されません。
どうしてでしょうか? CSSでどこか影響してるようですね ちなみにこんな感じです。また、ちなみにこのようなテンプレートでは、bottomラインについては、影をつけないと両サイドだけではおかしくないでしょうか?(小粋空間のBlogでは、下部は表示されてないようですからいいとは思うのですが) また、コンテナの両サイドなんかも影表示する方法などもエントリーに加えて頂ければ幸いです。 では宜しくお願いします。 今回のエントリーありがとうございました。大変参考になりわかりやすいです。
URL:テスト用
>panserさん
こんにちは。
ご質問の件ですが、bottom ラインは、2.2.2項のCSSの修正にて削除しておりますので、必要であれば適宜復活させてください。
「おかしい・おかしくない」という点につきましては、個人的な感覚の問題と思いますが、上下のドロップシャドウについては機会があればエントリーしたいと思います。
可能であれば、本カスタマイズを単純に適用するだけでなく、いろいろ応用してご自身の素敵なデザインを是非作ってみてください。
それではよろしくお願い致します。
わかりました! まだまだ知識不足とMTの難しさとWEB系の経験などもまったくないのもあり試行錯誤している状態です。 しかし、お蔭様でこちらのBlogでMTを運用できている状態なので大変感謝しております。 今後はプラスアルファ自分自身の力もつけていきたいと思いますのでこれに懲りず宜しくお願いします。 ではではアドバイスありがとうございました!
yujiroさん、おはようございます。
すいません、サイドバーの両端に影をつける場合はどうすれば良いのでしょうか?
>キラタマさん
こんにちは。
ご質問の件につきまして、とりあえず「CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方」の一番最後に記しております。
説明不足かもしれませんがとり急ぎご連絡まで。
yujiroさん、ありがとうございます。
自分はフォトショップ持ってないので、お金が出来たらやってみますね(笑)
返事、遅くなってしまいすいません。
>キラタマさん
ご連絡ありがとうございました。
ではでは!
内側にもシャドウつけることはできますでしょうか?
甘えてしまってすみません><;
なんとか自力でひらめくことができました。
私がおもいついた方法は、こちらで配布されている
back_fixed.gif という画像を2本線から4本線にしてみました。 内側の2本線はサイトのキャプチャー画像をとってアナログ的に貼り付けました(笑
ですが、元からある線が消えません@@;
管理人さん、助けてください><;
テンプレート(私がお借りしたのは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;
の下の2行を消したことにより解決しました。
ほんとうにお騒がせしました。
コメント欄を汚してしまってすみません。
>きみまろさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件、自己解決されたようで良かったです。
ではでは!
Yujiroさん、
IE7での不具合についても質問させて頂いておりますが、ドロップシャドウについても質問させてください。MT3.2固定のドロップシャドウの方法を試しましたが、左右の枠が消えた状態になってしまいます。修正方法をご教授下さい。
宜しくお願いします。
>kunioさん
こんばんは。
ご質問の件ですが、2.1項の設定が行われていないようですので再度ご確認頂けますでしょうか。
それではよろしくお願い致します。
2.1項の設定により解決しました。しかしながら、これは別に質問させて頂いておりますが、IE7で表示するとタイトルより下の本体の影が表示されません。解決策を教えてください。
また、Yujiroさんのサイトのように本体部分の最下部をボックスできちんと締めくくり、COPY RIGHT・・・の部分を作るにはどうすれば良いのでしょうか?
>kunioさん
こんばんは。
てこずりましたが分かりました。
テンプレートの下記の部分が誤っています。
誤
</div><!-- /links-right -->
<!-- /links-right-box -->
正
</div><!-- /links-right -->
</div><!-- /links-right-box -->
テンプレート後方の div の位置を確認して上記のように修正してください。フッタも正常に表示されるようになると思います。
それではよろしくお願い致します。
Yujiroさん、
ありがとうございます。
無事フッターが表示されるようになりました。
ただ、最下部の枠線が表示されないのはmarginなどの数値の設定でしょうか?いくつか自分なりに試してみたいと思います。
>kunioさん
こんばんは。
ご連絡ありがとうございました。
フッタについては「公開テンプレートにフッタを追加する」が参考になれば幸いです。
それではよろしくお願い致します。
Yujiroさん、
フッタのアドバイスありがとうございました。
追加方法を参考にさせて頂き、無事フッタは表示されたのですが、一番下のborderが上手く表示されません。border-bottomを指定して線を表示させるところまではできるのですが、横の長さが影の部分にまで掛かってしまいます。色々自分なりにいじってみたのですが、影に掛からずにborderの幅を調整するには、どこをどう調整すれば良いのでしょうか?
>kunioさん
こんばんは。
ご返事遅くなってすいません。
拝見させて頂きましたが Firefox ではきれいに表示されているようです。IE はタイトルバナー含め若干左にずれているようですがこのことでしょうか?
Yujiroさん、おはようございます。
1つは、タイトルバナーとフッターが若干左にずれていることで、これは確かにIE7では問題ないのですが、IE6だとズレてしまいます。
もう1つは、サイト最下部の線(フッターよりも下の画面下スレスレの線)が表示されないので、画面よりも下にずっと続いているように見えてしまいます。
これら2つの解決策をお教え下さい。お願いします。
>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でどの部分がどのように対応しているかをお調べ頂ければ幸いです。
それではよろしくお願い致します。
>kunioさん
こんばんは。
ご連絡ありがとうございました。
こちらも無事に直ったようでよかったです。
ではでは!
あのメインページにドロップシャドウがつくのですが、エントリーアーカイブページにドロップシャドウがつきません。 エントリーアーカイブページでもメインページが読み込んでいるCSSを読み込んでいます。
どうすればエントリーアーカイブページにドロップシャドウを適用できるでしょうか?
どうぞよろしくお願い致します。
>とろさん
こんばんは。
ご質問の件ですが、エントリーアーカイブページ用のテンプレート編集画面で、2.1項の修正を行い、再構築を実施すれば反映されると思います。
うまくいかないようでしたらご利用のサイトのURLをお知らせください。
それではよろしくお願い致します。
Yujiroさん、こんばんは。
ブログサイトの開設を目指しておりますが、テンプレートを使用させていただき、
ありがとうございます。
いまは、タイトルより下の本体の影が表示されず、悪戦苦闘しております。
URLを明記しましたので、ご助言を頂けないでしょうか。よろしくお願いいたします。
>雲水さん
こんばんは。
テンプレートご利用ありがとうございます。
ご質問の件ですが、スタイルシートの画像表示部分
background: url("back_fixed.gif") repeat-y top center;
を
background: url("<$MTBlogURL$>back_fixed.gif") repeat-y top center;
に変更して保存・再構築し、再度ブラウザで表示してみて頂けますでしょうか。
それではよろしくお願い致します。
Yujiroさん、さっそくのご教授ありがとうございます。
さっそく試したのですが、どうもうまく表示されないようです。
何かほかに解決策はないでしょうか。
お手数をおかけしますが、よろしくお願いいたします。
>雲水さん
こんばんは。
回答誤りでした。すいません。
メインページテンプレートに設定された
<div id="inner">?</div>
を他のテンプレート(カテゴリー/日付/エントリー等)に追加してください。
それではよろしくお願い致します。
Yujiroさん、すばやいレスをありがとうございます。
教えていただいたとおり、ほかのテンプレートにも
追加しましたが、メインページと同じで、タイトルより
下の本体の影が表示されませんでした。
すみませんが、もう少しお手伝いいただけますか。
Yujiroさん、連続の投稿で申し訳ありません。
自宅でIE7.0を使用した場合、タイトルより
下の本体の影が表示されないのですが、
IE6.0を使用した別のパソコンから閲覧したら
影が表示されているようです。
>雲水さん
こんにちは。
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 ハック」が参考になれば幸いです。
それではよろしくお願い致します。
Yujiroさん、無事に表示することができました。
本当にありがとうございました。
「IE7.0」でサイトの検索ばかりしていたので、
「IE7 の CSS ハック」が引っかからなかった
ようです。
ブログ作成に取り掛かり始めたばかりの私では
ありますが、これからもよろしくお願いいたします。
>雲水さん
こんばんは。
無事に直ったようでよかったです。
本文も修正しておきました。
こちらこそよろしくお願い致します。
MT4.1で利用する場合のエントリーもまた宜しくお願いします。
>conanさん
こんにちは。
新しいテンプレートセット用の設定が知りたいということですね。
ご要望承りました。
こんにちは、はじめまして
先日MovableTypeを3.36から4.21にアップグレードし、こちらのテンプレートを使用させて頂いております。
こちらのエントリーを参考にHTMLとCSSを変更したのですが
FireFoxでみるとヘッダー部分より下の左右のドロップシャドウが表示されません。
IE7でみるとうまくいっているのですが…
私のレベルではお手上げなので、修正の方法を教えて頂けないでしょうか。
お忙しい中申し訳ありませんがよろしくお願い致します。
Movable Type 4.2 パーフェクトガイド購入しました。
開いてみてびっくりの濃い内容ですが、とても勉強になりそうです。
>酒屋のふみ店長さん
はじめまして。
テンプレートご利用ありがとうございます。
また、拙著ご購入くださりありがとうございます!
ご質問の件ですが、解説が以前配布していたテンプレートの内容になっています。MT4向けのテンプレートでは下記の変更を行ってみてください。
テンプレート
変更前
<div id="box" class="clearfix">
<div id="inner">
…中略…
</div>
</div>
<p id="footer">Copyright …中略… All Rights Reserved.</p>
変更後
<div id="box">
<div id="inner" class="clearfix">
…中略…
</div>
</div>
<div id="footer">
<div id="inner-f" class="clearfix">
<p>Copyright …中略… All Rights Reserved.</p>
</div>
</div>
スタイルシート
変更前
.layout-three-column #footer {
width: 850px;
}
…中略…
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
変更後
.layout-three-column #footer {
width: 870px;
}
.layout-three-column #inner-f {
_height:100%;
padding: 0 10px;
background: url("http://www.kajiyanet.com/blog/desin-img/back_fixed.gif") repeat-y top center;
}
*:first-child+html .layout-three-column #inner-f {
height:100%;
}
.layout-three-column #inner-f p {
color: #fff;
background: #173c09;
}
…中略…
.clearfix:after {
content: ""; /* ピリオドを削除*/
display: block;
height: 0;
clear: both;
visibility: hidden;
}
回答内容についてはエントリーでも情報展開したいと思います。
それではよろしくお願い致します。
>yujiroさん
早速のお返事ありがとうございました。
先ほど、変更点を実践して修正が完了したことを確認しました。
本当に感謝です。
テンプレートは今後も使用していきたいと考えています。
また何かの機会に質問するかもしれませんが
そのときはよろしくお願い致します。
>酒屋のふみ店長さん
こんばんは。
ご連絡ありがとうございました。
無事に表示されたようで良かったです。
ではでは!
MT4.2でのカスタマイズ方法をご教授お願いします。
MT4.2は、少し修正方法が違うんでしょうね
>conanさん
こんにちは。
公開が遅れてしまいすいません。
もう少々お待ちください。
そろそろお願いしますね
>conanさん
こんにちは。
大変お待たせ致しました。
「CSSでブログに影をつける(ドロップシャドウ:Movable Type 4.x 配布テンプレート版)」でエントリー致しました。