ブログ

【コピペでOK!】wordpress初心者が追加CSSでcocoonカスタマイズ!【⑱グローバルメニューをオシャレに整えるCSS】

ブログ

こんにちわ
ニワトリです

『自分のブログを見やすく
 オシャレにしたい・・・』

『デフォルトも悪くないけど
 カスタマイズしたい・・・』

『CSSとか難しくて分からない・・・』

こんな悩みを抱えた初心者ブロガーさんも
多いのではないでしょうか?

私もそのひとりです!!

そんなブログ初心者の私が
追加CSSでcocoonをカスタマイズしたので

やり方を紹介していきます。

cocoonの良いところ
  • wordpressの無料テーマ
  • 細かくカスタマイズができる
  • デザインの幅が広い

今回はグローバルメニューをオシャレに
カスタイマイズする方法を紹介していきます。

当ブログのグローバルメニューは
このようになっています。

今回のカスタマイズ
  • ①グローバルメニューの色変更
  • ②グローバルメニューの上下に
    ラインを追加するカスタイマイズ

    ※①か②どちらかのCSSを貼り付けます
  • グローバルメニューの編集

グローバルメニューの基本的な
設定変更は過去記事をお願いします。

グローバルメニューの色変更とアンダーラインのカスタイマイズ

今いるページの色を変更し、
メニュー下にアンダーラインを表示します。

①【コピペでOK!】色変更とアンダーラインのデザインをCSSで調整する

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

やり方
  • wordpressメニュー
  • 外観
  • テーマエディター
  • スタイルCSS

スタイルシート用追加CSS
/************************
* グローバルナビ
/************************/
.header-container .navi {
background: #292d48;
}
#navi .navi-in a {
color: #fff;
}
#navi .navi-in>.menu-header .sub-menu {
background:#292d48;
}
#navi .navi-in>.menu-header .sub-menu {
background:#292d48;
}
#navi .navi-in a:hover {
background-color: #3f4360;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 2px 1px #ffffff;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor {
border-bottom: 3px solid #ffffff;
background: #3f4360;
}
.menu-header .menu-item:hover {
border-bottom: 3px solid #292d48;
background: #3f4360;
}

グローバルメニューの色に合わせる場合は
上マーカー部の3つの色番号を変更します。

グローバルメニューの上下にラインを追加するカスタイマイズ

グローバルメニューの上下に
白ラインが入っている部分になります。

②【コピペでOK!】グローバルメニューの上下にラインを付けるCSS

追加CSS貼り付け時の注意点
  • 編集前にバックアップを取っておく
  • 元のCSSはそのままにする
    今回の追加CSSを前回のCSSの下から
    貼り付けていきます

スタイルシート用追加CSS
/************************
* グローバルナビ
/************************/
.header-container .navi {
background: #292d48;
border-top:3px solid #00974b;
border-bottom:3px solid #00974b;
}
#navi .navi-in a {
color: #fff;
}
#navi .navi-in>.menu-header .sub-menu {
background:#292d48;
}
#navi .navi-in>.menu-header .sub-menu {
background:#292d48;
}
#navi .navi-in a:hover {
background-color: #3f4360;
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: 0 2px 1px #ffffff;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor {
border-bottom: 3px solid #ffffff;
background: #3f4360;
}
.menu-header .menu-item:hover {
border-bottom: 3px solid #292d48;
background: #3f4360;
}

赤マーカー部の3か所で
グローバルメニュー色を変更します。

黄色マーカー部の2か所で
上下のラインの色を変更します。

CSSの貼り付けが終わりましたら
左下の「ファイルを更新」を押します。

ファイルを更新を押さないと
CSSが反映されないため気をつけてください!

スマホとPCで変更したデザインが反映しているか確認する

パソコン
スマホ

グローバルメニューが
スマホとPC画面の両方で
反映しているか確認をします。

グローバルメニューが上の画像のように
表示されていれば設定は完了です。

まとめ

さて、いかがだったでしょうか?

wordpress無料テーマcocoonを
カスタマイズする追加CSS。

今回はグローバルメニューのプチカスタマイズ
について紹介してきました。

次回もcocoonカスタマイズについて
記事をまとめていきますね!

最後までお付き合いいただき
誠にありがとうございました。

ニワトリでした!

ニワトリ
ニワトリ

Twitterやってます。

ニワトリの自己紹介はコチラ

コメント

タイトルとURLをコピーしました