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

>>>【入れなきゃ損】 普段のネット検索で「楽天ポイント」が貯まる!<<<


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

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

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

変更を加えた際に、レイアウトが大きく崩れてしまう場合があります。そこから自力で修正できるようであれば問題ありませんが、更に悪化させてしまうかもしれませんので、元のhtmlコードはどこかに保存しておいた方が得策です。もしミスしてレイアウトが大崩れしても、再度コピペをすれば治りますからね^^

 

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

こちらが「Hometown」のサムネイル画像

 

1編集エリアへ移動する

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

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

 

 

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

 

今回編集するCSSエリア

 

2該当箇所を見つけ修正

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

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

 

「文字色」を変える

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

「背景色」を変える

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

 

まとめ

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

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

 


おすすめの記事