【即解決】コピペでOK！Xeory Extention「ヘッダー」のデザイン変更～CSSカスタマイズ編～

7e OFFICIAL BLOG

ホーム
ブログ
Xeory Extention
コピペでOK！Xeory Extention「ヘッダー」のデザイン変更～CSSカスタマイズ編～

Xeory Extention
2019.10.25

コピペでOK！Xeory Extention「ヘッダー」のデザイン変更～CSSカスタマイズ編～

ヘッダー

無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「ヘッダー」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。

ヘッダーは、全てのページの上部に共通して表示されるもので、閲覧者が迷子にならないための目次となるメニューを配置されたり、ウェブサイトのブランドイメージを訴求するなどの役割を担っています。

CSSカスタマイズ

コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルト」になっていることを確認してください。

PC表示

まずは、ヘッダー全体のベースカラーを変更していきます。
10～12行目のコードは、メニューボタン間の隙間の色を変更するものです。カスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認してみてください。

/* ----------------------------------
ヘッダー: ヘッダーバー
---------------------------------- */
#header {
    background: #079292; /* ヘッダーバーの色 */
}

/* ----------------------------------
ヘッダーバー: グローバルナビ
---------------------------------- */
#gnav { 
    background-color: #079292; /* 隙間 */
}
#gnav ul li a {
    background-color: #079292; /* 背景色 */
    color: #fff; /* 文字色 */
}
#gnav ul li:hover a {
    background: #0d7484; /* ホバー色 */
}
#gnav ul li.current-menu-item a {
    background: #0d7484; /* セレクト色 */
}

/* ----------------------------------
ヘッダーバー: プライマリーナビ
---------------------------------- */
#header-fnav-area #header-fnav-btn a {
    background-color: #003037; /* ボタン背景色 */
}
#header a {
    color: #fff; /* アイコン色 */
}

/* ----------------------------------

ヘッダー: ヘッダーバー

---------------------------------- */

#header {

background: #079292; /* ヘッダーバーの色 */

}

/* ----------------------------------

ヘッダーバー: グローバルナビ

---------------------------------- */

#gnav {

background-color: #079292; /* 隙間 */

}

#gnav ul li a {

background-color: #079292; /* 背景色 */

color: #fff; /* 文字色 */

}

#gnav ul li:hover a {

background: #0d7484; /* ホバー色 */

}

#gnav ul li.current-menu-item a {

background: #0d7484; /* セレクト色 */

}

/* ----------------------------------

ヘッダーバー: プライマリーナビ

---------------------------------- */

#header-fnav-area #header-fnav-btn a {

background-color: #003037; /* ボタン背景色 */

}

#header a {

color: #fff; /* アイコン色 */

}

スクリーンサイズ991px以下

下記コードは、スクリーンサイズ991px以下の場合のレイアウト（下記画像）をカスタマイズするものです。パソコンでの表示の際にウィンドウの幅を少し狭めてみて、メニューの変化を確認してみましょう。また黄色の枠部分のメニュータイトルを編集する方法については、ページ下部で補足説明します。

/* ---------------------------------
スクリーンサイズ991px以下: ヘッダー
---------------------------------- */
#header-nav-btn a {
    background-color: #0d7484; /* ヘッダーメニューの色 */
}
#gnav-sp {
    background: #003037; /* メニュー背景色 */
}

/* ---------------------------------

スクリーンサイズ991px以下: ヘッダー

---------------------------------- */

#header-nav-btn a {

background-color: #0d7484; /* ヘッダーメニューの色 */

}

#gnav-sp {

background: #003037; /* メニュー背景色 */

}

スクリーンサイズ767px以下

スクリーンサイズ767px以下でのレスポンシブデザインです。
767pxとはタブレットのスクリーンサイズで、それ以下のスクリーンサイズにはスマートフォンなどが含まれます。レスポンシブとは、タブレットやスマホでウェブサイトを表示する際のデザインのことです。41行目以降のコードは、画面をスクロールする際にヘッダーを画面上部に固定表示するものです。必要なければ省略してください。

/* ----------------------------------
スクリーンサイズ767px以下: ロゴ
---------------------------------- */
@media screen and (max-width: 767px) {
    #header #logo {
        float: left;
        display: inline-block;
        padding: 15px 0 10px 10px; /* 余白: 上右下左 */
    }
    #header #logo a img {
        width: 150px; /* 横サイズ */
        height: 38px; /* 縦サイズ */
    }
}

/* ----------------------------------
スクリーンサイズ767px以下: ハンバーガーメニュー
---------------------------------- */
@media screen and (max-width: 767px) {
    #header-nav-btn {
        display: block;
        width: auto;
        line-height: 1;
        float: right;
        margin: 0; 
    }
    #header-nav-btn a {
        display: block;
        text-align: center;
        font-size: 24px; /* アイコンサイズ */
        padding: 22px 10px 10px 10px; /* 余白: 上右下左 */
        line-height: 1;
        background: none;
        width: auto;
    }
}

/* ----------------------------------
スクリーンサイズ767px以下: ヘッダーの固定
---------------------------------- */
@media screen and (max-width: 767px) {
    #header {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 999;
    }
    #main_visual,
    .breadcrumb-area {
        padding-top: 65px;
    }
}

