CMSクラウドHP楽々専科無料体験版のお申し込み

営業時間10:00-17:00(土日祝除く)

CMSクラウドHP楽々専科・お助けガイド

2017.09.06

スライダー(連続で切り替わる画像)を配置してみる

HP楽々専科では、ホームページ内に簡単に設置できるスライダーの部品(コンテンツパーツ)を
3種類ご用意しております。

それぞれの特徴をまずは紹介していきたいと思います。

Skitter


  • ラベル1

  • ラベル2

  • ラベル3

最初にご紹介するのは「Skitter」というスライダー部品です。
主な特徴
・画像切り替え時のエフェクト(動き)が38種類あり他の2種類に比べよりダイナミックな表現ができる。
・ページャー(画像切り替えボタン)を数字やサムネイル(縮小された画像)や丸などに切り替えできる。

bxSlider

次にご紹介するのは「bxSlider」というスライダー部品です。
主な特徴
レスポンシブデザインに対応しており、モバイル端末からでも正常に表示される。
・開始・停止ボタンを設置できる。

Destaque

タイトル1
テキスト1
タイトル2
テキスト2
タイトル3
テキスト3

最後に「Destaque」のご紹介です。
主な特徴
・設定したタイトル・テキストをいっしょに切り替えできる。



以上が各スライダーの特徴です。
それぞれ特徴があり、「結局どれを使ったらいいの?」と思うかもしれません。

ホームページをスマホから見る機会が増えた昨今、携帯端末から見た場合のことも当然重要になります。Google検索でもPCページ重視からモバイルページ重視に移行されてきていますからね!!特に切り替え時の動き(エフェクト)にこだわりがないのであれば、スマホでもタブレットでもパソコンでも自動で各画面に合うよう調整されて正常に表示される「レスポンシブデザイン」対応の「bxSlider」をオススメします。

ということで、今回は「bxSlider」を例に配置方法を説明していきたいと思います。

スライダーの配置手順

まずはスライダーを設置した場所で右クリックします。
すると下記のように選択肢が出現するので、コンテンツパーツ→パーツの追加
と選んでいきます。

スライダー配置
すると下記のような画面が表示されるので、右上の「その他」のタブをクリックし、「新規スライダー - bxSlider」をクリックします。

bxslider01

はい、これでスライダーの部品がホームページに追加されました!
ですが、初期状態ではサンプル画像が表示されるように設定されています。これでは追加した意味がありませんね。
次にこの部品の設定を変更して、自分の好きな画像を表示させましょう!!

追加されたスライダーの部品の上で右クリックをすると、下記のように選択肢が出現するので、
スライダー→編集と選んでいきます。

スライダー編集

すると下記のような画面が表示されるので、サーバーブラウザの部分をクリックします。

サーバーブラウザ



すると画像置き場が表示されるので、表示したい画像を選択しましょう。
ちなみに画像置き場に画像を置く(アップロードする)方法はこちらで紹介しています。

画像選択

はい、これで選んだ画像が表示されるようになりました!


スライダーしまうま


あとは同様に下のほうにあるスライダー画像2つめ選択をクリックして2番目に表示される画像を、スライダー画像追加をクリックして3番目以降に表示されれる画像も追加して設定できます。

ここでサーバーブラウザ以外の項目の説明も記載しておきますね。

alt属性   →画像の名前みたいなものです。この場合は「しまうま」等を入力します。
リンク  →この画像の上でクリックした場合にリンクに設定したページに移動するように設定できます。
ターゲット→リンクを設定した場合に同じウインドウでそのページを表示するか、
新たにウインドウを開いてページを表示するか設定できます。
ラベル  →ラベルの表示設定をオンにすると下部に表示されます。ここにも画像の名前等入力しておきましょう。


ここでひとつ注意事項ですが、スライダーに設定する画像はすべて同じサイズにしないと下記のようにおかしな感じになってしまいます。

なんか格好悪いですよね?このようになってしまうのであれば、スライダーを設置しない方が良いくらいですよね!?
このようにならないよう、以前ご紹介した「Page Ruler」でサイズを測って、画像のサイズをスライダーに
合うように調整してから設定してくださいね!ちなみにですが、しまうまの画像や象の画像は横幅765px縦幅280pxで作成しています。最初はこのサイズを参考にしても良いかもしれません。



また、ラベルのオンオフの設定も含めてスライダーはオプションの設定でもっと細かい設定が可能です。

スライダーオプション

次回はスライダーのオプション内について詳しく紹介していきます。
是非次回もご覧ください。

サイト内検索

会社案内

株式会社セイケン・ソフトサービス
秋葉原オフィス
〒101-0021
東京都千代田区外神田2-9-8
ユニオンビル細野6階
https://www.seiken-soft.com/

HP楽々専科に関するお問い合わせ

営業時間10:00-17:00(土日祝除く)

お問い合わせフォーム

表示:PC