【研究所公式】ショップできすぎくんにページトップへ戻るボタンをつける

  • URLをコピーしました!

こんにちは、どろっぷしっぴんぐ研究所の奥成大輔(オクナリダイスケ)です。

toronto sunrise
toronto sunrise / paul bica

 

7月1日開講ドロップシッピング3ヶ月集中講座『研究生制度』の募集も
あと1週間ほどになりました。

ショップ運営ノウハウを通信講座で学ぶ『研究生制度』は
全国どこからでもドロップシッピングが学べます。

ご自身のスキルに応じて3つのコースからお選びいただけます。

ステップアップコース(売上経験があり月商10万円以上が目標の方向け)

ノウハウ初級コース(ショップが作成でき、初売上達成を目指す方向け)

ショップ作成入門コース(パソコン操作に不安がある初心者の方向け)

先着順で定員に達しましたら締切となります。
お問い合せが多い銀行振込についても対応いたしました。

お申込み完了後、順次資料発送いたしますので、お早めにお申込みください。

 

さて、先週より、新執筆メンバーの連載がスタートしています。

2週目に登場するのは岡田祐子さんです。
岡田さんにはドロップシッピング3.0セミナーでも講師を務めていただいております。
『ショップできすぎくんカスタマイズ講座』では、看板画像やhtml、cssのカスタマイズは大好評でした。

ショップできすぎくんカスタマイズやスマホ対応についての話題も楽しみです。

それでは、Webプログラマの経験を活かしたショップできすぎくんカスタマイズについてお楽しみください。

 

ショップできすぎくんにページトップへ戻るボタンをつける

皆さま、はじめまして!

今回より当メルマガの執筆を担当させて頂きます、岡田祐子と申します。

本業のWebプログラマの経験をいかし、初心者の方でも簡単な、独自性のあるショップ作りの
方法をお伝えして行きたいと思っております。

どうぞよろしくお願いいたします。

今回は、ショップできすぎくんのカスタマイズ、しかもかなりな「裏技」をご紹介します。

 

—————–
ページトップへ戻るボタンを、一回の手間で全ページに表示させる技
—————–

できすぎくんで作るショップでは、スマホでの画面スクロールが面倒に感じることがあります。
素材画像が豊富なページでは長くなり尚更です。

併せて、PCではサイドバーは画面上部に固定され、他の商品ページへの誘導を逃しているかもしれません。

 

そこで、最近よく見かける画面の右端に上向き矢印画像が表示されて、クリック、タップするとページの先頭に戻るボタン。
スマホサイトでは今や必須アイテムになっていますね。

できすぎくんでもあれがあったらと思い、試して見ました。

でもページひとつひとつに設定していくのではかなりの手間・・・
どうにか一気に全ページに適用できないかと、考案しました。

—————–
(1)サイドバーの最後に自由ブロックを挿入し、矢印画像を挿入

(2)矢印画像に”#container”へのリンクを付ける。

(3)右下の程良い位置に表示させるためのCSSを追記する
   style=”position: fixed;right: 5px;bottom: 30px;”
—————–

これだけです。

 

詳しい方法は私のブログにて図入りで紹介しておりますので、そちらをご覧ください。

ページトップへのリンクを付けよう|ぐるめ通販トライアルのブログ

ただし、忍者サーバーにアップしたショップでは、PCでは良いのですが、スマホでは広告が表示されるため残念ですが不向きです。
もしもサーバー、自前サーバーご利用のショップにてお使い下さい。

 

完成見本はこちらです。

ブラックできすぎくん

この見本ショップでは
◆最初は矢印画像が表示されない
◆少しスクロールすると表示される
◆ゆっくりページトップへ戻る
のようにプログラミングを施してあります。

この方法はまた機会がありましたらご紹介しますね。

 

●初心者の方でも簡単にできる
●お客様への利便性を高める
●できすぎくんでも個性あるデザイン
をめざした方法をこれからもご紹介できたらと願っております。

ライバルショップに差を付けて、売上アップのお役に立てれば嬉しいです。

 

———————————————————–
【今週の執筆者】岡田祐子

(プロフィール)
有限会社エヌツーエヌコミュニケーション取締役。
Webプログラマとして、美術館、科学館、大学、一般企業等のWebサイト制作に従事。
生きたSEOを学ぶべく、もしもドロップシッピングに登録。もしも大学ステップアップコース18期生受講。
ショップできすぎくんをもっと自由に使いこなしたいと工夫を重ねつつ、Webサイト制作の経験と技術を生かした、「ショップできすぎくんのカスタマイズ方法」「画像作成のコツ」「html、cssの記述の仕方」などを、ブログや講座を通じ発信しています。

ホームページ制作|エヌツーエヌコミュニケーション

ぐるめ通販トライアルのブログ
———————————————————–

 

それでは次号もお楽しみに。 

 

※この記事は2015年6月18日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ(無料)』
のバックナンバーです。

メルマガのご登録はこちら

 

ドロップシッピング十戒(pdf版)好評発売中!

どろっぷしっぴんぐ研究所、初のデジタルコンテンツ
pdf版『ドロップシッピング十戒』好評発売中です。

 

上記のリンク先ではドロップシッピング十戒の一覧や目次も掲載しています。
ご覧いただいてぜひご注文ください。

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次