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

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズ・トラブル対応でお急ぎのときは
「カスタマイズがうまくいかない」「突然トラブルが発生した!」などでお急ぎのときはWordPressメールサポートで対応します。ご活用ください。
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク