*

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

公開日: : 最終更新日: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店舗作成

新しいプランを発表した絶好調のカラー・ミーショップ・プロですが、実は、思いもよらないところで無料で3

記事を読む

サイト廃止も想定してサーバーを選ぶ

「ネットショップ向け写真撮影の代行をやっています。よろしければご紹介ください。」的なメールをたまたま

記事を読む

ロリポップに

ショップサーブではなく、別サーバー「ロリポップ」でWordPressを設置する方法

ショップサーブは、通販専用のアプリです。通販サイトの運営専用で、ブログには向いていません。オプション

記事を読む

ショップサーブ・CSSカスタマイズ

最初にやっておきたい、ショップサーブ・スマホサイトCSS基本カスタマイズ5ヶ所

ショップサーブのスマホ・テンプレートですが、個人的にはイマイチ・・・。 ただ、カスタマイズ

記事を読む

no image

ショップ運営者のHTMLメール作成について

HTMLメールのメルマガが増えてきているのは周知のところです。その流れでネットショップ運営の現場でも

記事を読む

特商法オリジナル

特定商取引法をオリジナルページにしてしまう方法

ショップサーブのスマートフォンサイトでは、実は、「フリーページ」を使って特定商取引法のページを差し替

記事を読む

儲けの基本

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

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

記事を読む

生き延びる裏ワザ

メーカーが生き残るために裏ワザ的に使える便利なWEBサービス

ネットショップでは、メーカー品をメーカーから仕入れて販売しているわけですが、新商品の案内が来たと思え

記事を読む

ランディングページ

LP作成、ショップサーブは使えない

「単品販売用のちゃんとしたランディングページ(LP)作る場合、ショップサーブって使えないよね

記事を読む

ウェブダブ

ウェブダブ(WebDAV)これは超便利!

WebDAV(ウェブダブ) サーバーにアクセスする場合、通常はFTPソフトが必要ですが、Web

記事を読む

Adsense

Adsense

サポートの品質
サポートの品質で企業の正体がバレてしまう。

ネットショップ1店舗の引っ越し先として検討していた某社。気にな

簡単に取れて稼げる資格
簡単に取れて稼げる資格

税理士の資格を取れば税理士として商売ができるけど独学では難しい

固定費0円
クレジット決済手数料が安い・固定費が無料や安いサービス5選

あっちこっちにネットショップを作っていると大変です。ある通販サ

5つの鉄則
ネットショップ成功の秘訣5つの鉄則

ビジネスとはあまり関連のない教育ジャンルで、とてもいい記事があ

スマホ対応レスポンシブ化
コーポレートサイト(会社ホームページ)のレスポンシブWEBデザイン化で儲ける方法

今ではほとんどの企業やお店がウェブサイトを持っているのは周知の

→もっと見る

PAGE TOP ↑