/* ----------------------------------

スクリーンサイズ767px以下: ロゴ

---------------------------------- */

@media screen and (max-width: 767px) {

#header #logo {

float: left;

display: inline-block;

padding: 15px 0 10px 10px; /* 余白: 上右下左 */

}

#header #logo a img {

width: 150px; /* 横サイズ */

height: 38px; /* 縦サイズ */

}

/* ----------------------------------

スクリーンサイズ767px以下: ハンバーガーメニュー

---------------------------------- */

@media screen and (max-width: 767px) {

#header-nav-btn {

display: block;

width: auto;

line-height: 1;

float: right;

margin: 0;

}

#header-nav-btn a {

display: block;

text-align: center;

font-size: 24px; /* アイコンサイズ */

padding: 22px 10px 10px 10px; /* 余白: 上右下左 */

line-height: 1;

background: none;

width: auto;

}

/* ----------------------------------

スクリーンサイズ767px以下: ヘッダーの固定

---------------------------------- */

@media screen and (max-width: 767px) {

#header {

position: fixed;

left: 0;

right: 0;

z-index: 999;

}

#main_visual,

.breadcrumb-area {

padding-top: 65px;

}

以上で、ヘッダーのカスタマイズは完了です。

次回の記事では、「ファーストビュー」のデザインをカスタマイズするCSSコードを紹介します。

【補足】メニュータイトルの編集

まずは、管理画面の左側メニューの「外観」から「テーマエディター」に移動します。次に、テーマエディター画面のテーマファイルから「テーマヘッダー（header.php）」をクリックしましょう。

デフォルトの状態で、126行目前後にある「<h4>ブログコンテンツ</h4>」と記載された行を探します。キーボードの「ctrl（⌘）」+「f」で、「ブログコンテンツ」というワードを検索すると早いと思います。

「CONTENTS」部分については、「<h4>ブログコンテンツ</h4>」のタグ内を任意のタイトルに書き換えてください。「INFORMATION」部分については、デフォルトではタイトルが存在しないので、新たに記述する必要があります。下記コード（上記画像では122行目）を参考にh4タグを追加記述してください。

<div class="grid-wrap">
    <div id="header-cont-about" class="grid-3">
      <h4>INFORMATION</h4>
        <?php if( has_nav_menu( 'footer_nav' ) ){ 
            wp_nav_menu(
                array(
                    'theme_location'  => 'footer_nav',
                    'menu_class'      => '',
                    'menu_id'         => 'fnav',
                    'container'       => 'nav',
                    'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
                )
            );
        } //if footer_nav 
        ?>
    </div>
    <div id="header-cont-content" class="grid-6">
      <h4>CONTENTS</h4>
        <?php
            wp_nav_menu(
                array(
                    'theme_location'  => 'global_nav',
                    'menu_class'      => 'clearfix',
                    'menu_id'         => 'gnav-ul-sp',
                    'container'       => 'div',
                    'container_id'    => 'gnav-container-sp',
                    'container_class' => 'gnav-container'
                )
            );
        ?>
    </div>
</div>

<h4>INFORMATION</h4>

<?php if( has_nav_menu( 'footer_nav' ) ){

wp_nav_menu(

array(

'theme_location' => 'footer_nav',

'menu_class' => '',

'menu_id' => 'fnav',

'container' => 'nav',

'items_wrap' => '<ul id="footer-nav" class="%2$s">%3$s</ul>'

)

);

} //if footer_nav

</div>

<h4>CONTENTS</h4>

<?php

wp_nav_menu(

array(

'theme_location' => 'global_nav',

'menu_class' => 'clearfix',

'menu_id' => 'gnav-ul-sp',

'container' => 'div',

'container_id' => 'gnav-container-sp',

'container_class' => 'gnav-container'

)

);

</div>

記述が完了したら、ページ下部の「ファイルを更新」をクリックして実際の表示を確認しましょう。メニュータイトルが編集されていればOKです。

Xeory Extention シリーズ

2019.10.28

コピペでOK！Xeory Extention「ファーストビュー」のデザイン変更～CSSカスタマイズ編～

ファーストビュー無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ファーストビューは、ウェブサイトの「第一印象」となる重要な部分です。「Xeory Extention」のファースト...

2019.10.29

コピペでOK！Xeory Extention「トップページ」のデザイン変更～CSSカスタマイズ編～

トップページ無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。この記事で紹介するのは、...

2019.10.30

コピペでOK！Xeory Extention「固定・投稿ページ」のデザイン変更～CSSカスタマイズ編～

固定ページと投稿ページ無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「固定ページ」と「投稿ページ」のデフォルトデザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。 ...

2019.10.31

コピペでOK！Xeory Extention「フッター」のデザイン変更～CSSカスタマイズ編～

フッター無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「フッター」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。まずは上記画像の黄色の枠...

2019.11.01

コピペでOK！Xeory Extentionのカスタマイズまとめ～CSSカスタマイズ編～

Xeory Extention 無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「トップページ」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。ひとま...