Twenty Eleven 編集(2)子テーマ編集


前回はTwenty Elevenの子テーマを作成しました。ただ、それだけでは元のテーマと何も変わらないので、子テーマのstyle.cssを編集してレイアウトを修正していきたいと思います。

0013

 子テーマを適応させる

子テーマを作成したら、まずテーマを適応させましょう。外観>テーマを辿ると、先ほど作成したテーマが追加されているのが分かります。ちなみに300×225pxのpngファイルを作成し、screenshot.pngという名前で子テーマのフォルダ内にいれておけば、サムネイルが表示されます。

0016

適応した状態でサイトを確認すると、Twenty Elevenと同じレイアウトで表示されています。このとき、もしレイアウトが崩れていたらstyle.cssの記述に間違いがないか確認してみましょう。


style.cssに加筆する

子テーマのstyle.cssに変更したい項目を記述して、レイアウトを修正していきましょう。子テーマのstyle.cssは前回作ったフォルダの中に入っているので、テキストエディタなどで開いて記入していきます。今回は下記の3つを修正したいと思います。

0017

ちなみに「3」はstyle.cssではなくダッシュボードの外観>ヘッダーで修正できます。


1.ヘッダーを一番上にピッタリ配置する

ヘッダーをブラウザの上部にピッタリくっつけるにはページ全体(id=page)のマージンをいじればOKです。

#page {
	margin-top:0px;
}


これでブラウザの上部にピッタリと配置されます。

0018


2.ヘッダー上部にある2pxの線を消す

次にヘッダーの上部にある灰色の線を消したいと思います。ヘッダーはbrandingとaccessというidで分けられ、線があるのはbranding部分です。

#branding {
	border:0px;
}


これで灰色の線が消え、より上部にぴったりとくっつくようになりました。

0019


3.画像上部の要素を消す

個人的には上部のタイトルと検索フィールドは不要だと思っているので、これも非表示にします。これは先ほども説明したとおりダッシュボードの外観>ヘッダーで修正できるので、そちらで修正します。

0020

これで全体がスッキリしたと思います。

0021


今回の修正はここまでです。

Related Posts Plugin for WordPress, Blogger...
投稿日: 作成者: カテゴリー: CSS, Twenty Eleven, WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です