こんにちは、トーモです。
BASEでショップを作ったときにデフォルトで表示される「About」や「Contact」の文字。
これって編集したいなーって思いませんか？
オシャレな雑貨やアパレルなど取り扱うお店でイメージに合っているならいいかもですが、お客さまが使いやすいショップにしたいなら英語表記はちょっと頂けないかなと。
「About」なら「〇〇〇(ショップ名)について」とか、「Contact」なら「お問い合わせ」のほうが親切ですよね。
そう思われるショップオーナーさんも多いかと思います。
HTMLを使えば簡単に編集できますので、その方法をご紹介しますね。
スポンサーリンク
BASEのショップでAboutやContactの文字を編集する方法
BASE Appsで「HTML編集」をインストールする
AboutやContactの文字を編集するにはHTMLをいじってあげる必要がありますので、まずBase Appsから「HTML編集」をインストールします。
管理画面の右上にあるAppsのアイコンをクリックします。
Appsを選べる画面にとびますので、その中から「HTML編集」を選んでインストールします。
以前は有料だったそうですが、現在では無料で利用できます。嬉しいですね。
管理画面にもどって「デザイン」をクリックします。
左側にデザイン編集画面が表示されますので、その中からHTML編集をクリックします。下の画像はデザイン編集部分です。
すると「HTML編集画面」に切り替わります。
HTMLに詳しくない方は「うっ・・」って感じで少しためらっちゃうかもしれませんが大丈夫。
該当箇所だけWordで文字を変えるのと同じように編集してあげるだけです。
HTML編集画面から該当箇所を編集する
文字を編集してあげるにはそれぞれ２箇所を変える必要があります。
１つはショップ上のメニュー部分です。２つ目はメニューをクリックして飛んだページのタイトル文字です。
ではまずメニュー部分の編集箇所をみてみましょう。
ちょっと分かりづらくてすいません。
オレンジの横線で引いた箇所がメニュー部分の文字にあたります。
他のテンプレートで試していないのではっきりと分かりませんが、テンプレート毎にこの位置は変わると思います。
僕が使っているテンプレートではかなり下のほうにありました。
必ずどこかにありますので根気よく探してみてください。
ちなみに僕が使っているおすすめテーマについては下の記事をご参考ください。
BASEのテーマは無料・有料どちらがいいの？おすすめはこれ！
ここの文字をそれぞれ編集してあげると変えることができます。僕はAboutはご利用ガイドに、Contactはお問い合わせに変えました。
「Home」や「NEWS」などの項目も並んでいますので、同じように変更できます。
次に各ページに飛んだときのページタイトルも変更してあげます。
該当箇所は下の画像のとおりです。
オレンジの下線の部分を編集してあげると、ページタイトルが変わります。こちらもテンプレートによって表示位置や内容が違ってくると思います。
ひとつ注意点があります。ここ重要です！
例えばAboutのオレンジ下線の近くを見てください。
<div id=”about”>
{block:AboutPage}
の表記がありますよね？ここにもAboutの文字があります。でも、
こういったカッコに囲まれている部分は絶対に変更しないようにしてください。
ここを変更してしまうとホームページの表示が崩れて正常に表示されなくなってしまいます。
ポイントはカッコに囲まれているかいないかです。
正しい該当箇所のAboutはカッコに囲まれていないですよね？（左右にあるカッコはAboutにはかかっていません）
カッコに囲まれていない部分は実際にホームページで表示されるテキスト部分になります。
HTML編集に慣れていない方は、まずは一ヶ所だけ変更してみて正しく表示が変わったかどうか、またレイアウトが崩れていないか確認するのが良いでしょう。
万一レイアウトが崩れてしまっても、変更箇所を元に戻してあげれば直ります。
ひとつずつ確実におこなってください。
まとめ
今回はBASEのショップでデフォルト表示されている「About」・「Contact」の変更方法でした。
英語表記のほうがデザイン的に洗練されているのでこういった表記になっているんだと思いますが、一番優先するのはお客さまが利用しやすいかどうか。
ユーザビリティに優れているかです。
僕が実際に買い物をするなら、お問い合わせがContactだったりすると「不親切だなー」って思っちゃいます。
それに扱う商材によっては英語表記は浮いちゃいますよね。
必ず変えなきゃダメということはないですが、商材や利用しやすさなど考慮して決めてみて下さい。
今日はこのへんで。
それではまた！
