（上の）グローバルメニューのタブ、プルダウンメニューの背景に色を付けたい！！
スマホから見ている方は、なんのこっちゃ分からないかも知れません。パソコンで見るときだけ表示される、マウスカーソルを乗せた時に表示されるメニュータブです。
そのタブの背景色を変えるというニッチな悩みを解決します。
タブのプルダウン設定はこちらから
【JIN】グローバルメニューでカテゴリのプルダウンを表示する設定【図解】
この記事は、Wordpressのテーマ「JIN」を使用している方向けです。
目次
タブの色はどんなふうに変わる？
まずはビフォーアフターを見てみて下さい。
着色前（ビフォー）特になにもしていない、デフォルトの背景色（白）です。
これに少し手を加えると・・・・。
着色後（アフター）ほんの〜りと緑色の背景色がつきました。デフォルトの白より少し味がつきましたね。
あまりギラギラとした色を使うと見る人にとって辛いので、優しい色合いにするのがいいでしょう。
水玉模様も出来てしまいましたちょっと手を加えるだけで、こんな模様も簡単にできちゃいます。
プルダウンタブの背景に色をつける手順
作業自体は3分もあれば出来ちゃいます。
普段は開かない項目を使いますが、手順通りにやれば簡単です。是非トライしてみて下さい。
「CSSの編集」画面を開いてプログラムを挿入
WordPressのトップメニューから「外観」＞「カスタマーサービス」を開きます。
カスタマイズを開くカスタマイズメニューがずらーっと出てくるので、一番下までスクロールして「追加 CSS」をクリックします。
下の方にある「追加_CSS」を開く開いたら何も書かれていないスペースが表示されます。そこに次のプログラムコード（CSS）をそのままコピー＆貼り付けしましょう。
/* グローバルメニュータブリストの背景色 */
#drawernav ul.menu-box li.menu-item ul.sub-menu li.menu-item a{
background: #f7fff7;
}
すると、こんな感じになっているはずです。
コードを追加した状態画面右のプレビューで、マウスを動かして見て下さい。タブの色が上手く切り替わっていますか？
問題なければ「保存」をして完了です。
背景色を自分の好きな色に変えるには？
今の状態だと、薄いグリーンのはずです。でもそれじゃ私のテーマに合わない！という方へ。
色を変える方法は簡単です。さきほど追加したコードの一部分を修正するだけです。
カラーコードを変える赤線を引いた「＃」以降の6桁が、2桁ずつ色を表しています。＃赤赤緑緑青青です。
お好みの色を見つけたい時はRGBと16進数のカラーコードの相互変換ツール（外部）で簡単に調べられます。
カラーコードは「16進数」なので、1〜9の後にA〜Fのアルファベットが続きます。
詳しく説明するとそれだけで一つの記事になるので、「16進数 とは」で調べてみると良いかも知れません。
水玉模様はCSSグラデーションで作った背景パターンサンプル（外部）様を参考にしました。プログラムをコピーして、カラーコードを変えただけのお手軽カスタマイズ。
プルダウンメニューのタブ背景色を変える！まとめ
プログラムを書くの〜！？と思いきやコピー＆貼り付けだけで簡単に出来るテクニックでした。
試してみると思った以上に簡単だったと思います。手順通りに開いてコピー、貼り付けるだけですからね。
色々触って、試して、オリジナルブログを作り上げていきましょう！
アイキャッチ画像のサイズがバラバラだと、記事の一覧の高さが揃いません。そんな悩みを解消します。
【JIN】テーマの画像写真 アイキャッチ画像の高さを揃える方法【WordPress】
- Amazonでギフト券をチャージ→お買い物の時に使うだけ！
- チャージ額×最大2.5%分のAmazonポイントが貰える！
- ギフト券の詳細やチャージ方法は公式サイトでご確認ください。
- 5,000円からのチャージ対応！
- プライム会員は更に優遇！
→ → → （つまり最大2.5%安く買える！）