*

紙芝居のように画像が入れ替わるパーツの正体は「スライダー」

公開日: : 最終更新日:2017/11/16 CSSやHTML、CGI, ウェブ・テクニック , , ,

この記事は約4分で読むことができます。

ネットショップのヘッダーなどで、同じ場所で写真が自動的に入れ替わるパーツを「スライダー」と言います。ショップサーブで、これに近いモノをを導入する場合はオプションで有料(5,000円)です。同社では「スライドショー」という名前。

でも、こんなもの自前でやればタダです。その程度のことは自分でやってしまいましょう。開店したてでHTMLを勉強中の方にはちょっと難しいかもしれませんが、HTMLやCSSをある程度理解でる人ならちょー簡単です。

ほとんどコピペの世界です。自分でプログラムする必要はありません。無料で配布されているプログラムをもらってきて、画像だけ入れ替えるのです。

無料でゲットできるプログラム、今回は「blueberry」というやつを見つけてきたので、それを入れましょう。

まずはダウンロード(無料!)

http://marktyrrell.com/labs/blueberry/

右側の「DOWNLOAD」からファイルを取ってきます。デスクトップにDLできたなら解凍します。こんな感じのファイル構成です。とてもシンプルです。

スライダーファイル構成

必要な部分だけコピペ

index.htmlのソースを開ければ、必要なことが書かれています。ごちゃごちゃ書かれていますが、必要なのは以下の3パーツだけです。すべて<HEAD>内に記入します。(3)はBODYでもOKです。

(1)jQueryの読み込み
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>

(2)Blueberryのjava script読み込み

<script src=”jquery.blueberry.js”></script>
(3)もうひとつJava Script

<script>
$(window).load(function() {
$(‘.blueberry’).blueberry();
});
</script>

あと、CSSで画像の大きさを指定しているのに注意です。.blueberry { max-width: 690px; }このクラス要素の画像サイズだけを必要な大きさに変えればOKです。

HTMLはこれだけ

ヘッダーなどには次のHTMLをコピペするだけです。

<div class=”blueberry”>
<ul class=”slides”>
<li><img src=”画像1.jpg” alt=”サンプル1″></li>
<li><img src=”画像1.jpg” alt=”サンプル1″></li>
<li><img src=”画像1.jpg” alt=”サンプル1″></li>
<li><img src=”画像1.jpg” alt=”サンプル1″></li>
</ul>
</div>

カテゴリページ
(※ショップサーブのカテゴリ管理のところ)

ものの10分でおわってしまうほど、jQueryの中ではイージーなタイプですね。今回は画像だけですが、画像それぞれにリンクを貼ることもできるので、商品ページやカテゴリーページ、キャンペーンのページなどに飛ばすことができます。これで、貴店も繁盛感あふれるお店づくりができます。


Adsense

関連記事

どっちが先?

仕入れが先かネットショップが先か

これはなかなかいい質問ですね~。卵が先か?鶏が先か? 回答は、「あなたの覚悟によってどちらかに

記事を読む

記事ライター

副業記事ライターが知るべきの3つの知識

ネットには色んな仕事があって、その中の内職的仕事のひとつが記事ライター。ブログやサイトの記事を書いて

記事を読む

no image

ネット業界用語やテクニカルターム(思いつくだけ)

今時ネットショップを開業する場合ASPが常識です。でも、「HPBとかのPCソフトで作るもの』とか思っ

記事を読む

バリエーション

自作ページにバリエーションを設置した

「ショップサーブに自作ページを作ってカートは設置したが、バリエーションの選択肢がないので動作しない。

記事を読む

カスタマイズ

WEB MART(KentWeb)カスタマイズ

WEB MART CGIの続き。購入は最低限のスッキリ3ステップなので、カスタマイズもしやすく、かつ

記事を読む

バナー作りはプロに

バナー作りはプロに任せて安上がり

ランサーズ(Lancers)でオリジナル・バナーの作成を募集。 こういう手があったのを知らなか

記事を読む

リピーター

リピーターの作り方(ノベルティーについて)

先月、突然、A8.netから荷物が届きました。一瞬、「お!なんか当選!?」とワクワクしたので

記事を読む

最強のメルマガCGI

メルマガCGI、こんなに素晴らしい最強のCGIがあったのを忘れていた・・・

2018年からの傾向なんですが、通販システムを借りているショップサーブ(運営はEストアー)が、顧

記事を読む

テーマは着せ替え

テーマをインストールする(デザインの着せ替え)

wordpressの優れているのはデザイン(テーマ)が自由に着せ替えできる点です。インストールしただ

記事を読む

確定申告

「確定申告作成や会計はネットから」がスタンダード

パソコンを買い換えると、これからの時期に活躍するあのソフト入ってないんです。会計ソフト。で、ソフトの

記事を読む

Adsense

Adsense

海外輸入
ド素人でも海外仕入れを簡単にできる方法(輸入が熱い!?)

普段は迷惑メールフォルダに仕分けられるであろうメールが受信ト

楽天退店
楽天退店。ちょっと待った!感情的な退店はキケン。

久々に楽天のニュースが出でましたね。楽天は楽天でも、一般消費

ワードプレス
サブディレクトリにインストールしたwordpressをルートディレクトリに表示させる方法

今、自作ネットショップをwordpressに移行しようと奮闘

リアルのセミナー
ネット副業希望者にもおすすめ。セミナーはリアルに限る!

ショップサーブに本店サイト、ヤフーショッピングに支店、それ以外

固定費0円。手数料3.6%のみ。オンライン・クレジット決済の新スタンダード

最近、あるASP(ネット通販運営システム)から秘密の?ダイレ

→もっと見る

PAGE TOP ↑