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

WordPress個別サポート

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

インストール直後のTwenty Twelve
インストール直後のTwenty Twelve

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

カスタムヘッダー画像の追加
カスタムヘッダー画像の追加

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

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

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

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

メニューの階層化
メニューの階層化

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

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

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

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

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

WordPressの使い方