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

WordPressブログ

今回は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」

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

コメント

  1. しげぞう より:

    しおん様

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

    [css]
    @media screen and (max-width: 599px) {
    .site { padding: 0;}
    div#main { padding: 0 24px;}
    }
    [/css]
    これで上手くいくとは思うのですが、599pxで条件分岐としてます。これはテーマによってどの数値を条件分岐に使うかという意見が別れる部分なのでスマホ・タブレット。PCでの表示を確認しておく必要はあるかなと思います。

  2. しおん より:

    しげぞう様

    別記事での並行してのご質問失礼致します。
    ヘッダー画像の編集と設定をし、余白も調整できたのですが、
    スマートフォンの表示の際にヘッダー画像が少し小さく感じます。

    スマートフォンのヘッダー画像の表示を画面目いっぱい大きくする方法など
    ございますでしょうか?
    よろしくお願い致します。

  3. okinagatarashi より:

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

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

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

  4. しげぞう より:

    okinagatarashi様

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

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

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

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

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

  5. 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、スマホとも現状で「うん!これでいいか…黒はやだし」の表示なっているので ま!いいか!って、感じです。
    もう一度見て頂けると助かります。
    ご面倒をお掛けいたしますが宜しくお願いします。

  6. しげぞう より:

    okinagatarashi様

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

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

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

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

  7. okinagatarashi より:

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

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

  8. しげぞう より:

    okinagatarashi様

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

  9. 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;
    }
    宜しくお願いします。

タイトルとURLをコピーしました