グーペ「Hometown」ナビゲーションメニューの文字色・背景色をカスタマイズ

今回は、グーペのデザインテンプレート「Hometown」を使用しているサイトの「ナビゲーションメニューの文字色・背景色」を変更するカスタマイズ方法を解説します！

通常の機能では変更が出来ませんので、今回の方法を使ってカスタマイズしてみてください。

変更前に必ずバックアップをとっておきましょう

 

【Hometown】ナビゲーションメニューの「文字色」「背景色」をカスタマイズ

 

1編集エリアへ移動する

まずは、「文字色」「背景色」を変えるための編集エリアへと移動します。「設定」＞「デザイン」とすすみ、右側にある「編集」ボタンをクリックします。

すると下記画像のページに移動しますので、同じく右側にある「HTML・CSS編集」をクリックしてください。

 

 

移動した先のページ下方に、「CSS」という編集エリアがあります。その中のコードを書き換えることでカスタマイズ可能です。どこを編集するかは、このあと「文字色」「背景色」に分けてそれぞれ解説しますね。

 

 

2該当箇所を見つけ修正

↑こちらのコードが、ナビゲーションメニュー部分のCSSコードです。先程のコード群の中から見つけてください。（「/* */」で囲まれたコメント部分は僕が追記した部分で、実際のコードには記載されていません。）

この中を編集することで色の調整が可能となります。「こちらのサイト」でコードを確認出来ますので、好みの色を探してみてください。

 

「文字色」を変える

文字を変える場合は、上のコード群の中の「color:」後のカラーコードを変更します。「#」から始まるカラーコード以外にも、「red」「blue」といった色の名称でも変更可能です（このとき「#」は不要）

「背景色」を変える

ナビゲーションメニューの背景色を変える場合は、「background:」後のカラーコードを変更します。文字色のときと同様に、調整してみてください。

 

まとめ

以上で、デザインテンプレート「Hometown」のナビゲーションメニューの「文字色」「背景色」変更の方法解説を終わります！カラーコードをいじるだけなので、結構簡単だったんじゃないかなと思います。

CSSの知識が増えれば、もっとカスタマイズのバリエーションが増えますので、勉強してみるのも面白いと思いますよ☆