テンプレートの外枠に影をつける

• Nov182006
• Vote:
  http://bizcaz.com/archives/2006/11/18-143456.php
• Categories: Customize
• Tags: Customize, Dropshadow
• Social Bookmark

• Prev Page: カウンタによって表示を変える
• Next Page: tagwireプラグインのタグを一括置換する

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 57

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow.gif&width=240&height=180&title=&noscript=0) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 57

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow.gif&width=240&height=180&title=&noscript=0' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 57

またまた、訪問者さんからご相談がありまして、テンプレートの外枠に影をつけたい…とのことで、とりあえず、MovableType MEMOで配布しているテンプレートをベースにサンプルを作ってみました。

その訪問者さん、小粋空間さんのテンプレートを使われていたので、チョビッと小粋空間チックなイメージになってます。
小粋空間さん、ごめんなさい。

まずは上記サムネイルをクリックして、サンプル・ページをご覧ください。
このサンプルは、こちらのベーシック・テンプレートをベースに、CSSだけでカスタマイズしたものです。

テンプレートの外枠に影を付ける

まず、サンプルのテンプレートでは以下のような構造になっています。

そしてサイズ的には、ベースにしたテンプレートでは全体の横幅が900px、両サイドの横幅が200pxになっています。
サイドの横幅200pxから、10px分を外枠の影としてイメージを作成します。

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 114

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow2.gif&width=240&height=53&title=&noscript=1) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 114

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow2.gif&width=240&height=53&title=&noscript=1' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 114

上記サイズを元に作ったイメージが右のイメージになります。 このイメージを、先ほどのテンプレート構造でいうところの、<div id="container">タグの背景に設定します。 具体的には以下のようにスタイルを設定します。

body.layout-three-column #container {
background: #fff url(body-bg.gif) repeat-y top left;
}



Warning:  include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 123



Warning:  include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow3.gif&width=240&height=180&title=&noscript=1) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 123



Warning:  include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/dropshadow3.gif&width=240&height=180&title=&noscript=1' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/11/18-143456.php on line 123

そうすると、左イメージのように上から下までの背景が先ほどのイメージで塗りつぶされます。

ここまでできれば、もうほとんど完成でサイドバーの位置などを微調整します。

サンプルを微調整したCSSを以下に記します。
body.layout-three-column #container {
/* 全体の背景をイメージで塗りつぶします */
background: #fff url(sample/body-bg.gif) repeat-y top left;
}
body.layout-three-column #blog {
/* ボーダーを非表示にします */
border: none;
}
body.layout-three-column #side-leftbox {
/* 影の横幅＋内側の窪みを考慮して、左サイドバーの位置を調整します
176px = 200px - 15px + 9px */
padding-left: 15px;
padding-right: 9px;
width: 176px;
}
body.layout-three-column #side-rightbox {
/* 影の横幅＋内側の窪みを考慮して、左サイドバーの位置を調整します
176px = 200px - 15px + 9px */
padding-left: 9px;
padding-right: 15px;
width: 176px;
}
#header {
margin: 0;
padding: 0;
background:none;
border: none;
}
#header .inner {
padding: 0;
background: none;
border: none;
}
#footer {
/* フッターの幅を影の内側に調整します
880px = 900px - 影の横幅10px × 2
さらに、調整したサイズでセンタリングします */
margin: 0 auto;
width: 880px;
}
#navibar {
/* ナビバーの幅を影の内側に調整します
880px = 900px - 影の横幅10px × 2
さらに、調整したサイズでセンタリングします */
margin: 0 auto;
width: 880px;
}
.module-header,
.module {
margin: 0;
padding: 0;
}
.module {
padding-bottom: 2em;
}

あとは、ヘッダ部にかかった内側のくぼみを消します。

サンプルでは以下のようにして、単純に白で塗りつぶしていますが、上書きでイメージを貼り付けるなどすれば見栄えよくなると思います。



#header {
/* 左右の影10px＋内側の窪み分をマージンとして設定します(ちょと多めに)
     そして、背景色を白にして上書きします */
    margin: 0 20px;
    padding: 0;
    background-color: #fff;
    border: none;
}



以上で、小粋空間チックなテンプレートにすることができました。

ざっくりな説明ですがなんとなく分かっていただけたでしょうか!?
サンプルでは影というより縁取りっぽいけど、イメージの作り方しだいで、かわいいイメージにもできるし、カッコいいイメージにもできると思います。
そそ、MovableType MEMOのペーシック・テンプレート／3カラム・固定幅をお使いの人なら、上記CSSの追加／変更とイメージファイルを持ち帰っていただければ、そのまま使えます。
では、この辺で…SEE YOU♪

Related Entries
10/01/09エントリとコメント欄に個別の絵文字を使い分ける
09/01/15ブログ記事別コメントフィード作成
08/12/04過去の記事を今どきの MT 向けに書換え
08/10/24コメント投稿時のサインイン後、フォームを表示
08/08/18訪問者さんのプロフィール編集を可能にする
08/08/17コメント欄にアバター表示
08/06/15TypePad AntiSpam を使ってみる
08/05/27ゼロパディングでリスト表示
08/05/24月別アーカイブリストの表示
08/05/02Movable Type のログイン画面をカスタマイズ


Edit
Permalink
4 Comments
No TrackBacks