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

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

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

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

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

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



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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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



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