<h2>カスタマイズ:ヘッダー画像まわり</h2>
<strong>デフォルトのテーマTwenty Ten</strog>を自己流にデザインしていく過程を記事にしています。
<h3>ヘッダー画像周りの変更</h3>
<strong>デフォルトのテーマTwenty Ten</strog>では、ヘッダー画像の下にページを表示する所が設けられています。
構成としては、
「header」内に「site-title」「site-description」「img」「access」とあり
「img」は、上記画像の部分で
「access」は、ページを作成すると反映する場所になります。
※上記ヘッダー画像を変更しているため、それに合わせて色合いを変更してみました。
今度は<strong>スタイルシート(css)を変更</strong>
style.css中の
/* This is the custom header image */
#branding img {
border-top: 4px solid #000;
border-bottom: 1px solid #000;
clear: both;
display: block;
}
を
clear: both;
display: block;
へ変更(画像の上下にラインが入っており、そのボーダーを削除
/* =Menu— */
#access {
background: #111;
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
の部分の
バックグラウンドカラーを#111へ変更
#access a {
color: #aaa;
display: block;
line-height: 24px;
padding: 0 10px;
text-decoration: none;
line-height:を 24px;へ変更(line-height:は、文字を含む上下のpxの値です)
という感じで、結果下のような表示に変更となりました。
味気ない感じですが、シンプルで見やすいものを試行錯誤中です。