WordPressテーマTwenty Elevenのヘッダーレイアウトの変更方法

Twenty Eleven のヘッダーのカスタマイズ方法について、以下のことをまとめておきたいと思います。

  • グローバルメニューを一番上に持って行きたい
  • 検索窓を消したい
  • タイトル・画像・グローバルメニューのレイアウトを自由に入れ替えたい

header.phpの構成をなんとなくつかんでおく

グローバルメニューを一番上に持って来たり、タイトルと画像の間にメニューを挟んだり、とにかくヘッダー部分のパーツのレイアウト表示を入れ替えるためには、php の構成をつかんで、それぞれ該当箇所を入れ替えれば OK みたいです。
というわけで、header.php の構成を見てみましょう。
確認方法は Firefox の Firebug なんかを使って、CSS の id、もしくは class を確認し、それが指定している箇所をheader.php から見つけ出す、という単純作業です。
ヘッダーパーツの id の指定は、CSS についてまとめたこちらの記事でも紹介しておりますが、改めてここでも紹介しておきます。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ


Twenty Elevenヘッダーのidセレクタ
【 header.php 】を開いて、これらのidに該当するの範囲を確認します。必要なのは 70 行目辺りの<body>タグ以降です。

なるべく分かりやすくなるように、●とか★とか記号を割り振っておいたので、共通する記号に挟まれた部分をカットして好きな場所に貼付ければ、表示位置が変わるというわけです。
ちなみに、検索窓の位置変更は CSS をいじった方が思い通りにいきましたので、ヘッダー部分から検索窓を消したい! 検索フォームなんてじゃまだ! という場合に、【 header.php 】内の該当箇所を削除すればOKだと思います。
というわけで、あとは該当箇所を入れ替えればいいだけなんですよね。
では実際にいくつか試してみましょう。

グローバルメニューを一番上に持ってくる

まずはグローバルメニューを一番上に表示させる方法です。ブログタイトル部分の上に表示させるわけですね。
グローバルメニューは▲で囲んである部分

こちらを【 <header id=”branding” role=”banner”> 】のすぐ下に移動させればOKです。つまり【 <hgroup> 】の直前ですね。
すると、こんな感じでグローバルメニューが一番上に表示されます。
Twenty Elevenのグローバルナビを上に

ブログ上部の余白を消す

グローバルメニューとブラウザの間、というかブログそのものとブラウザとの間にある余白を消して、グローバルメニューを画面上部に引っ付けたい場合、これは CSS の方を書き換える必要があります。
【 #page 】の【 margin 】の top を 0 にすれば OK です。

これでブログ上部の余白が無くなります。

検索窓を削除してグローバルメニューは真ん中に

次は検索窓を削除します。
これはもう●で囲んでおいた箇所を削除すればいいだけなので楽勝です。

検索フォームを表示させているのは

という部分のようなので、これを削除するだけでも大丈夫そうです。
また、

から始まっている部分は、ヘッダーを消した際の検索窓がグローバルメニュー内に移動した時の表示を指定しているようです。CSS 側で【 .only-search 】を探すとスタイルの変更が可能です。
Twenty Elevenのグローバルナビを中央に

グローバルメニューの下の余白を消す

グローバルメニューをタイトルスペースとヘッダー画像の間に持って来たら、グローバルメニューとヘッダー画像との間に微妙な余白ができてしまいました。
これは CSS ではグローバルメニューの下マージン(margin-bottom)に余白が指定されているからのようです。ですので該当箇所のマージンの値を0にすると、グローバルメニューと画像が引っ付いて、余白がなくなります。

最後はヘッダー画像を一番上、次にブログタイトル、一番下にグローバルメニューの順番で配置してみます

これも単純で★でかこっている部分【 <hgroup> 】をヘッダー画像(♦)とグローバルメニュー(▲)の間に移動させるだけです。
Twenty Elevenのサイトタイトルを中央に
検索窓は動きませんでしたが、こっちは CSS で好きな位置に表示させれば OK だと思います。

WordPressテーマTwenty Elevenのヘッダーに関するCSSのまとめ


あとは、【 #site-title 】と【 #site-description 】を入れ替えてみると、ブログタイトルとブログの説明部分が入れ替わります。CSS で微妙なレイアウトのずれを調節すれば、だいたいのことは実現できるのではないかと思います。
以上、Twenty Eleven のヘッダーレイアウト変更についてでした。

  • このエントリーをはてなブックマークに追加

コメント

  1. 匿名 より:

    グローバルメニューは真ん中に

コメントをどうぞ

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