cssSliderを使えば知識なしでもイメージスライダーをあっという間に作れます

公開日:  最終更新日:2015/12/10

cssSliderでjQuery不要のイメージスライダーを生成
最近のネットショップ、ECサイトでイメージスライダーを設置しているショップをよく見かけるのではないでしょうか。ヘッダー部分等の目立つ部分に設置していることが多いですかね。省スペースで複数の画像を設置して派手はエフェクトで目立たせて注目を集めることが可能です。

このブログでも過去に何度かスライダーに関する記事を書いています。
jQueryを使ったスライダーに関する過去記事

サンプルソースを掲載しながら、設置する際の手順等を紹介していますが、css,html,script等の知識が必要になるため、導入する際にやっぱり難しいからあきらめた・・・という人もいるかもしれません。

本日は、スライダー設置をあきらめていた人には朗報です。jQueryなどのスクリプトを使わないスライダーを紹介したいと思います。さらに、うれしいことにスライダーに使いたい画像を準備するだけでhtml、css、javascript等の記述は全く不要です。あっという間にイメージスライダーが完成しますよ。

スポンサードリンク

cssSliderを使えばイメージスライダー設置が超簡単

cssSliderのサイトイメージ
Jqueryを利用しないスライダー、標準CSSイメージスライダー

cssSliderはjQueryなどのスクリプトを使わないスライダーを生成するソフトとして提供されています。今回フリー版を試してみる機会があったので紹介したいと思います。

パソコン上で動作するソフトをインストールして利用することでスライダーをあっという間に生成することが可能です。

windows版とMac版のソフトが提供されており、ダウンロードするにはメールアドレスの登録さえすればインストーラーを入手することが出来ます。

ダウンロードしたファイルを実行してパソコンにcssSliderをインストールすると
cssSliderのデスクトップアイコン
上図のアイコンが追加されます。

さっそく実行してみた画面は非常にシンプルなものです。その画面内に準備したスライダーに使いたい画像をドラッグで放り込みます。
cssSliderの初期画面

すると、画像が読み込まれてスライダー編集画面が表示されます。
メニュー等は英語ですが、選択する内容もシンプルなのでなんとなく使い方はわかるかと思います。

画面構成を簡単に説明すると下図になります。
cssSliderの画面構成
画面左側に読み込んでいる画像の一覧が表示されており、画像の追加、削除、順番など調整することが可能です。真ん中はプレビューエリアです。画面右側ではスキン、エフェクトなど設定可能です。フリー版ではスキンは「Basic」しか選択できません。その他のスキンを選択するにはライセンスを購入する必要があります。(※プレビューではBasic以外も選択出来ますが、最終的にPublishすることが出来ません)

画面下側で選択している画像のキャプション、リンク先設定が可能です。右下にある「Advance」ボタンから詳細な共通設定、画像、エフェクト等の細かな設定をする画面が表示されます。

共通設定、ナビゲーション表示など
cssSliderの共通設定画面
自動スライドの設定やキャプション表示、<>ボタン等の表示設定などをすることが可能です。

画像、エフェクト設定など
cssSliderの画像、エフェクト設定画面
スキンの選択、画像のサイズ、透過設定、エフェクト選択、エフェクトの時間設定など細かく調整可能です。

チェックON,OFFでの設定が多いので、プレビューを見ながらON,OFFを切り替えれば、どんなオプションなのかわかると思いますので、色々試してみれば良いかと思います。

Publishするだけでスライダーに必要なhtmlファイルが生成

プレビューで表示を確認しながら、エフェクト、画像サイズ、リンクなど必要な設定を行い、最終的にはweb上で利用出来る形式にPublishする必要があります。

Publish画面
cssSliderのPublish画面
作成したスライダーを実際に設置するには、最終的にPublishする必要があります。

出力先には、パソコン内のフォルダ以外にもFTP上のフォルダ、WordPressプラグイン用など選択することが可能ですが、ここではパソコン上のフォルダとhtmlファイル名を指定しました。

あとは、Pulishボタンをクリックすれば、指定したフォルダ内に必要なファイル、フォルダ等が生成されます。publishする際に指定したファイル名のhtmlをブラウザで開けばスライダーの動作を確認してみてください。

実際にWebサーバー上にアップロードする際にはhtmlファイルと一緒に生成されたフォルダ等のファイルも一式必要です。また、アップロードする際にはファイルの階層なども変更せず、そのままアップする必要があります。

サーバーにアップすれば、あとはIframe等でショップページに埋め込んで表示すれば設置完了です。

cssSliderで生成したスライダーの動作サンプル

フリー版で選択出来るスキンはBasicの1つだけですが、エフェクトは色々選択することが出来ます。いくつか、cssSliderで作ってみたスライダーのサンプルを紹介します。

スキン「Basic」、エフェクト「Slide」

スキン「Basic」、エフェクト「Jump」

スキン「Basic」、エフェクト「Zoom」、FullWidthをON

スキン「Basic」だけでも、指定出来るオプションやエフェクトなどが豊富に選択出来るのはありがたいですね。

画像に表示される「cssSlider.com」について

フリー版で生成したサンプルを見ていただくと、画像にcssSlider.comのロゴが強制的に表示されているのがわかるかと思います。これはソフトがpublishした際にcssSlider.com入りの画像を生成しているようです。

生成されたファイルの中に「csss_images1」というフォルダがあり、中の画像を確認してみるとわかります。スライダー用に設定した画像がありますが、cssSlider.com入りの画像になっています。

この画像を本来設置したい画像で上書きすれば消すことが可能です。(画像サイズは設定で選択した画像サイズに調整する必要があります)


いかがでしょうか?さくっとスライダー設置したい場合にも使えそうですし、jQueryなどのスライダー設置する知識等がなく、あきらめてたという人でもドラッグ&ドロップであとはソフト上で設定していくだけであっという間に作成出来るのではないでしょうか。ぜひ、試してみてください。




FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