*

ブラウザの右下に「カートへ戻る」のリンクボタンを常時表示させる方法

yahoo! shoppingや楽天にあってショップサーブにないもの。

それは、右下に常時表示されるカートへのリンクボタン。

ないものは付けてしまおうホトトギス。というわけで、ショップサーブのCSSをカスタマイズして、カートへ戻るボタンをつける方法を解説いたします。HTML・CSS中級レベルの話ですので、開店したてのHTML初心者の方はスルーしてください。

ショップサーブはこういうカスタマイズができるからいいですよね~

かんたん3ステップ

1.戻るボタン画像を作成
2.CSSファイルに下のコードコピペ
3.ページにリンク配置

と、非常にシンプルとなっております。

1.即席で作ったボタン画像がこれ。

カートへ戻る
(著作権FREE!)

できたボタンは画像登録をしてリンクを取得しておきます。

 

2.CSS内にコードをコピペ

.cart-back {
position: fixed;
bottom: 12px;
right: 18px;
}

ショップサーブ管理画面から、「デザイン設定」→「CSSのカスタマイズ」→「テーマ1の【編集】」と進んで、リンク関係のあたりにコピペで良いでしょう。基本どこでも良い。

CSSカスタマイズ

フッターの一番下にリンク挿入

これもコピペ。「デザイン設定」→「ヘッダとSEOの設定」→「フッタのバナーエリア」これも基本どこでも良いのですが、ページ毎にコピペという考え方はNGです。全ページに共通するHTMLのどこかに挿入するという考え方です。

<div class=”cart-back”><a href=”#mainimg”><img src=”(画像URL)” /></a></div>

CSSカスタマイズ

 

補足

「リンク」というのはHTMLの担当。そして、リンクを配置する場所は限られるます。でも、CSSを使うと、今回のように右下に固定したり、真ん中に配置したり、自由なところに、配置の指定ができます。CSSはレイアウト担当的な感じですね。

戻り先は、「name=cart」というのが見当たらなかったので、「mainimg(メイン画像)」のところにしました。いい塩梅で戻りますよ。

トップに戻るのが良いのか、カートボタンに戻るのが良いのか、という問題もありますが、「ページ内でお客さんにとってほしい行動」というのはカートボタンを押すことなので、戻り先はカートでよろしいかと思います。

気に入らなければ、「a href=”top”」と変えるとページトップに戻ります。その時は、固定リンクボタンの画像の変更もお忘れなく。

下の画像はyahoo! shoppingのやつ。

yahoo

Adsense

関連記事

在宅スタッフ

ネットショップ在宅スタッフの需要高まる?

ネットショッピング業界は右肩上がりとどまることをを知らずですが、ショップ運営の仕事の外注化が広まって

記事を読む

楽天決済

裏から見る開業サービスの選び方

ネット販売を始めようと思うと、いくつか選択肢があります。 (1) ショッピングモールに出店する

記事を読む

セレクトショップ開業

リアル(実店舗)のセレクトショップ開業方法について

リアルのビジネスを始めようと思ったとき、誰もが、まずはネットで情報収集すると思います。ところが、

記事を読む

関係

ネットショップと店長ブログの関係は?

「ネットショップと店長ブログの関係は?」と、なかなか難しい質問。 とても親密です・・・

記事を読む

SSL

フォームメールCGIを設置しよう

取扱商品が数千点、数万点となってくると、ショップサーブの問い合せフォームでは正直、間に合わないんです

記事を読む

カウントダウン

世にも恐ろしい個人事業主受難の時代がまもなくやって来るのかも!?

2017年始まりましたね~ 「ネットショップをはじめたいけど・・・」という方で、まだ始めて

記事を読む

no image

ショップ運営者のHTMLメール作成について

HTMLメールのメルマガが増えてきているのは周知のところです。その流れでネットショップ運営の現場でも

記事を読む

ECコンサルタント

ショップサーブのEストアーがECコンサルタントの求人中

ショップサーブはネットショップ開業に使えるか?でお馴染みのEストアーがECコンサルタントを募集してい

記事を読む

no image

恒例になりつつある月末検索ワードをネタにしたライティング

netsea 評判 netsea(ネッシー)は、いわゆるBtoBサイトです。仕入れしたい個人事業や

記事を読む

レスポンシブ・ウェブ・サイト

レスポンシブ・ウェブ・サイトの仕組み

もっともレスポンシブ・サイトを作りやすいのは、コンテンツがデータベースに記録されているケースですね。

記事を読む

Adsense

Adsense

イベントこじつけ
売り上げアップの秘訣の1つは季節のイベントにこじつけたキャンペーン

間もなく3月ですが、3月のビッグイベントは把握して準備されていますか?

常時SSL
がっくりorz…常時SSLを無料で利用できるプラン発見、灯台下暗し

つい2,3日前に、さくらインターネットを使った常時SSLオプションが、

常時SSL化
常時SSL化へ向けてのテスト体験

ホームページビルダーでPC用に作ったサイトが10年経って、レスポンシブ

オモシロ質問
問い合わせに返答したところ、おもしろい返信が!

ネットショップ開業に特化したサイトをやっていると、やはり、それに関連し

やってはいけない
ネットショップ開業でやってはいけないこと

やってはいけないこと。それは、マルチタスク。マルチタスクは言ってみれば

→もっと見る

PAGE TOP ↑