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の場合はこのようになってます。

<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

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

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

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

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

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

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

<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

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

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

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

margin-top: /* 上に余白 */
margin-bottom: /* 下に余白 */

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

hgroup {
margin-bottom:10px;} /* タイトル下に余白 */

.header-image {
margin-bottom:10px;} /* ヘッダー画像下に余白 */

.main-navigation {
margin-bottom:10px;} /* ナビメニュー下に余白 */
  • ブログのタイトルが「hgroup」
  • ヘッダー画像が「.header-image」
  • メニューナビが「.main-navigation」

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

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

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

  1. okinagatarashi

    しげぞう様
    おはようございます!
    早朝よりありがとうございます。

    ハイッ!!完了!!です。
    本とに凄い!え~ぇ何で?と思う間に即完!
    前回と今回の違いが分からない…ローマ字2個と-1pxだけ…
    いっつも、私の説明が悪いのに、終わっちゃう。
    本当にありがとうございます。

    フッターは取りあえず問題ないかな…と、思っています。
    しげぞう様も同じ意見で良かった!ただ、今まで、質問に答え続けて貰って
    少しは学んだ事にチャレンジした。はいいけれど、本当にこれでいい?のかしら…遣ろうとした事が表示されてるからいいけど…と思って居た事と、何が作用してるか分らないから
    一応見て貰えると…と、思い一緒に送りました。複雑なことしてごめんなさい。
    いつも本当にありがとうございます。これからも宜しくお願いします。

  2. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。前回のナビの条件分岐は間違ってましたね、すみません。あれだとPCのナビが消えてしまいます。ちょっと寝ぼけておりました!

    前回のナビの条件分岐は消して次のコードを入れてみて下さい。

    @media screen and (max-width: 599px) {
    #site-navigation {
        display: none;
    }
    
    .site-description {
       background: #fff !important;
        color: #333 !important;
    }
    }

    上記のコードでスマホのナビを削除し、説明文の背景色を白(#fff)、それで説明文の文字色をグレーっぽい黒(#333)にできると思いますので、一度試してみて下さい。前回のコードは削除しておいて下さいね、PCのナビが非表示になってますので。

    それからフッターは違和感はありませんが、どのような感じにしたいのか教えて頂けると助かります。

  3. okinagatarashi

    しげぞう様
    こんにちは!見て頂いてありがとうございます。

    早速やってみました!
    スマホの表示は変化なし、
    PCの表示はナビメニューが消えました。

    ナビメニュー用に私が入れたコード

    header #site-navigation input#panel.on-off + div.nav-menu-open,
    header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    overflow: inherit;
    height: auto;
    background-color: #ff0000;
    で、教えて頂いたコメントのコードを入れました。

    もう一つ、現状で、PCの方は思うように表示されてるのですが
    スマホの表示が、サイトの説明部分が黒帯になってしまって、
    どうしたらいいのか?HELP!です。下のコードが私が入れたコードです。

    /*ブログの説明*/
    .site-description {
    color: #161616;
    font-size: 14px;
    }

    フッターは

    /*フッター背景色*/
    footer {
    background-color: #f6f0c7;
    }
    footer a {
    color: #161616;
    }
    footer a:hover {
    color: #ff0000;
    }
    .copyright a {
    text-color: #161616;
    }

    footer {
    color: #ff0000;
    font: tahoma
    padding: .714286em 1.07143em;
    }

    と、なっています。フッターはPC、スマホとも現状で「うん!これでいいか…黒はやだし」の表示なっているので ま!いいか!って、感じです。
    もう一度見て頂けると助かります。
    ご面倒をお掛けいたしますが宜しくお願いします。

  4. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます!確認できました。ナビの部分ですが、使っているテーマで通常はスマホでは表示しないようになっているのですが、条件分岐ができていないようで、スマホでもナビが全表示という状態だと思います。

    スタイルシートに以下のコードを追加して確認してみて下さい。

    @media screen and (min-width: 600px) {
    #site-navigation {
        display: none;
    }
    }

    これでスマホでは表示されなくなると思いますので、試してみてもし反映されないようであれば再度コメント下さい。よろしくお願いします。

  5. okinagatarashi

    しげぞう様
    こんにちは!お世話になります。

    ナビメニューの赤色帯部分で、
    Twenty Twelveだと背景域に当たる部分まで赤帯が続いてると思うのですが
    ここを赤にしたくて赤には出来たのですが…
    スマホの表示がナビメニューがドカァーッと開いた状態になってしまったんです。
    背景に当たる赤い部分の右クリック、ソースの表示で出てはいます。
    申し訳ないですが、もう一度見て頂けると助かります。
    宜しくお願いします。

  6. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。ちょっと見てみたのですが、コメントで頂いたコードが見当たりません。スタイルシートに追加されているのでしょうか?またフッターのメニューもちょっと見つける事ができません。URL違うの見てるかも?なので再度URLと該当の場所、追加されたコードなどを教えて頂けると助かります。どうぞよろしくお願い致します。

  7. okinagatarashi

    しげぞう様
    お世話になります。
    適当な事したら、フッターの装飾が…出来た!
    は、いいのですが…スマホの表示でナビメニューが…でっかくなっちゃいました。
    これは、修正可能なのでしょうか?
    下記のマシン語でPC表示でのナビメニューの横のところの帯も赤くなったんですけど
    この後、スマホが…ドカッとナビメニューです。

    header #site-navigation input#panel.on-off + div.nav-menu-open,
    header #site-navigation input#panel.on-off + div.header-nav-container {
    display: block;
    overflow: inherit;
    height: auto;
    background-color: #ff0000;
    }
    宜しくお願いします。

  8. しげぞう 投稿作成者

    gura様

    問題解決良かったです。私もこういう事がよくあって、最初の頃は数日ハマる事も多かったです(笑)。また何かありましたらコメント下さいませ。今後もよろしくお願い致します。

  9. gura

    しげぞうさん
    返信有難うございます。

    コメントする前に私もキャッシュが原因だと思い、削除してから表示したのですがスマホに反映されていませんでした。

    夜、スマホで自サイトを確認したところヘッダー画像がしっかり反映されていました。あれから何もしていないのですが…直りました!

    お騒がせして大変、申し訳ありませんでした。適切な回答有難うございます。

    ネットで色々検索するも解決策が分からない時、こういう風にしげぞうさんが答えてくれると本当に心強いです。

  10. しげぞう 投稿作成者

    gura様

    コメントありがとうございます。ヘッダー画像ですが、私が見た時にはスマートフォンでも画像が表示されてましたので、もしかするとキャッシュもしくはプラグインが原因かも知れませんね。一度別のブラウザでも確認してみるといいかも知れません。

    また、キャッシュ系のプラグインなどは一度停止、もしくはキャッシュを削除してから再度確認してみる事をおすすめします。もしそれでもダメなら再度コメント頂けると助かります。どうぞよろしくお願い致します。

  11. gura

    しげぞうさん
    いつもお世話になっています。

    ヘッダー画像を色々設定していたんですが、PCで見た時は普通に表示されるのですが、スマホでサイトを見た時にヘッダー画像が表示されずに白枠!?だけになってしまいます。

    スマホでもPCと同じ画像が表示されるにはどうすれば良いでしょうか?

    ※今まで載せていた画像から、新たな画像に変更した時のスマホ表示は正常でした。(昨日)
    そこから更に、別の画像へ変更を2枚ぐらいしたら表示がおかしくなりました。(今日)
    戻そうと思って画像を戻してもスマホ表示だけバグったままです。

    訳が分からず、大変困っています。
    お忙しい中、申し訳ありませんが宜しくお願いします。

  12. ケンボー

    しげぞうさん

    できました!
    しげぞうさんの記事のアドセンスのズレの調整を参考にやってみたら、ヘッダー画像センター表示できました。

    本当にありがとうございました。

  13. ケンボー

    しげぞうさん

    ありがとうございます。できました!
    ですがPC表示は画像がて大きくなりすぎて、バランスが悪くなったので、横に引き伸ばした画像を作ってみたのですが、やはりバランスが悪くなりました。

    そこで、cssのwitdth:100%を削除したのですが、画像が左端に寄ってしまいました。

    この画像をセンター表示させたいのですが、text-aline:centerでは真ん中表示できませんでした。

    PC表示のナビメニューは画面端いっぱいのままで大丈夫です。

    スマホの表示は完璧です。

    PC表示のヘッダー画像をセンター表示させる方法はありますか?

    お忙しいのに無理ばかり言って申し訳ないです。

    宜しくお願い致します。

  14. しげぞう 投稿作成者

    >ケンボー様

    返信ありがとうございます。一応やってみたのですが、結構大変です(笑)。現在どのようなカスタマイズをしているかという部分でも違う部分が出てくるかもしれませんので、事前にバックアップをしておいていつでも元に戻せるようにしておいて下さい。

    今試したのはヘッダー部分(ブログタイトルや説明文、ヘッダー画像)を横幅いっぱいに広げるカスタマイズです。

    まずはheader.phpを開いて次の部分を探します。

    <div id="page" class="hfeed site">

    このコードの下にある部分を切り取ります(後でコピペします)。この部分です。

    <header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
    
    		<nav id="site-navigation" class="main-navigation" role="navigation">
    			<button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    
    		<?php if ( get_header_image() ) : ?>
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" /></a>
    		<?php endif; ?>
    	</header><!-- #masthead -->

    切り取ったコードを最初に探したコードの上にコピペします。「body」タグの下に切り取ったコードがコピペされていると思います。これでheader.phpは保存します。

    次のスタイルシートの一番下に次のコードを入れて下さい。

    .site-header h1, .site-header h2 {
      text-align: center;  /* ヘッダーのタイトル部分をセンターに */
    }
    
    .main-navigation li {
    margin-left:50px;  /* ナビが左に寄っているので右にずらす */
    }
    
    body .site {
      margin-top: 0;  /* メインコンテンツとヘッダーの余白を無くす */
    }
    
    header#masthead {
      background-color: #fff;  /* ヘッダー部分の背景色を白に */
      padding-bottom: 0;  /* メインコンテンツとヘッダーの余白を無くす */
    }
    
    img.header-image{
      margin-top: 0;  /* ヘッダー画像上の余白を無くす */
      width:100%  /* ヘッダー画像の横幅いっぱいに表示 */
    }

    一度これで試してもらえますか?もし上手くいかないようであれば再度コメント頂けると助かります。どうぞよろしくお願いします。

  15. ケンボー

    さっそくのお返事ありがとうございます。
    ヘッダー画像で間違いありません。
    宜しくお願い致します。

  16. しげぞう 投稿作成者

    >ケンボー様

    コメントありがとうございます。ヘッダー画像という事ですが、もしかしてヘッダーではなく、アイキャッチ画像ではないですか?一応やったことがないのですが、調べてみますので、ヘッダー画像なのかアイキャッチ画像なのかを教えて頂けると助かります。

  17. ケンボー

    いつも参考にさせて頂いてます。
    とても分かりやすい説明で非常に助かっています。
    1つ教えて欲しいのですが、twenty twelveでPC表示のヘッダー画像を画面幅いっぱいに広げる方法はありますか。
    またスマホ表示だとヘッダー画像の両サイドと上にスペースが入るのですが、このスペースを無くす方法などあるのでしょうか?
    PC表示のヘッダー画像の広げ方でググっても分かりにくいサイトばかりだったので質問させて頂きました。
    宜しくお願い致します。