こんにちは！しばらぶです。
はじめましての方ははじめまして！
ミサイルが飛んで来たり、台風が接近したりしておりますが、今日も張り切ってブログ更新していきましょう。
さて、本日のテーマは
「ドロップダウンメニューのカスタマイズ」
です！
前回の記事では、無事はてなブログにドロップダウンメニューをつけることができました。
使い勝手は申し分ないのですが、使っているうちにだんだんデザインが気になってきました。
ちなみに今のデザインはこんな感じです。
水平に走る真っ黒い線！
すごく悪目立ちしてると思いませんか？
というわけで！
今回は、ドロップダウンメニューの色をテーマの緑色に合わせることを目標にやっていこうと思います！
使用しているテーマはこちら→Minimal Green - テーマ ストア
前回に引き続き、こちらのサイト様を参考にさせていただきます。
変更したい色のコードを調べる
さっそく取り掛かる前に、緑色のコードがわからなかったため、画面から直接抽出して調べることにしました。
大体同じような色を一覧表から取ってきてもよかったのですが、A型の筆者は同じでないと気が済まなかったので、こちらのサイト様を参考に調べました。
（「そんなのめんどくさい！」という方のために、色のコード一覧のリンクも貼っておきます。→WEB色見本 原色大辞典 - HTMLカラーコード）
カラーピッカー
使用させていただいたフリーソフトがこちらです。
ダウンロードしたexeファイルを開くと、マウスカーソルを当てた部分の色のコードが表示されます。
ペイントなどにあるスポイトのような感じですね。使い方も簡単でした。
調べてみたところ、「47a89c」というのがテーマの緑色のようなので、この色にしていきたいと思います。
色を設定する
それでは実際に色を設定していきましょう！
デザインCSSを開く
まずは前回貼りつけたコードが書いてある「デザインCSS」を開きます。
設定→カスタマイズ→デザインCSS
色コードを書き換える
デザインCSSのコードの中にある/*７*/のような数字を頼りに色を設定していきます。
数字は以下のように対応しているそうです。
- メニュー全体（外側）の背景→７
- メニュー全体（内側）の背景→８
- 親リンクの背景色・文字色→９・１０
- 親リンクホバーの背景色・文字色→１１・１２
- 子リンクの背景色・文字色→１３・１４
- 子リンクホバーの背景色・文字色→１５・１６
- MENUの文字の背景色・文字色→１７・１８
引用元：CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life
まずはメニュー全体（外側）の背景を変えてみましょう。
/*７*/の前に書いてある#444を#47a89cに書き換えます。
書き換えてみた結果がこちら。
ふむふむ、色は問題なさそうですね！
変更後
同様にメニュー全体（内側）と親リンクの背景色も変えてみると、こんな感じになりました。
うん、いい感じ！
思った通りの色に変えることができました！
文字色なども変えることができますが、とりあえず見た目はこれで問題ないかなと思うので、そのままにしておきました。
最後に
今回は、ドロップダウンメニューの色を変更してみました。
個人的にはカラーピッカーがかなり便利だったので、今後もブログのデザインを変えるときに使えそうだな、と思いました。
はじめは大変かな、と思って覚悟していましたが、コードが親切に書いてあったので、特に迷うこともなく設定できました。
わたしはMinimal Greenのテーマに合わせましたが、他のブログテーマや、オリジナルの色にしたい！という場合でも同様の方法で変更できるので参考にしていただければと思います。
それでは！また別の記事でお会いしましょう！
