こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
グローバルナビゲーションのテキストを変更する方法をご紹介します！
※対象テンプレート：【プレーン】／【シンプルモダン】
こんなお悩みありませんか？
・ページ上部にあるグローバルナビゲーションの文字を変更したいけどどうやるの？
[難易度 ★☆☆ ]
グローバルナビゲーションのテキストを変更する方法！
※対象テンプレート：プレーン／シンプルモダン
それでは早速、みていきましょう！
今回は例として、「ホーム」という文字を「トップ」に変えてみます。
設定方法
（1）テキストを変更した画像を準備！
「プレーン」「シンプルモダン」のグローバルナビゲーションは下記のように画像でできています！上半分は通常時、下半分はマウスオーバー時に表示される部分です。
Photoshopのような画像加工ツールを使ってダウンロードしたメニュー画像を
表示したいテキスト「トップ（TOP）」に変更して作成します。
| 【プレーン】 |  |
|
| 【シンプルモダン】 |  |
|
▼メニュー素材
|
|
※テキストなしの画像にカーソルを合わせ、「右クリック」→「名前を付けて画像を保存」
すると画像をダウンロードできます。画像作成時にご利用ください。
左端以外の画像もご利用の場合は、こちらからメニュー素材をダウンロードしてご利用ください。
・CSSスプライトと呼ばれる方法で、切替時にすばやくサイトに表示されるよう画像1枚にして作成します。
・作成した画像は、「100MBサーバー/ギガプラス10」にアップロードして表示します。
参考記事「画像やCSSファイルをアップロードしたい」
（2）CSSの指定を変更する！
【ショップデザイン（PC）】> 【トップページ編集】 > 【共通CSS管理】
のエディターエリアに記載されている、メニュー画像の背景に指定している画像URLパスを
テキストを変更した画像のURLパスに変更します。
▼「ホーム」（gNav01）の画像を変更する場合
|
1 2 3 |
#gNav li#gNav01 a{ background:url(/images/original_design_default/samplesource/3/gNav01.png) no-repeat top; } |
↓
|
1 2 3 |
#gNav li#gNav01 a{ background:url(画像URL(パス)) no-repeat top; } |
・「ホーム」（gNav01）以外は、下記のように名前がついています。
変更する場合は同様に、背景に指定している画像のURLパスを変更します。
「商品一覧」（gNav02）、「ショップについて」（gNav03）
「ご利用ガイド」（gNav04）、「お問い合わせ」（gNav05）
（3）テキストを変更する！
【ショップデザイン（PC）】> 【トップページ編集】 > 【上段メニュー管理】
のエディターエリアに記載されているメニュー名を、画像名に合わせて「トップ」に変更します。
|
1 |
<li id="gNav01"><a href=[HOME]>ホーム</a></li> |
↓
|
1 |
<li id="gNav01"><a href=[HOME]>トップ</a></li> |
完了！
管理画面右上の「ショップをみる」で確認してみましょう！
→かんたんですね。
いかがでしたでしょうか。
グローバルナビゲーションは、サイト内の案内メニューです。
ショップにあった見やすいメニュー名になるように意識して変更してみてくださいね。
それではまた！
