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

グローバルナビゲーションのテキストを変更する方法をご紹介します!
※対象テンプレート:【プレーン】【シンプルモダン】

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

・ページ上部にあるグローバルナビゲーションの文字を変更したいけどどうやるの?

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

それでは早速、みていきましょう!
今回は例として、「ホーム」という文字を「トップ」に変えてみます。

グローバルナビゲーション

設定方法

(1)テキストを変更した画像を準備!

「プレーン」「シンプルモダン」のグローバルナビゲーションは下記のように画像でできています!上半分は通常時下半分はマウスオーバー時に表示される部分です。

Photoshopのような画像加工ツールを使ってダウンロードしたメニュー画像を
表示したいテキスト「トップ(TOP)」に変更して作成します。

【プレーン】 プレーン プレーントップ
【シンプルモダン】 シンプルモダン シンプルモダンサンプル

▼メニュー素材

プレーン シンプルモダン

※テキストなしの画像にカーソルを合わせ、「右クリック」→「名前を付けて画像を保存」
すると画像をダウンロードできます。画像作成時にご利用ください。

左端以外の画像もご利用の場合は、こちらからメニュー素材をダウンロードしてご利用ください。

・CSSスプライトと呼ばれる方法で、切替時にすばやくサイトに表示されるよう画像1枚にして作成します。

・作成した画像は、「100MBサーバー/ギガプラス10」にアップロードして表示します。
 参考記事「画像やCSSファイルをアップロードしたい

(2)CSSの指定を変更する!

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

のエディターエリアに記載されている、メニュー画像の背景に指定している画像URLパスを
テキストを変更した画像のURLパスに変更します。

▼「ホーム」(gNav01)の画像を変更する場合

・「ホーム」(gNav01)以外は、下記のように名前がついています。
 変更する場合は同様に、背景に指定している画像のURLパスを変更します。

 「商品一覧」(gNav02)、「ショップについて」(gNav03)
 「ご利用ガイド」(gNav04)、「お問い合わせ」(gNav05)

(3)テキストを変更する!

【独自デザイン(PC)】> 【トップページ編集】 > 【上段メニュー管理】

のエディターエリアに記載されているメニュー名を、画像名に合わせて「トップ」に変更します。

完了!

管理画面右上の「ショップをみる」で確認してみましょう!

グローバルナビゲーション
→かんたんですね。

いかがでしたでしょうか。
グローバルナビゲーションは、サイト内の案内メニューです。

ショップにあった見やすいメニュー名になるように意識して変更してみてくださいね。

それではまた!