7e OFFICIAL BLOG

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

ヘッダー

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

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

CSSカスタマイズ

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

PC表示


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

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


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

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


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

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

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

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

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

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

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

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

Xeory Extention シリーズ

関連記事一覧

PAGE TOP