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にしています。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク