【研究所公式】続・ショップできすぎくんでページトップへ戻るボタンを作って見たよ

2016年2月3日

穏やか暮らし研究所

URLをコピーしました！

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

Rigi Railways / zlakfoto

2016年上半期、全5回のドロップシッピング3.0セミナーの概要が決まりました。

昨年月商100万円を達成した神谷あつしさんを講師にお招きします。
メインテーマは「売れたショップを見ながら学べるSEO」です。
初売上達成から月商100万円超を目指す方までが対象です。

月に1度SEOが学べることをコンセプトに、毎回攻略方法別に売れたショップを公開して具体的に解説します。
スケジュール、テーマは下記の通りです。

・2月13日（土）　ドロップシッピング100万円までの道
・3月19日（土）　プロモーション広告とSEOの両方で売る
・4月9日（土）　テレビで話題の商品をSEOで売る
・5月14日（土）　商品を購入してSEOで売る
・6月11日（土）　SEOに強いショップの基本を学ぶ

開催予定時間　10:00 – 12:00
募集人数　各6名

主催する私自身が今から開催が楽しみで仕方がありません。
第1回の「ドロップシッピング100万円までの道」は現在募集中です。

□2/13（土）SEOでドロップシッピング月商100万円達成までの道【ドロップシッピング3.0 SEOセミナー】（東京・新宿開催）
http://goo.gl/FG8NAF

既に残りわずかとなっておりますので、受講を検討されている方はお早めにお申し込みください。

さて、今週は岡田祐子さんのショップできすぎくんカスタマイズです。

昨年12月に読者の方から「jQueryを使っての調整の仕方」についてご要望をいただいておりました。
岡田さんにお願いしたところ、今回「ページトップへ戻るボタンを作って見たよ」の続編の記事を作成してくれました。

今回の記事は中上級者向けの内容ですが、活用できる方はぜひ活用して売上アップに役立ててください。

ページトップへ戻るボタンを作って見たよの続編【jQueryでひと工夫】

皆さま、こんばんは！
岡田です。

2015年6月に私のブログにて「ページトップへ戻るボタンを作って見たよ」という記事を書きました。

□ページトップへ戻るボタンを作って見たよ

良く見かける≪画面の下部に矢印画像が表示されて、タップするとページの先頭に戻るボタン≫これをショップできすぎくんで実装する裏技です。

その記事の最後にjQueryを使い、

◎最初は矢印画像が表示されない
◎少しスクロールすると表示される
◎ゆっくりページトップへ戻る

ように調整したページをご紹介したところ

□紹介したページ

この方法教えて！とのお声を頂きましたので、続編として記事を公開いたしました。

□ページトップへ戻るボタンを作って見たよの続編【jQueryでひと工夫】

今回はそのお話です。

◆jQueryって？

jQuery(ジェイクエリー)とは、JavaScriptライブラリと呼ばれるもので、動きを指定したJavaScriptプログラムと組み合わせて

◎クリックしたら画像が入れ替わる
◎折りたたみ式のメニュー
◎アニメーション

などなど、Webサイトに「動きをつける」事が、プログラムについてあまり知識のない者でも作れる優れものです。

特にタブレットやスマートフォンに最適化されたWebサイトを作るには、jQueryは欠かせないものとなりました。

◆手順

詳しい手順はブログを参照頂くとして、簡単に流れを説明すると

１．矢印画像をショップできすぎくんの画像アップロード機能を使うか、ご自分のサーバーにアップする。

２．その矢印画像をサイドバー編集の自由ボックスを使い挿入し、必用なCSS、リンク先を追記する。

３．動きを指定したプログラムファイル（pagetop.js）を作り、自前のサーバーにアップする。

４．ショップデザイン設定の拡張設定でpagetop.jsを読み込ませる。

このような手順となります。

◆最後に

ページトップに戻るボタンは、スマートフォンで閲覧した時に大変便利なものです。

ショップできすぎくんで作られるページではメニューが上部にあるため、ページの最後までいって「別の商品も見てみよう」という時に大変便利なボタンと言えます。

jQueryを使うには自前のサーバーが必要ですが、使わない方式ならショップできすぎくんだけの操作でも実装できるので挑戦してみてください。

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

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

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

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

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

※この記事は2015年1月28日に配信した『どろっぷしっぴんぐ研究所公式メルマガ（無料）』
の一部を修正、改訂して掲載しています。

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