デフォルトテーマのカスタマイズ:ヘッダー画像まわり

<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の値です)

という感じで、結果下のような表示に変更となりました。


味気ない感じですが、シンプルで見やすいものを試行錯誤中です。

master の紹介

サイト作成で、ワードプレスというものを知り、phpやcssの初心者なりに自己流にカスタマイズしていこうと思っています。 ワードプレスの機能やプラグインを使えば結構楽しくサイトが作れます。
カテゴリー: デフォルトテーマをカスタマイズ   タグ: , ,   この投稿のパーマリンク

コメントは受け付けていません。