トリビア・リンク

トリビア記録記　～移ろいゆく時の流れとともに～

カレンダー

カテゴリ

リンク

人気記事

RSSリンクの表示

プロフィール

クーア

インターネットで氾濫している情報の中で、一つ一つの情報を吟味・厳選してその時の感動を記事にしたいと思います。

カウンター

  • 08月 24 2012

  • レイアウトの外枠に「影」をつける

  • 掲載カテゴリ : ノウハウ集
ブログのレイアウトの外枠の両端に「影」をつける方法です。
若干立体的になる位の効果ですが、ブログのテーマ作成はこういった細かいことの積み重ねですね。

まず、外枠の両端の影の画像を作成します。
横幅：ブログの横幅＋左端の影(pixcel)+右端の影(pixcel)
縦幅：1 pixcel
でPhotoshopなりで加工して作成します。⇒ ランキング

私が作成するブログの横幅は972pixcelで作成予定ですので、984 x 1 pixcelで作成しました。

「作成画像」

<div id="wrapper">
　<div id="container">
（中略）
　</div>
</div>

#wrapper {
background: url(http://blog-imgs-53.fc2.com/t/r/i/trivialink/trivia_sd_bg.png) repeat-y top center;
}

と記述するだけです。
外枠(container)より更に外枠(wrapper = 両端に影を持つ画像の範囲)に縦方向(y方向)に繰り返し画像を表示するという意味の記述となります。

コメント

コメントの投稿

   管理者にだけ表示を許可する