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

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

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

  4. WordPress

    ワードプレスでSSLを設定する

    こんにちは。藤江です。ロリポップでSSLの設定できたら、ワード…

  5. WordPress

    サイトのタイトルとキャッチフレーズをつけよう

    こんにちは。藤江です。この記事では、サイトのタイトルとそれに関…

  6. WordPress

    UNWINDのグローバルナビの位置を変更する方法

    この記事では、ワードプレス無料テーマUNWINDのグローバルナビの位置…

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

メルマガ

note記事一覧

最近の記事

スポンサーリンク




Twitter

  1. マインドセット・考え方の枠組み

    『7つの習慣』は起業女性に効く最強の一冊
  2. コミュニティ論

    コミュニティ主催者に向いているのはこんな人
  3. WordPress

    レンタルサーバーでロリポップを選ぶときに抑えておきたい3つのポイント
  4. WordPressプラグイン

    編集に便利!ページを複製できるプラグインDuplicate Postの設定
  5. つぶやき・仕事術

    「何の取り柄もない主婦が強み診断を受けてみた」
PAGE TOP