ブログやっとこブログWordPressでヘッダーとメニューに背景色をつける方法(テーマ:Xeory)やっとこブログ7年前WordPressでヘッダーとメニューの部分に背景色をつける方法です。WordPressのテーマは「Xeory」を使用しています。既存の場合は「白」になっていてスッキリとしているのですが、「少しさみしいぁ・・」という方は、ヘッダーとメニューの部分を好みの背景色に変更可能です。「ヘッダー」と「メニュー」の部分は、CSSで別々に色を指定されているため、全ての背景色を変更する場合は3箇所のCSSを変更する必要があります。全て同じ色にするのも、「ヘッダー」と「メニュー」を別々の色に分けることも可能です。他のテーマを使用している方は、CSSの変更箇所などが異なると思いますので、参考程度にしてください。テーマの編集」をクリックます。最初から選択されているかもしれませんが、右側のスタイルシート(style.css)をクリックします。3.ヘッダーの背景色を変更する場合ヘッダー部分の背景色を指定している箇所のカラーコードを検索して、使用したい色のカラーコードに変更していきます。WordPressのテーマ「Xeory」では、下図の赤枠で囲っている部分がヘッダーになります。この部分の色を変更してカスタマイズしていきます。カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。3-1.変更箇所の検索キーボードの「ctrlキー」と「Fキー」を同時に押すと、検索バーが表示されるので「#header」と入力して検索します。検索すると下図の場所が検索結果として出るはずです。この部分を変更していきます。※Xeoryの初期設定で、「ベースとなるカラー設定」を変更している場合は、検索する「#header」の先頭に下記のコードが記入されてる場所を探します。body.color04「ベースとなるカラー設定」を変更していると、上記のコード(body.color01~body.color04)が先頭に記載された部分が表示されるはずです。この部分を変更しないと、せっかくのカスタマイズも意味がなくなってしまうので、自分のブログのベースとなるカラーに合わせて、カスタマイズする場所を間違えないようにしましょう。下図の赤枠で囲ってある部分の「background:#fff」となっている部分を変更します。色の指定はカラーコードの「#fff」の部分なので、ここを変更していきます。「#fff」の部分のカラーコードを、今回使用する色のカラーコードに変更します。カラーコードが3桁なのはwebセーフカラーと言って、どのプラウザでも同じ色で表示されると言われているコードです。webセーフカラーは216色あり、カラーコードを3桁に省略することが可能です。#fccwebセーフカラーではないカラーコードを使用したとしても、赤が緑になったりと、全く違う色が表示されることはありません。OSやパソコンの環境によって色が少しずれるのだけです。そこまで気にしなくても良いと思います。3-3.ファイルを更新カラーコードを変更したら、「ファイルを更新」をクリックして、ヘッダーの色の変更は完了です。入力した内容が正しければ、ヘッダー部分の背景色が変更されているはずです。実際にサイトを確認して色が表示されているか確認してみましょう。4.メニューの背景色を変更する場合メニューの場合は「メニューが設置されている場所」に加えて、「メニュー各項目」の背景色も変更が必要です。順に説明していきます。「メニューが設置されている場所」の背景色を変更していきます。WordPressのテーマ「Xeory」では、「メニューが設置されている場所」は下図の赤枠で囲ってある部分になります。この部分の色を変更してカスタマイズしていきます。4-1.変更箇所の検索キーボードの「ctrlキー」と「Fキー」を同時に押して、検索バーを表示させて「#gnav」と入力して検索します。検索すると下図の赤枠で囲ってある部分が表示されるはずです。この部分を変更していきます。下図の赤枠で囲ってある部分の「background:#fff」となっている部分のカラーコード「#fff」を変更します。「#fff」のカラーコードを、今回使用する色のカラーコードに変更しましょう。4-3.ファイルを更新カラーコードを変更したら「ファイルを更新」をクリックして、完了です。実際にメニュー部分の色がカスタマイズされているか、確認してみましょう。5メニュー項目の背景色の変更メニューの項目にはそれぞれ背景色が「白」で設定されているため、この部分の色も変更しないと、下図のようにバランスがおかしくなってしまいます。この部分の色を変更してカスタマイズしていきましょう。念の為、WordPressのテーマ「Xeory」では、メニュー項目は下図の赤枠で囲ってある部分です。a」と入力して検索します。さきほどの「#gnav」より少し下にありますので、そのまま下に移動して探しましょう。下図の場所を変更していきます。5-2.カラーコードの変更(又は透明にする)下図の赤枠で囲ってある部分の「background:#fff」となっている部分の「#fff」を、今回変更するカラーコードに変更します。透明にする場合は、カラーコードの部分に「transparent」を入力します。「transparent」は背景色を透明に指定するものです。下記のように「#fff」を「transparent」変更すると、色の指定が削除されて透明になりますので、必然的に「メニューが設置されている場所」と同じ色になります。transparent;5-3.ファイルを更新カラーコードを変更したら「ファイルを更新」をクリックすると完了です。実際にサイトを確認して色が表示されているか確認してみましょう。6.文字色の変更メニュー項目の背景色を変更した場合、使用した色によっては文字が見えづらくなってしまい、せっかく訪れたユーザーに不快感を与えてしまいます。文字の色も変更して、バランス良く見やすくしましょう。再度検索するか、そのまま変更してしまいましょう。#2B2D2D;」となっている部分の「#2B2D2D」を、今回変更するカラーコードに変更します。6-3.ファイルを更新カラーコードを変更したら「ファイルを更新」をクリックすると完了です。実際にサイトを確認して色が表示されているか確認してみましょう。7.まとめ上記でヘッダーとメニューに背景色を付ける方法の完了です。最初は少し面倒くさいですが、一度カスタマイズして慣れてしまえば、再度他の色にカスタマイズするのも簡単です。自身のサイトに合わせて色を変えてみましょう。【その他】WordPressでトップに戻るボタンをカスタマイズする方法(テーマ:Xeory)WordPressでリストの表示位置を変更する方法WordPressでリストの背景に色を付ける方法WordPressで引用デザインをカスタマイズする方法(テーマ:Xeory)WordPressで行間と改行幅をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンの色をカスタマイズする方法(テーマ:Xeory)WordPressでSNSアイコンサイズをカスタマイズする方法(テーマ:Xeory)WordPressで表をカスタマイズする方法(テーマ:Xeory)上記の記事を参考にしてください。WordPress、Xeoryコメントするやっとこブログトップへ戻るモバイルバージョンを。