画像を表示
ビルボードに画像を表示
- header.jpg(760×200px)を用意する
<p id="image"><img src="<?php bloginfo('template_url'); ?>/img/header.jpg" alt="" width="760" height="200" /></p>
画像の表示を指定
- ヘッダーの罫線を削除する
border-bottom: solid 5px #a3d2f2; /*この記述を削除する*/
#header { margin: 0 0 20px 0; padding: 0 0 10px 0; } #header p#image { margin: 8px 0 0 0; }
ブログ名と説明を左右に並べて表示
- h1と説明文のベースラインが揃うように設定する
#header h1 { font-size: 1.875em; float: left; margin: 0 0 5px 0; } #header p#desc { font-size: 0.75em; color: #444; float: right; margin: 22px 8px 0 0; }
記事のタイトルバーを画像で表示
- 背景画像のパスの記述に注意する
.post h2 { font-size: 0.875em; padding: 10px; background-color: #ddefc0; background-color: #a3d2f2; background-image: url(img/titlebar.png); }