【WordPressブログ】Cocoon（メインメニューカスタマイズ）

設定方法は上記でも説明したんやけど、メニューの色や大きさなどをカスタマイズして、かっこよくして行くでぇ。

メインメニューの色と幅のカスタマイズ

「Cocoon設定」→「ヘッダー」を選択する。

「グローバルナビメニュー 色」と「グローバルナビメニュー 幅」の項目でカスタマイズしていくんや。

グローバルナビメニュー 色

「グローバルナビメニュー 色」の色を選択の先頭部分をクリックすると、上記のようなカラー選択画面が出てくるでぇ。

カラー画面から希望の色を選択してもええし、「＃4dad27」というカラーコードなるものを入力するんや。

「グローバルナビメニュー 色」の黄色の!をマウスオーバーすると、上記のようなカラーピッカーが出てくるでぇ。左上にも、「配色の見本帳」「日本の伝統色」「NIPPON COLORS」「color Hunt」などのリンクがあるから、クリックして見てみてやぁ。

「グローバルナビメニュー 幅」

デフォルトの値は横幅130px(ピクセル)や。テキストの横幅によっては130px以上のものもあるやろ。

そんな時に横幅のサイズを変更できるんや。サブメニュー幅も変更できるからここで調整してや。

CSSを使用してメインメニューの背景をグラデーションにカスタマイズする

ダッシュボードの「外観」→「カスタマイズ」をクリックします。

「追加CSS」をクリックします。

左下に番号が振られたスペースが出てくるんや。ここにCSSを書き込んで「Cocoon」テーマにはないデザイン（見た目）などを変更できるんや。

CSSの表記や内容は知っていれば、便利やけど、ググれば色々と出てくるから、コピペして使用すればいいんや（使用許可があるサイトの場合）。

/* ナビメニュー配色変更*/
 header-container .navi{
 background: #b96978;
 background-image: -moz-linear-gradient(top, #c27180 30%, #b06170 50%, #d39aa3 50%, #b06170 100%);
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b96978), color-stop(0.50, #c27180), color-stop(0.50, #b06170 ), color-stop(1, #c27180));
 box-shadow:0 2px 6px gray;/* メニューに影をつける */
 font-size: 13px !important;
 margin-bottom: 20px;
 }
 header-container.fixed-header{
 background-color: #fff;
 }
 header-container .navi a{
 color: #fff;
 }
 header-container .navi a:hover{
 color: #9E4A5A;
 }
 .navi-in > ul .sub-menu{
   background: #b96978;
 }

まとめ

後は全体の色やイメージから、メインメニューのデザインだけでもカスタマイズすれば、かっこいいブログが出来上がるでぇ。

その他にもカスタマイズはこれから、どんどん紹介していくから、楽しみにしといてな。