この記事の所要時間: 444

賢威7のグローバルメニューのカラーを変更する方法を画像と動画で徹底解説

賢威7のグローバルメニューのカラーとは?


賢威7にグローバルメニューを設置しても、スタンダードバージョンでは初期設定の状態ではカラーがグレーになっているため、あまりデザイン的に目立ちません。

しかし、ダッシュボードのグローバルメニューに関連する箇所を探しても、カラーの変更方法は見つからないはずです。

賢威7でグローバルメニューのカラーを変更するには、ソースコードを直接変更しなければならないので、他のカスタマイズと比べると少し難易度は高くなるでしょう。

そこで今回は賢威7のグローバルメニューのカラー変更方法を画像と動画で詳しく解説していきますので、こちらで紹介している手順のとおりに進めていただければ、簡単にグローバルメニューのカラーを変更することができるようになります。

もし賢威をまだお持ちでない場合には、私も賢威を特典付きでご紹介しておりますので、是非とも下記のページをご覧ください。

これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか?


それでは賢威7のグローバルメニューのカラーを変更する方法について詳しく解説していきます。

賢威7グローバルメニューのカラー変更方法


賢威7のグローバルメニューカラーを変更するためには、まずダッシュボードの左側にあるメニュー一覧の中から【外観】にマウスを合わせて、そこに表示される【テーマの編集】をクリックします。

※クリックで画像が拡大します。
賢威7のグローバルメニューのカラーを変更する方法を画像と動画で徹底解説

そして右側にソースコードメニューの一覧が表示されるので、下の方にある【bace.css】をクリックして、ソースコードの編集ページを開きます。

※クリックで画像が拡大します。
賢威7のグローバルメニューのカラーを変更する方法を画像と動画で徹底解説

その中に下記のように【グローバルナビ】と書かれたソースコードがありますので見つけてください。

/*-----------------------------------
グローバルナビ
------------------------------------*/
.global-nav{
        padding: 0;
        background: #8f8f8f;
}

ここに記載されている、

#8f8f8f

という部分を下記のページにあるソースコード一覧から、好きなカラーコードをコピーして上書きします。

カラーコード一覧

カラーコードを上書きしたら、テーマの編集ページの最下部にある【ファイルを更新】をクリックして変更を保存してください。

これでブログのグローバルメニューを確認していただくと、グローバルメニューの両端だけカラーが変更していると思います。

※クリックで画像が拡大します。
賢威7のグローバルメニューのカラーを変更する方法を画像と動画で徹底解説

このように両端のみカラーを変更することで、グローバルメニュー全体にメリハリを付けることができますので、是非とも参考にしてください。

今度はグローバルメニュー全体のカラーを変更していきますので、先ほどと同じように【bace.css】からグローバルメニューのソースコードを表示します。

そして先ほどの少し下に下記のようなソースコードがありますので、そちらのカラーコードを変更しましょう。

.global-nav-in li a{
	display: block;
	min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
	padding: 1em; /*画像をメニューにする場合は値を0に*/
	background-color: #8f8f8f;
	color: #fff;
	text-decoration: none;
}

※クリックで画像が拡大します。
賢威7のグローバルメニューのカラーを変更する方法を画像と動画で徹底解説

ブログを確認して上記のようにグローバルメニュー全体のカラーが変更していれば、無事にカラー変更は完了となります。

賢威7のメイン画像の削除方法を動画で解説


それでは賢威7のメイン画像の削除方法を動画で詳しく説明していきます。

賢威7のグローバルメニューのカラーを変更する方法


賢威7グローバルメニューカラー変更方法まとめ


賢威7でグローバルメニューのカラーを変更するには上記のようにソースコードを調整する必要がありますが、実際にやってみるとそれほど難しいわけではありません。

とくに賢威7のソースコードはパーツごとに分かりやすく配置分けされているので、慣れてしまえば今回のグローバルナビに関連する場所をカスタマイズするときのように、どこを調整すれば良いか何となく見えてくるはずです。

ただしソースコードを書き換えるときは、万が一、失敗しても元に戻るようにメモ帳などに元のコードをコピーしてから調整するようにしましょう。

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


本日も最後までお読みいただきありがとうございました!

【完全無料】話題沸騰の史上最強の初心者向け企画!
アフィリエイト初心者のための覚醒メールセミナーNEO

分からないことは今すぐに解決してください!
ネットビジネスで分からないことをナオトに質問する

よく読まれている関連記事をご紹介します!