スライダーブロック
スライダーブロックについて
自動に横スクロールする画像スライドを5つまで登録できるブロックです。
前提
- 本ブロックはページの編集画面でのみ使用できます。ページについてはこちら
- ブロックの配置や削除等、ブロック全般についてはこちら
1. スライダーブロックの場所
スライダーブブロックはテキストブロックの中にあります。（赤枠箇所）
2. スライダーブロックの追加
以下の画像のようブロックが追加されます。（赤枠箇所）
3. 内容の設定
ブロック設定で各種設定をします。
3.1. 全般設定
前後の画像を表示
「表示する」を選択すると、左右の空白スペースに前後の画像が表示されます。
スライダーの幅
「コンテンツ幅 (縦横率を指定)」、「全幅 (高さを指定)」のの2種類から選択できます。
スライダーの幅で「コンテンツ幅 (縦横率を指定)」を指定した場合
「スライダーの縦横比」、「スマートフォンでの表示」を設定します。
スライダーの縦横比
このブロック全体の表示縦横比を「シネスコ (2.35:1)」、「テレビ (16:9)」のいずれかから選択します。
＊カッコ内は、「横幅 : 縦幅」の比率を表します。
スマートフォンでの表示
スマートフォンでどのようにスライダーを表示するかを選択します。
なお、スマートフォンでの表示確認は編集画面では行えません。
「幅に合わせて縮小」を選んだ場合には、スマートフォンの画面幅と「スライダーの縦横比」で選択した値に応じて、スライダーの縦幅と横幅が決まります。
「正方形に変更」を選んだ場合には、「スライダーの縦横比」で選択した値に関係なく、スマートフォンの画面幅がスライダーの縦幅、かつ横幅になります。
スライダーの幅で「全幅 (高さを指定)」を指定した場合
「スライダーの高さ(px)」で、PC向け、スマートフォン向けのそれぞれの高さを設定します。
スライダーの高さ(px)
PC向け、スマートフォン向けのそれぞれの高さを数値(ピクセル数)で設定します。
切り替え時間 (ミリ秒)
登録したスライド画像の切り替わる時間を数値(ミリ秒単位)で設定します。
＊1000ミリ秒は、1秒です。
3.2. スライド設定
表示するスライド画像を5枚までアップロード出来ます。また、各スライド画像の見せ方、画像の上に表示出来るキャプションを設定できます。
初期状態では1スライド分の設定しかありませんが、「スライドを追加」ボタンをクリックすると、設定パネルが下に追加されます。
なお、画像が設定されているスライドのみが表示されます。
画像
「画像を追加する」ボタンをクリックすると、スライド画像をアップロードできます。
アップロード完了後は、「画像を追加する」ボタンが非表示となり、アップロードした画像が縮小表示されます。
画像幅は1200px以上を推奨します。
画像の見せ方
スライダー表示枠とスライド画像の縦横比率が違う時の扱いを「隙間が出ない事を優先」、「画像全体を見せる事を優先」のどちらかから設定します。
なお、スライダー表示枠とスライド画像の縦横比率が一致する場合には、以下の設定は表示に違いをもたらしません。
「隙間が出ない事を優先」を選択した場合
スライダーの表示に隙間が出来ないように、スライド画像を自動的に拡大表示します。
「画像全体を見せる事を優先」を選択した場合
スライダーの表示に隙間が出来てしまいますが、スライド画像全体を見せることが出来ます。
キャプション
スライダー画像の上に表示出来るキャプションを設定できます。
「無し」を選択した場合、キャプションは表示されません。
「左側」、もしくは「右側」を選択した場合、「タイトル」、「テキスト」、「文字の色と背景色」の設定が追加で表示され、キャプションの表示内容を設定出来ます。
タイトル
キャプションのタイトルを設定します。入力した場合にだけ表示されます。
テキスト
キャプションのテキストを設定します。入力した場合にだけ表示されます。
文字サイズ（デスクトップ）、文字サイズ（モバイル）
タイトル、テキストの文字サイズを設定します。
デスクトップ表示、モバイル表示それぞれ調整可能です。
文字の色と背景色
キャプションの表示スタイルを設定します。
「白地に黒文字」を選択すると、白い半透明のボックスの上にタイトルとテキストが黒い文字で表示され、「黒地に白文字」を選択すると、黒い半透明のボックスの上にタイトルとテキストが白い文字で表示されます。
リンク先
スライドをクリックした時に遷移するURLを設定します。