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でお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート