WordPressでヘッダーとメニューに色をつける方法(テーマ:Xeory)

  • このエントリーをはてなブックマークに追加

WordPressでヘッダーとメニューの部分に色をつける方法です。WordPressのテーマは「Xeory」を使用しています。

既存の場合は「白」になっていてスッキリとしているのですが、「少しさみしいぁ・・」という方は、ヘッダーとメニューの部分を好みの色に変更可能です。

「ヘッダー」と「メニュー」の部分は、CSSで別々に色を指定されているため、全ての色を変更する場合は3箇所のCSSを変更する必要があります。全て同じ色にするのも、「ヘッダー」と「メニュー」を別々の色に分けることも可能です。

他のテーマを使用している方は、CSSの変更箇所などが異なると思いますので、参考程度にしてください。

1.テーマの編集に移動

WordPressの左側のメニューから「外観 → テーマの編集」をクリックます。

テーマの編集に移動

2.スタイルシートを選択

最初から選択されているかもしれませんが、右側のスタイルシート(style.css)をクリックします。

スタイルシートを選択

3.ヘッダーの色を変更する場合

ヘッダー部分の色を指定している箇所のカラーコードを検索して、使用したい色のカラーコードに変更していきます。

WordPressのテーマ「Xeory」では、下図の赤枠で囲っている部分がヘッダーになります。この部分の色を変更してカスタマイズしていきます。

ヘッダーの場所

カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。

カラーピッカーで色を決める

3-1.変更箇所の検索

キーボードの「ctrlキー」と「Fキー」を同時に押すと、検索バーが表示されるので「#header」と入力して検索します。

検索すると下図の場所が検索結果として出るはずです。この部分を変更していきます。

#headerの検索

 

※Xeoryの初期設定で、「ベースとなるカラー設定」を変更している場合は、検索する「#header」の先頭に下記のコードが記入されてる場所を探します。

  • ベースとなるカラーが「緑」の場合  body.color01
  • ベースとなるカラーが「赤」の場合  body.color02
  • ベースとなるカラーが「オレンジ」の場合  body.color03
  • ベースとなるカラーが「ピンク」の場合  body.color04

「ベースとなるカラー設定」を変更していると、上記のコード(body.color01~body.color04)が先頭に記載された部分が表示されるはずです。

この部分を変更しないと、せっかくのカスタマイズも意味がなくなってしまうので、自分のブログのベースとなるカラーに合わせて、カスタマイズする場所を間違えないようにしましょう。

3-2.色の変更

下図の赤枠で囲ってある部分の「background:#fff」となっている部分を変更します。

色の指定はカラーコードの「#fff」の部分なので、ここを変更していきます。「#fff」の部分のカラーコードを、今回使用する色のカラーコードに変更します。

カラーコードの変更

カラーコードが3桁なのはwebセーフカラーと言って、どのプラウザでも同じ色で表示されると言われているコードです。webセーフカラーは216色あり、カラーコードを3桁に省略することが可能です。

  • #ffffffの場合  #fff
  • #00ff66の場合  #0f6
  • #ffccccの場合  #fcc

webセーフカラーではないカラーコードを使用したとしても、赤が緑になったりと、全く違う色が表示されることはありません。OSやパソコンの環境によって色が少しずれるのだけです。なのでそこまで気にしなくても良いと思います。

3-3.ファイルを更新

カラーコードを変更したら、「ファイルを更新」をクリックして、ヘッダーの色の変更は完了です。

ファイルを更新をクリック

入力した内容が正しければ、ヘッダー部分の色が変更されているはずです。実際にサイトを確認して色が表示されているか確認してみましょう。

4.メニューの色を変更する場合

メニューの場合は「メニューが設置されている場所」に加えて、「メニュー各項目」の背景色も変更が必要です。順に説明していきます。

まずは「メニューが設置されている場所」の色を変更していきます。WordPressのテーマ「Xeory」では、「メニューが設置されている場所」は下図の赤枠で囲ってある部分になります。この部分の色を変更してカスタマイズしていきます。

メニューの場所

4-1.変更箇所の検索

キーボードの「ctrlキー」と「Fキー」を同時に押して、検索バーを表示させて「#gnav」と入力して検索します。

検索すると下図の赤枠で囲ってある部分が表示されるはずです。この部分を変更していきます。

#gnavの検索

4-2.色の変更

下図の赤枠で囲ってある部分の「background:#fff」となっている部分のカラーコード「#fff」を変更します。

「#fff」のカラーコードを、今回使用する色のカラーコードに変更しましょう。

カラーコードの変更

4-3.ファイルを更新

カラーコードを変更したら「ファイルを更新」をクリックして、完了です。

ファイルを更新

実際にメニュー部分の色がカスタマイズされているか、確認してみましょう。

5メニュー項目の色の変更

メニューの項目にはそれぞれ背景色が「白」で設定されているため、この部分の色も変更しないと、下図のようにバランスがおかしくなってしまいます。とっても変ですね。この部分の色を変更してカスタマイズしていきましょう。

メニュー項目の色表示例

念の為、WordPressのテーマ「Xeory」では、メニュー項目は下図の赤枠で囲ってある部分です。

メニュー項目の場所

5-1.メニュー項目の変更箇所の検索

キーボードの「ctrlキー」と「Fキー」を同時に押して、検索バーを表示させて「#gnav li a」と入力して検索します。もしくはさきほどの「#gnav」より少し下にありますので、そのまま下に移動して探しましょう。

下図の場所を変更していきます。

#gnav li aの検索

5-2.カラーコードの変更(又は透明にする)

下図の赤枠で囲ってある部分の「background:#fff」となっている部分の「#fff」を、今回変更するカラーコードに変更します。

カラーコードの変更

透明にする場合は、カラーコードの部分に「transparent」を入力します。「transparent」は背景色を透明に指定するものです。

下記のように「#fff」を「transparent」変更すると、色の指定が削除されて透明になりますので、必然的に「メニューが設置されている場所」と同じ色になります。

  • background: #fff; → background: transparent;

 

5-3.ファイルを更新

カラーコードを変更したら「ファイルを更新」をクリックすると完了です。

ファイルを更新

実際にサイトを確認して色が表示されているか確認してみましょう。

6.文字色の変更

メニュー項目の背景色を変更した場合、使用した色によっては文字が見えづらくなってしまい、せっかく訪れたユーザーに不快感を与えてしまいます。

文字の色も変更して、バランス良く見やすくしましょう。

6-1.メニュー項目の変更箇所の検索

変更場所は「メニュー項目の色の変更」の時と同じ「#gnav li a」です。再度検索するか、そのまま変更してしまいましょう。

#gnav li aの検索

6-2.カラーコードの変更

下図の赤枠で囲ってある部分の「color: #2B2D2D;」となっている部分の「#2B2D2D」を、今回変更するカラーコードに変更します。

カラーコードの変更

6-3.ファイルを更新

カラーコードを変更したら「ファイルを更新」をクリックすると完了です。

ファイルの更新

実際にサイトを確認して色が表示されているか確認してみましょう。

7.まとめ

上記でヘッダーとメニューに色を付ける方法の完了です。

最初は少し面倒くさいですが、一度カスタマイズして慣れてしまえば、再度他の色にカスタマイズするのも簡単です。
自身のサイトに合わせて色を変えてみましょう。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*