WordPress

SELAのグローバルナビの色を変更する方法

この記事では、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;}

最後に

見ていただいたように、グローバルナビの色を変えるだけで、サイトの雰囲気も変わります。

あなたのサイトコンセプトに合った色を見つけて、変更してみてくださいね。

スポンサーリンク


関連記事

  1. WordPress

    ワードプレス「セルのプロパティ」の高度な設定表示が出ない

    ワードプレスで表を作っていて、「セルのプロパティ」の「高度な設定」が表…

  2. WordPress

    ワードプレスを自分で立ち上げてはいけない人

    こんにちは。藤江です。パソコンの電源ボタンもわからないほど、パ…

  3. WordPress

    簡単にワードプレスの見出しデザインを装飾したい

    ワードプレスの無料テーマは、無料で使えることがメリットですが、いろいろ…

  4. WordPress

    【初心者向け】WordPressのブログにカテゴリーを作る方法

    この記事では、ブログ(投稿ページ)のためにカテゴリーを作る方法を紹介し…

  5. WordPress

    【初心者向け】独自ドメインを登録する方法(ロリポップ以前から契約)

    こんにちは。藤江です。こちらの記事は、今回ドメインは新たに取得…

  6. WordPress

    シンプルなWordPress無料テーマ「OLSEN」のインストールの仕方

    最近、ワードプレスの無料テーマもいろいろ見ています。ワードプレ…

メルマガ

 
 

note

最近の記事

  1. コミュニティが分裂崩壊する原因は本当にお金?
  2. ネットビジネスで副業をススメる人たちの残念な共通点
  3. 楽しいは作れる!仕事を楽しむ仕掛け
  4. slack

スポンサーリンク




Twitter

  1. WordPress Plugin

    stripeでオンライン決済 WordPressのプラグインでカード決済導入
  2. Business

    みんなが勘違いしている起業に必要なこと
  3. Work tweet

    変われない人のブログの特徴
  4. WordPress

    ワードプレス「セルのプロパティ」の高度な設定表示が出ない
  5. SNS・Tool

    簡単に音声通話ができる無料オンラインツール
PAGE TOP