最近ブログさぼっていました・・・
もしもドロップシッピングのお店作りで
ショップできすぎくんというすばらしいツールがあります。
簡単にネットショップサイトが作れるので、初心者でも慣れれば数時間でネットショップをオープンできます。
基本的にはショップできすぎ君だけで十分だと思っていますが
動きのあるショップを作れないかということで、練習で1つ作ってみました。
サンプルページ
http://shop.moshimo.com/rensyu/基本的な技術としてjQueryというプログラムを利用します。
そのjQueryを使った
bxSliderという画像をスライドさせるプログラムを使うことでクルクル動く動画を実現します。
自分で看板画像を追加したりできるくらいになった人が対象になります。初めてショップできすぎくんを使ったという方は、まずはその使い方に慣れてからひととおりの操作ができるようになることをおすすめします。
とにかく手っ取り早くやりたい方は
4番の「ショップできすぎくんで設定」から進めていき「
※よくわからないという方へ」から始めてもらっても最低限の動作はします。
◎やり方 1．
bxSliderのページからダウンロード
2．bxSliderの設定を準備
3．bxSliderのファイルをアップロード
4．ショップできすぎくんで設定
5．実際のサイトで確認
1．bxSliderのページからダウンロード
bxSliderのページへ移動して
右上にある「Download」からデータをダウンロードしてきます。
ダウンロードしてきたデータは圧縮されていますので、まずはそれを展開します。
必要なファイルは次のファイルです。
・jquery.bxslider.min.js
・jquery.bxslider.css
・imagesのフォルダ
これらのファイルがきちんとダウンロードできたことを確認しましょう。
2．bxSliderの設定を準備スライドを作成させるためには少し設定が必要になるので、まずはその設定ファイルを作ります。ファイル名はここでは例として「myscript.js」とします。
--- myscript.js の中身 ------------------
$(document).ready(function(){
$('.bxslider').bxSlider({
auto:true
});
-----------------------------------------
メモ帳やTerapadなどのテキストエディタでファイルの中身を上のようにして保存します。
※補足
上のファイルの中身を変えることで、スライドの見せ方や動き方を変更できます。
例えば「自動でスライドしたり、クリックして初めて動作したり、説明文を追加したり、補助用の小さい画像を追加したりなど」
詳しくはbxSliderのページの「Examples」などで紹介されていますので、そちらをご参照ください。
3．bxSliderのファイルをアップロード次の4つのファイル類をサーバーへアップロードします。
(自分用のレンタルサーバーや忍者ツールなど)
・jquery.bxslider.min.js
・jquery.bxslider.css
・imagesのフォルダ
・myscript.js ←2で作ったファイル
ファイルのアップロードはFFFTPなどのソフトを使って行ってください。
※忍者ツールでアップする場合は、同じショップ内のページしか動作しませんでした。具体的にはAショップを作ってそこにアップロードするとAショップでは使えるが、関係のないBショップでは使えないということです。
4．ショップできすぎくんで設定ショップできすぎくんでは大きく2つの設定が必要です。
(1)「ショップデザイン設定」の設定
(2)クルクル画像を見せたいページの作りこみ
順番に説明していきます。
(1)「ショップデザイン設定」の設定
ショップできすぎくんのページからクルクル画像を作りたいショップへ移動します。
そこで、左側のメニューから「ショップデザイン設定」→「拡張設定」を選択します。
・オリジナルCSS URL
・オリジナルJavaScript URL
上のそれぞれについて、先ほどアップロードしたファイルの場所を指定します。
入力欄が足りない場合は、「入力欄を追加する」で入力欄を追加していってください。
※よくわからないという方へこの記事のサンプルページと同じでよければ次の内容をコピペして使ってください。
◎オリジナルCSS URL
・http://akkagi.boo.jp/moshimo/rensyu/jquery.bxslider.css
◎オリジナルJavaScript URL(3つ入力が必要です)
・http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
・http://akkagi.boo.jp/moshimo/rensyu/jquery.bxslider.min.js
・http://akkagi.boo.jp/moshimo/rensyu/myscript.js
(2)クルクル画像を見せたいページの作りこみ
いろいろと大変でしたが、必要な作業はこれで最後になります。
いよいよクルクル画像を見せたいページを作っていきます。
と言っても作業自体は簡単です。
クルクル画像を見せたいページの編集画面へ移動します。
(例えば、トップページの編集や商品ページの編集です)
そこで、普段の画像やカートを追加する作業と同じように
「自由ボックス」をクルクル画像を置きたい所へ配置します。
続けて、今度は配置した「自由ボックス」をクリックします。すると文章を書き込めるようになります。この時に、画面上側の「編集メニュー」のアイコンに色がつくようになります。
ここで、「HTML」となっているところをクリックします。
すると入力画面がポップアップしてきます。
ここに必要事項を入力してきます。
--- ポップアップに記載する内容(HTML) --------------------------------------------
<ul class="bxslider">
<li><img src="画像1ファイルのURL"></li>
<li><img src="画像2ファイルのURL"></li>
<li><img src="画像3ファイルのURL"></li>
</ul>
---------------------------------------------------------------------------------
◎具体例
<ul class="bxslider">
<li><img src="http://akkagi.boo.jp/moshimo/rensyu/banner_sale.png"></li>
<li><img src="http://akkagi.boo.jp/moshimo/rensyu/banner_d900.png"></li>
<li><img src="http://akkagi.boo.jp/moshimo/rensyu/banner_d1000.png"></li>
<li><img src="http://akkagi.boo.jp/moshimo/rensyu/banner_d1100.png"></li>
</ul>
---------------------------------------------------------------------------------
◎記載する内容の手順
(1)上の内容をコピペ
(2)""(ダブルクォート)に囲まれた部分を自分の見せたい画像のURLに変更
(3)見せたい画像の分だけ<li>～</li>を追加や削除
例えば5枚の画像をスライドさせたい場合は、5つ分見せたい画像を<li>～</li>で記述します。
ここまでできれば、ポップアップ画面の下に「HTMLを挿入する」ボタンをクリックします。
すると「自由ボックス」に画像マークが追加されます。
(キャッシュがあれば表示したい画像が入ってきます)
5．実際のサイトで確認ひととり作業が終わったので、最後はきちんと動作するかを確認します。
ブラウザの種類やバージョン、もしくはスマホなどによって動作しない場合もありますので
余裕があればそれらについても確認しておきます。
◎動作しない時
考えられる理由
・ファイル名を間違えている
・できすぎくんのデザイン拡張設定でURLが間違えている
・できすぎくんの自由ボックス内の画像URLが間違えている
・ブラウザのバージョンが古い
・ブラウザの設定でJavaScriptをOFFにしている
いろいろと原因がありますので、順番に最初の1番に戻って間違っていないか確認しましょう。
