この記事では、Wordpress無料テーマ「SELA」のグローバルナビの色を変更する方法をお伝えしていきます。
グローバルナビはこの部分です。
色を変えると雰囲気もガラリと変わります。
入力自体は複雑なことはないので、トライしてみてくださいね。
＊目次＊
色の変更は追加CSSから
入力する箇所はこちらから↓
ダッシュボート＞外観＞カスタマイズ＞追加CSS
「追加CSS」をクリックすると入力する画面が開きます。
入力する内容はいくつか色のパターンを紹介しながら、この後、お伝えしていきます。
グレー
「追加CSS」に入力するのは以下の内容です。
.main-navigation{background:#808080; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#808080;}
深紅色
.main-navigation{background:#dc143c; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#dc143c;}
ネイビー
.main-navigation{background:#00008b; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#00008b;}
グリーン
.main-navigation{background:#008000; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#008000;}
小麦色
.main-navigation{background:#f5deb3; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#f5deb3;}
プラム
.main-navigation{background:#dda0dd; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#dda0dd;}
色は、「#●●●●●●」の部分です。
色のコードはこちらのサイトが参考になります。
色の名前とカラーコードが一目でわかるWEB色見本
https://www.colordic.org/
グローバルナビに枠線をつけたい
さらにこだわりたい人のために、グローバルナビに枠線をつける方法も紹介します。
入力する箇所は同じくこちらから↓↓
ダッシュボート＞外観＞カスタマイズ＞追加CSS
囲む場合
before
after
グローバルナビを四角で囲むとき(写真は白線)↓↓
.main-navigation{background:#f6bfbc; border:solid 1.5px #ffffff;}
.menu-toggle{background:#f6bfbc;}
下線のみの場合
下線のみのとき(写真はグレー)
.main-navigation{background:#f6bfbc; border-bottom:solid 1.5px #a9a9a9;}
.menu-toggle{background:#f6bfbc;}
上下に線を引く場合
.main-navigation{background:#f6bfbc; border-top:solid 1.5px #a9a9a9; border-bottom:solid 1.5px #a9a9a9;}.menu-toggle{background:#f6bfbc;}
最後に
見ていただいたように、グローバルナビの色を変えるだけで、サイトの雰囲気も変わります。
あなたのサイトコンセプトに合った色を見つけて、変更してみてくださいね。
