TwentyTwelveのヘッダー画像設定と位置変更

今回はTwentyTwelveにヘッダー画像を設定する方法とヘッダー画像の位置を変更するカスタマイズを紹介します。TwentyTwelveではヘッダーに画像を設定できるようになっています。普通に画像を設定してみるとこのように表示されす。

ヘッダー画像-1

一番から順番に「ブログのタイトル」「メニューナビ」「ヘッダー画像」の順で並んでますよね。この3つの順番を入れ替える方法までを紹介します。

スポンサーリンク

ヘッダー画像設定の前に

ヘッダー画像を設定する前に設定する画像を用意する必要があります。これは自分で作成してもいいですし、フリー素材を検索して見つけてもいいと思います。

画像の用意ができたらWordPressの管理画面の「メディア」から新規追加しておいて下さい。できれば大きめの画像を用意し、ペイント等を使って横幅のサイズを960pxにしておくとスムーズに設定できると思います。

ヘッダー画像の設定の仕方

まずは実際にヘッダー画像を設定してみましょう。WordPressの管理画面から「外観」⇒「ヘッダー」と進んで下さい。

ヘッダー画像-2

ここで画像をまだアップしてない場合は「ファイルを選択」でアップロード、既にアップロードしている場合は「画像の選択」をクリックします。

ヘッダー画像-3

すると切り抜く範囲を指定する画面になります。横幅を960pxにして画像をアップした場合は高さだけを指定し、「切り取って公開する」か「トリミングせずにこのまま画像を公開する」を選択します。

ヘッダー画像-4

プレビューの画面に画像が表示されていると思います。

ヘッダー画像-5

後はこの画面の一番下の「変更を保存」をクリックすると反映されますが、「変更を保存」の上にこのような設定項目があります。

ヘッダー画像-6

「ヘッダー画像上にテキストを表示する」のチェックを外すとヘッダー画像の上にあるブログタイトルが非表示になります。タイトルを表示したい場合はチェックは外さずにそのまま「変更を保存」をクリックして下さい。さて、記事の冒頭の画像のようにヘッダー画像が設定できたと思います。

設定した画像を削除する場合はこのヘッダー画像を設定する画面で「ヘッダー画像削除」をクリックして、さらに「メディア」からアップした画像を削除すれば完全に削除できます。

ヘッダー画像の位置を変更する場合

ヘッダー画像の位置を変更したい場合、つまり、「ブログタイトル」「メニューナビ」「ヘッダー画像」の順番を入れ替えたい場合は「header.php」を変更する必要があるので、子テーマにTwentyTwelveの「header.php」を追加しておいて下さい。子テーマ忘れちゃった人はこの記事に戻って確認してみて下さい。
子テーマの作り方と有効化する方法【図解】

それでは子テーマの「header.php」をカスタマイズして行きます。まず「header.php」の中には次のコードが順番に並んでいます。

  1. ブログタイトルを表示するコード
  2. メニューナビを表示するコード
  3. ヘッダー画像を表示するコード

つまり、このコードの順番を入れ替える事で表示の順番を変更する事ができる訳です。それぞれ抜き出してみますので、好きな順番に並び替えて下さい。コードの探し方は「Ctrl」+「F」で検索窓がでますので、そこに次のコードの一部を入力して探すと一発で探せます。

ブログタイトルを表示するコード

これは各テーマによって違いますが、多くのテーマの場合「h1」という部分がブログのタイトルの場合が多いので、その前後のコードを探します。Twenty Twelveの場合はこのようになってます。

Twenty Twelveの場合はブログのタイトル「h1」とブログの説明文「h2」となっており、これが「hgroup」という部分に入っているのが分かります。つまりこの「hgroup」で囲まれた部分が記事タイトルや説明文を出力する部分です。

■メニューナビを表示するコード

これもテーマによって違う部分があるかと思いますが、多くのテーマで「navigation」という部分を見つける事ができます。Twenty Twelveの場合は「nav id=”site-navigation」という風に始まっている部分になります。

ヘッダー画像を表示するコード

ヘッダーの画像は「get_header_image()」という部分で出力するテーマがほとんどだと思います。Twenty Twelveではこのようになっています。

上記3つの並びを変更する事でヘッダーの位置を変更する事ができます。順番の入れ替えが出来たら次にそれぞれの間隔の微調整をしてみましょう。

最後に間隔の微調整をする

順番の入れ替えは「header.php」でやりましたが、細かい上下の間隔は「スタイルシート(style.css)」で変更しますので、子テーマのスタイルシートを用意して下さい。間隔(余白)を空ける記述は次のどちらかを使います。

これを覚えておいてそれぞれの位置を調整します。例えばこんな感じです。

  • ブログのタイトルが「hgroup」
  • ヘッダー画像が「.header-image」
  • メニューナビが「.main-navigation」

このようにそれぞれの部分に余白を設定してみて下さい。

最終更新日:2016/02/27

TwentyTwelveのヘッダー画像設定と位置変更”に19件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    しおん様

    返信ありがとうございます。CSSに以下の記述を追加してみて下さい。

    これで上手くいくとは思うのですが、599pxで条件分岐としてます。これはテーマによってどの数値を条件分岐に使うかという意見が別れる部分なのでスマホ・タブレット。PCでの表示を確認しておく必要はあるかなと思います。