ヘッダー
無料テーマ「Xeory Extention」は初心者にやさしい素晴らしいテーマですが、ベースカラーやレイアウトを自由に変更できない点においては、唯一デメリットと言えます。ここでは「ヘッダー」の固定デザインをカスタマイズするための、すぐに使えるCSSコードを紹介します。
ヘッダーは、全てのページの上部に共通して表示されるもので、閲覧者が迷子にならないための目次となるメニューを配置されたり、ウェブサイトのブランドイメージを訴求するなどの役割を担っています。
CSSカスタマイズ
コーディングを始める前に、必ずテーマの初期設定のカラー設定が「デフォルト」になっていることを確認してください。
PC表示
まずは、ヘッダー全体のベースカラーを変更していきます。
10~12行目のコードは、メニューボタン間の隙間の色を変更するものです。カスタマイズ画面の「追加CSS」に記述し、プレビュー画面で確認してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/* ---------------------------------- ヘッダー: ヘッダーバー ---------------------------------- */ #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以下の場合のレイアウト(下記画像)をカスタマイズするものです。パソコンでの表示の際にウィンドウの幅を少し狭めてみて、メニューの変化を確認してみましょう。また黄色の枠部分のメニュータイトルを編集する方法については、ページ下部で補足説明します。
1 2 3 4 5 6 7 8 9 |
/* --------------------------------- スクリーンサイズ991px以下: ヘッダー ---------------------------------- */ #header-nav-btn a { background-color: #0d7484; /* ヘッダーメニューの色 */ } #gnav-sp { background: #003037; /* メニュー背景色 */ } |
スクリーンサイズ767px以下
スクリーンサイズ767px以下でのレスポンシブデザインです。
767pxとはタブレットのスクリーンサイズで、それ以下のスクリーンサイズにはスマートフォンなどが含まれます。レスポンシブとは、タブレットやスマホでウェブサイトを表示する際のデザインのことです。41行目以降のコードは、画面をスクロールする際にヘッダーを画面上部に固定表示するものです。必要なければ省略してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* ---------------------------------- スクリーンサイズ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タグを追加記述してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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> |
記述が完了したら、ページ下部の「ファイルを更新」をクリックして実際の表示を確認しましょう。メニュータイトルが編集されていればOKです。