ブログの両脇に影をつける

| コメント(0) | トラックバック(0)
20.9.17.現在のブログの画像「小粋空間」さんの記事「CSSでブログに影をつける(ドロップシャドウ)」を参考に、カスタマイズしてみました。
まず、ドロップシャドウ用の画像は、ブログの幅に合わせて自分で作成しました。ここでも「小粋空間」さんの「ドロップシャドウ画像ファイルの作り方」を多いに参考にさせていただきました。
次にテンプレートの修正ですが、上記の記事によれば、"box"の中に入れ子で"inner"というボックスと、"footer-inner"というボックスを新たに作成するための修正をメインページ、ブログ記事等のテンプレートに対して行う形になっています。
ですが、対象の各テンプレートには該当する部分が見当たらないため、テンプレートモジュールの「ヘッダー」と「フッター」の該当部分のみ修正しました。
最後にスタイルシート(メイン)の修正です。以下の2点を除き、基本的には記事のとおりに修正しました。
  1. 背景色の指定:body.layout-two-column-rightの部分で、背景色の指定を削除とありますが、削除すると(少なくともMacでは)背景が真っ白になるので、そのまま残す。
  2. フッター部分の不具合:フッターの最下部に、Macではフッターの幅より若干長めの(おそらくinnerの幅)高さ1〜2ピクセル程度の(フッターの背景色と同一色の)ラインが、Windowsでは余白が現れるので、.layout-two-column-right #footerの部分の行間の指定を3.7→3.8に変更。
おかげさまで、何とか両脇に影がつき、体裁がよくなったと思います。
これからも修正を加えていきますので、ここで今日現在の状態をスクリーンショットで撮り、掲載しておきます。

トラックバック(0)

トラックバックURL: http://kim.art.coocan.jp/mt/mt-tb.cgi/66

コメントする

このブログ記事について

このページは、kimが2008年9月16日 22:56に書いたブログ記事です。

ひとつ前のブログ記事は「テンプレートのカスタマイズ」です。

次のブログ記事は「さらにデザイン修正」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Counter