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

    リファラ「semalt」からのアクセスをサクッとブロックする方法

    参照元(リファラ)によくわからないドメインがありました。seo…

  2. WordPress

    【初心者向け】ロリポップサーバーを契約する

    こんにちは。藤江です。ドメインは取得しましたか?まだの…

  3. WordPress

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

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

  4. WordPress

    ワードプレスの投稿ページと固定ページとは?

    こんにちは。藤江です。ワードプレスには2種類のページがあります…

  5. WordPress

    UNWIND 初期設定のフォント(文字)を変更する方法

    この記事では、WordPressのテーマ「UNWIND」のフォント(文…

  6. WordPress

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

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

ブログ・文章・発信メルマガ

メルマガ

note記事一覧

最近の記事

スポンサーリンク




Twitter

  1. WordPress

    サイト立ち上げ作業に疲れてしまう理由
  2. WordPress

    ワードプレスを自分で立ち上げてはいけない人
  3. 起業・ビジネス

    起業であなたがうまくいっている3つの理由
  4. 起業・ビジネス

    認定講師になりたいアメブロ起業女子
  5. 起業・ビジネス

    起業に必要なのは「がんばり」ではなく「算数」
PAGE TOP