スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リキッドレイアウトのヘッダ画像

yellow_3column, pink_3column, grey_3column, blue_3column, yellow_2column, pink_2column, grey_2column, blue_2columnといった公式のリキッドテンプレートは、もともとヘッダに画像が入っていないので、画像を入れる際の「難しさ」を意識しにくいように感じます。
 けれどこの場合も、以前にsugarさんが画像のあるテンプレートをリキッドにカスタマイズする際の事として指摘なさったのと同様に、「トップ画像の幅との整合性を考え」る必要があります。
固定幅の画像をそのまま入れると
 800幅の画像をそのまま入れたら、たとえば閲覧窓幅が1000pxのときには変なことになってしまいます。

画像を繰り返す
 「繰り返すことを前提」に画像を作成して、
「#header{(略)background:url(http://blog-imgs-36.fc2.com/m/a/n/manan2/chibi.gif) #6ea7ea left repeat-x;(略)」
と横に繰り返す設定(repeat-x)を入れることもできます。

画像を片側寄せにする
 画像の幅は[1]と同じく800pxでも、画像を片側寄せにすることを意識して作成し(この画像だと右側のラインをぼかしてあります)、
「#header{(略)background:url(http://blog-imgs-36.fc2.com/m/a/n/manan2/800-2.gif) #6ea7ea left no-repeat;(略)」
と繰り返さない設定(no-repeat)を入れれば、それほどオカシくはなくなります。

画像の片側寄せを2枚重ねて、両隅に表示する
 これはヘッダ部分の両端に画像をいれるタイプ。スタイルシートだけではなく、HTMLにも変更を加え、ヘッダ部分に、header0とheaderを重ねあわせて表示させています。
「<div id="header0">
<div id="header">
<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
</div><!-- /header -->
</div><!-- /header0 -->」
 スタイルシートで、header0は左端、header右端に、背景画像を表示させます。
「div#header0 {
width: 100%;
background:url(http://blog-imgs-36.fc2.com/m/a/n/manan2/left.gif) left no-repeat #6ea7ea ;
margin-bottom: 20px;
}
div#header {
width: 100%;
padding-bottom:40px;
padding-top: 40px;
background:url(http://blog-imgs-36.fc2.com/m/a/n/manan2/right.gif) right no-repeat;
height:120px;
}」
→見本
このテンプレートのCSSは、ご自由にお使いください。(画像を全部変えれば再配布も可。ただし、公式yellow_2columnと大きな差はないです)
スポンサーサイト

コメントの投稿

Secret

■Page Selector

TOTAL Pages
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
■追加プラグイン
■ブログ管理MENU(新)
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。