Twenty Twelveのヘッダー画像とメインメニュー

WordPress3.5でデフォルトのテーマになったTwenty Twelve。初期状態では、次のようにスッキリしすぎて殺風景に感じる方がいるかもしれません。

初期状況ではカスタムヘッダー画像が入っていなかったりするだけで、カスタムヘッダー画像は、「外観」-「ヘッダー」メニューから画像ファイルをアップロードすれば、表示させることができます。

また、style.cssの.main-navigationの記述をカスタマイズすれば、次のようにヘッダー画像＋色付のメインメニューのように直すことができます。ドロップダウンメニューのデザインも設定できます。

※「@media screen and (min-width: 600px)」以下にある記述を修正すれば、幅が600px以上の画面で適用されます。
※古いIEに適用するにはcssディレクトリのie.cssを修正します。

メニューのサブ項目をドロップダウンメニューにするには、「外観」-「メニュー」メニューで作成するカスタムメニューで、階層を付けておきます。

この例では、「執筆実績」の下に「翻訳実績」がドロップダウン形式で表示されるようになります。

デフォルトでは、メインメニューの下にヘッダー画像が表示されるようになっていますが、header.phpでレイアウトを修正すれば、このようにヘッダー画像の下にメインメニューという構成にできます。

ヘッダー画像の高さのデフォルトは250pxですが、inc\custom-header.phpに定義された「'height' => 250,」を任意の値に変更すれば、ヘッダー画像のサイズを変更することができます。

画像のサイズは、画面サイズに合わせて自動で縮小、拡大されます。

ちなみに、この「西沢直木のWebサイト」では、高さを150pxにしています。