*

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

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

関連記事

トップページ用テンプレート

ヤフーストア・トップページ用のテンプレートを作ってみた。

ヤフープロフェッショナル出店は、HTMLが理解できて使える人にとっては、ページを作り上げる楽しみがあ

記事を読む

メイクショップとショップサーブ比較

今さらメイクショップとショップサーブを比較してみた

「隣の芝生は青い。」ってことわざがありますよね。 英語で言えば、The grass is

記事を読む

ポデローサを知らなかった

EC CUBEがFTPでうまくアップロードできないときは「Poderosa」を使おう

EC CUBEをzipファイルでダウンロードして解凍。2000個以上のファイル群です。FFFTPでア

記事を読む

打ち消し線

メーカー小売希望価格や通常価格に打ち消し線を引く(CSS)

打ち消しと言えば<s>だったのですが、今はCSSで書きます。 この画像のよ

記事を読む

no image

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

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

記事を読む

スーツケース

従来型バッグとスーツケース(キャリーバッグ)

「出張時はスーツケース(キャリーバッグ)」が定番化しつつあります。そんな時代の趨勢に便乗して出張時は

記事を読む

no image

大学生も正直な商品説明を

新卒さんの集団を見かけました。おそらく、どこかの会社の入社説明かか何かの出席したあとの帰りなのかもし

記事を読む

格安と何が違う

格安開業サービスとは何が違うのか?

今回は他社との比較について。 ショップサーブと、格安なネットショップ開業サービスでは、何が違う

記事を読む

メルマガ

知らないうちにメルマガ送信機能が最強になっていた

「ショップサーブのメルマガ機能は使い物にならない!」と思って放置していたあなた!知らない間に、スゴイ

記事を読む

儲けの基本

0円で仕入れたものを2万円や5万円をつけて売る方法

ショップサーブ(開業サービス)の、オプションサービスに、アコーディオンメニュー・メガメニュー制作代行

記事を読む

Adsense

Adsense

貴重なセミナー終わるかも
貴重なセミナー終わっちゃうかもよ~

ショップサーブを運営するEストアーが、ネットショップの新規開業ユーザー

no image
QUESTの法則ランディングページ

ランディングページを作りるにあたり、消費者行動モデルはどれを適用するか

インスタグラムからのネット販売
インスタからのネット販売

「これ欲しい~」とメッセージもらったのがインスタのキャプチャ。ユーザー

オリジナルページ
ショップサーブオリジナルページへのカートボタン他

物忘れがひどくなるのは年齢のせい? たま~にHTMLやCGIをい

ai
問い合わせの傾向から感じる流通の変化

最近問い合わせが増えてるって記事を書いたんですが、実は、もうひ

→もっと見る

PAGE TOP ↑