Shibablog(しばぶろ)

月収が10万しかないけど好きなことで生きていく

ブログ初心者がドロップダウンメニューをカスタマイズしてみた【色編】

f:id:sibalove:20170921223414j:plain

 

こんにちは!しばらぶです。

はじめましての方ははじめまして!

ミサイルが飛んで来たり、台風が接近したりしておりますが、今日も張り切ってブログ更新していきましょう。

 

さて、本日のテーマは

ドロップダウンメニューのカスタマイズ

です!

 

前回の記事では、無事はてなブログにドロップダウンメニューをつけることができました。

sibalove.hatenablog.com

 

使い勝手は申し分ないのですが、使っているうちにだんだんデザインが気になってきました。

 

ちなみに今のデザインはこんな感じです。

f:id:sibalove:20170921223458p:plain

 

水平に走る真っ黒い線

すごく悪目立ちしてると思いませんか?

 

というわけで!

今回は、ドロップダウンメニューの色をテーマの緑色に合わせることを目標にやっていこうと思います!

使用しているテーマはこちら→Minimal Green - テーマ ストア

 

前回に引き続き、こちらのサイト様を参考にさせていただきます。

www.yukihy.com

 

 

変更したい色のコードを調べる

さっそく取り掛かる前に、のコードがわからなかったため、画面から直接抽出して調べることにしました。

 

大体同じような色を一覧表から取ってきてもよかったのですが、A型の筆者は同じでないと気が済まなかったので、こちらのサイト様を参考に調べました。

nako-itnote.com

(「そんなのめんどくさい!」という方のために、色のコード一覧のリンクも貼っておきます。→WEB色見本 原色大辞典 - HTMLカラーコード

 

カラーピッカー

使用させていただいたフリーソフトがこちらです。

www.vector.co.jp

ダウンロードしたexeファイルを開くと、マウスカーソルを当てた部分の色のコードが表示されます。

 

ペイントなどにあるスポイトのような感じですね。使い方も簡単でした。

 

調べてみたところ、「47a89c」というのがテーマの緑色のようなので、この色にしていきたいと思います。

 

色を設定する

それでは実際に色を設定していきましょう!

 

デザインCSSを開く

まずは前回貼りつけたコードが書いてある「デザインCSS」を開きます。

設定→カスタマイズ→デザインCSS

f:id:sibalove:20170921223527p:plain

 

色コードを書き換える

デザインCSSのコードの中にある/*7*/のような数字を頼りに色を設定していきます。

数字は以下のように対応しているそうです。

  • メニュー全体(外側)の背景→7
  • メニュー全体(内側)の背景→8
  • 親リンクの背景色・文字色→9・10
  • 親リンクホバーの背景色・文字色→11・12
  • 子リンクの背景色・文字色→13・14
  • 子リンクホバーの背景色・文字色→15・16
  • MENUの文字の背景色・文字色→17・18

引用元:CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

 

まずはメニュー全体(外側)の背景を変えてみましょう。

/*7*/の前に書いてある#444#47a89cに書き換えます。

 

書き換えてみた結果がこちら。

f:id:sibalove:20170921223551p:plain

ふむふむ、色は問題なさそうですね!

 

変更後

同様にメニュー全体(内側)と親リンクの背景色も変えてみると、こんな感じになりました。

f:id:sibalove:20170921223608p:plain

うん、いい感じ!

 

思った通りの色に変えることができました!

f:id:sibalove:20170921223637j:plain

でけたー



 

文字色なども変えることができますが、とりあえず見た目はこれで問題ないかなと思うので、そのままにしておきました。

 

最後に

今回は、ドロップダウンメニューの色を変更してみました。

個人的にはカラーピッカーがかなり便利だったので、今後もブログのデザインを変えるときに使えそうだな、と思いました。

 

はじめは大変かな、と思って覚悟していましたが、コードが親切に書いてあったので、特に迷うこともなく設定できました。

 

わたしはMinimal Greenのテーマに合わせましたが、他のブログテーマや、オリジナルの色にしたい!という場合でも同様の方法で変更できるので参考にしていただければと思います。

 

それでは!また別の記事でお会いしましょう!