ショップできすぎくんに「TOPへ戻る」ボタンを実装する方法

ショップできすぎくんに「TOPへ戻る」ボタンを実装する手順

ショップできすぎくんカスタマイズ

ショップ作成ツールとして有能な「ショップできすぎくん」ですが、そのままの状態では、他の方と同じショップになってしまいます。そこで必要なのがカスタマイズです！

デザインや機能で他店と差をつけることで訪問者へアピール度や使い勝手がアップします！

「TOPへ戻る」ボタンとは？

下に読み進めていくと右下に出現する上へ戻るボタンのことです。

あると便利なのですがショップできすぎくんにはこの機能が付いていません。

メリット

• 商品ページが縦に長いページやトップページですぐに上にあがることができます。
• ショップ訪問者、購入者のサイト使い勝手が良くなりストレス軽減に役立ちます。
• 他ショップとの差別化が図れます。
• 1ショップに設置することができれば、同じ方法で複数のショップで実装できます。

デメリット

ショップできすぎくんを使って、この機能のデメリットは今のところ確認できません。

実装手順

独自ドメインでサブドメインを取得

箱（フォルダ）を用意するのは新しく作ったサブドメインに！

例）

独自ドメイン；https://〇×〇×.info/

サブドメイン；https://△△.〇×〇×.info/（△△の部分が追加されてサブドメインになります）

サブドメインもSSL化しておいてください。（http ⇒ https）

ドメイン内のフォルダーにファイルを入れます！

▲「サーバー内の各フォルダ」（この画面はサーバ各社によって異なります）

フォルダーを開けて新しいファイルを入れます。

入れるファイルはこの２つです。

1. cssファイル
2. jsファイル

上記のファイルは今回、同梱されている「cssjs」というZIPフォルダーにまとめて入れています。

解凍出来たらフォルダごと入れてください。それで完了です。

ショップできすぎくん側の操作

ショップできすぎくんのサイドバー最下段に「TOPへ戻る」ボタンのHTMLを記述します。

次の画面▼

記述する内容は、同梱している「HTMLコード」というファイルにコードを記述しているのでコピペしてください。（内容は下の通りです。）

▲必ずHTMLモードで入力してください。

[PAGE TOP ▲]の部分を変更することで表示を変更出来ます。

ココに注意してください！

追加CSSとJSのリンクを設置

1. ショップできすぎくんの左側の「設定」の「ショップデザイン設定」をクリック！
2. 上の方に「基本設定」「詳細設定」「拡張設定」というタブが3つ並んでいるのを見つけてください。
3. 「拡張設定」をクリック！
4. オリジナルCSS URLに＜サブドメイン+/cssjs/topup.css＞を入力！
5. オリジナルJava Script URLに＜サブドメイン+/cssjs/topup.js＞を入力！
6. 「保存」

「拡張設定の入力」。ココが一番間違いやすいところです。

失敗する時の半分以上がここです！何度も確認してください。

• メモ帳などであらかじめ（独自ドメイン+cssjs/topup.css）と（独自ドメイン+cssjs/topup.js）を作っておいてからコピペで設定しましょう！
• 独自ドメイン（サブドメイン）とショップできすぎくんの（もしもドメイン）を混同しないようにしてください。※もしもドメインを入力しないように！
• ２箇所入力しますが、最後が「css」か「js」の違いだけです。よく見比べてください。
• すべて半角英数です。スペース（空白）がURLの途中、または前後に紛れていないか注意してください。
• 「/」と「.」も間違えないようにしてください。

公開予約を押す

1. 「ショップ公開予約」を押す
2. 「公開予約する」を押す
3. 完成です！

ボタン位置の微調整について

必ずスマホ画面でも確認してください。

CSSファイルの・・・

文字色はカラーコードが分からない方には設定できないので、このCSSでは設定できません。

ショップできすぎくんの「ショップデザイン設定」＞「詳細設定」＞「リンクのテキスト色」が反映されるようになっています。

なのでショップごとに文字色が変化します。

Q&A

送っていただくもの・・・