こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

以前、グローバルナビゲーションのテキスト画像を変更する方法!をご紹介しましたが、今回は"続編"としてかんたんにナビゲーションの文字を変更したい方向けに「画像表示」ではなく、「テキスト表示」にする方法をご紹介します!
※対象テンプレート:【プレーン】【シンプルモダン】

こんなお悩みありませんか?

・ページ上部にあるグローバルナビゲーションを画像ではなく、テキスト表示にしたい!

[難易度 ★☆☆ ]
グローバルナビゲーションをテキスト表示にする方法!
※対象テンプレート:プレーン/シンプルモダン

「プレーン」「シンプルモダン」のグローバルナビゲーションはこのように画像でできています。

【プレーン】 【シンプルモダン】
プレーン シンプルモダン

画像からテキスト表示にする手順は、CSSを編集するだけ!
それでは早速、みていきましょう。

設定方法

【独自デザイン(PC)】> 【トップページ編集】 > 【共通CSS管理】

内のCSSを下図のように編集します。

共通CSS

【プレーン】テンプレートご利用の場合

【1】#gNav li aを変更し#gNav li a:hoverの指定を追加します。(200行目付近)

【2】下記のCSSを全てを削除します。(207行目付近)

↓このように表示できます!
【プレーン】

【シンプルモダン】テンプレートご利用の場合

【1】#gNav li aを変更し#gNav li a:hoverの指定を追加します。(232行目付近)

【2】下記のCSSを全てを削除します。(283行目付近)

↓このように表示できます!
【シンプルモダン】

ナビゲーションのテキスト文字は、
【独自デザイン(PC)】>【トップページ編集】>【上段メニュー管理】
でソースを修正してかんたんに変更することができます!
※文字数によってはデザインが崩れる恐れがあるのでご注意ください。

完了!

いかがでしたでしょうか。
サイト内の案内メニューとなる、グローバルナビゲーション。
訪問者が分かりやすいメニュー表示になるように、ショップごとに意識して変更してみましょう!

それではまた!