通販ショップを始めよう。現役店長が教える開業運営きほんのきほん
ホーム > ネットショップの作り方 > ショップサーブ・カスタマイズ > いちいちページ変遷させず、その場で「吹き出し」

いちいちページ変遷させず、その場で「吹き出し」

吹き出し

Eストアーのショップサーブには何かと不満を持っているユーザーも多いですね。「テンプレートがダサい」だの「時代遅れじゃね?」だの、「管理画面のUIが悪いし、しかも遅いし。」などなど。おっしゃる通りです。それらすべて事実でございす。

しかし、一長一短という言葉があるように、ダメなところがあれば良いところもあるものです。そうです。ショップサーブの良いところは、その抜群のカスタマイズ性にございます。それをわかっているユーザーさんは不満を感じつつも、使いこなしています。

今回は、閲覧ユーザーをいちいち別のページに飛ばさずに済む、その場で注意書きなどを「吹き出し」形式で表示させるテクニック(jQuery)です。当店でも大活用しています。「それについて、もうちょっと詳しく知りたい!」といった要望が出そうな箇所に最適です。

例えば、「この言葉、既存の顧客には常識でも、新規のお客様は知らない人が多いかも知れない。簡単な説明を付けたい。」なんてときにぴったりです。本来の書き方だとは次のように書いたりします。 ASP(アプリケーション・サービス・プロバイダーの略)といった感じです。長ったらしいですよね。そこで本文中では、ASPとだけ表示してマウスを乗せることで吹き出しで説明が出てくるといったものです。

※ネットショプ成功事例無料パンフレット配布中

1.ナイスな「niceTooltip」を使う

吹き出し系のJS(Java Script)はいくつかありますが、このナイスなやつは、ブラウザの右端で表示させようとしたときも、画面からはみ出ることなく上手に表示してくれます。

SimpleTooltipといったものもありますが、吹き出しっぽいデザインは良しとしても、吹き出す場所によってはブラウザからはみ出てしまって見えなくなるというデメリットがあります。

Tooltipは仕組みはどれも同じなので、このナイスを試して、お好みで他のツールチップを楽しむのも楽しいかと思います。

2.jQuery導入の基本ステップ

jQueryを使った便利テクニックを導入するには、まずは【ステップ1】必要ファイルをサーバーにアップロードする。jQueryがまだの場合は、これは一回入れるだけで、次回からは省けます。そして今回はniceTooltipのjsファイルをアップロードしておきます。

さて、アップロードする場所は、それぞれのショップサーブのサーバーにFTP接続をして、「docs」内に「js」というディレクトリ(フォルダ)を作って、その中にJSファイルを収納していくと良いでしょう。もちろん、他でも構いませんが、ここでは、「docs/js」として話を進めます。

【ステップ2】は、ページの<head>~</head>に「jQuery」と「jsファイル(niceTooltip」を読み込みむタグを書きます。記述方法は次のとおりです。

<script type="text/javascript" src="/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/js/nicetooltip.jp"></script>

ショップサーブの管理画面から、「デザイン設定」→「HTMLのカスタマイズ」→「headタグへの追記」のところから挿入します。

吹き出し jQuey, js挿入場所

3.必要箇所の編集

ステップ1、ステップ2までは、全店共通のやり方ですが、【ステップ3】は、自社のサイトのコンテンツに合わせて編集していきます。

まず、吹き出しを出したい箇所に「id」を振っていきます。例えば、<span id="miki">ミキちゃん</span>という感じです。文字に装飾をつける場合は<span id="tarou" style="border-bottom: dotted 2px #87CEFA;">などとします。→ミキちゃん

そして、この「id=tarou」の吹き出し内容は、次のJava scriptを任意の場所に埋め込みます。これは、各ページごと任意の場所です。オレンジのグリーンが、1つの吹き出しのセットです。必要な数追加することができます。

<script type="text/javascript">
<!--
$(function(){
$('#miki').niceTooltip({
HTML: "ミキちゃんは、うちで飼っている体長50mのアフリカオオトカゲのことです。"
});
$('#sari').niceTooltip({
HTML: "サリちゃんは、隣の家で飼育されているイノシシの名前です。
});
-->
</script>

動作サンプルは次の通り。
我が家のミキちゃんと、お隣のサリちゃんはお友達です。

開業予定者にオススメ

ショップサーブ資料請求

↑ PAGE TOP