【Gutenberg】スライドショーブロック

【Gutenberg】スライドショーブロック

イメージをスライドで表示できるブロックです。

スライド追加

ブロック特徴

記事編集画面でプレビュー

写真を追加し、オプションを設定したらプレビューすることができます。

スライドプレビュー

デバイスごと別の動き設定

サイトビルダーで設定したデバイスサイズに合わせて、スライドをデバイスごと別々の動きにすることができます。

SP:横スライド、TB:フェイド、PC:複数表示

スライドオプション解説

デバイス選択

選択したデバイスで表示する場合のオプションを選択できます。

自動スライド

自動でスライドが動きます。動くタイミングはスピードで指定した値(デフォルト3000(3秒))になります。

ループ

スライドを最後まで移動して再度次のスライドを見ると最初のスライドに戻ります。逆の場合も同じ動きになります。

矢印ボタン

前後移動の矢印ボタンを表示します。

ドットボタン

ドットナビゲーションを表示します。イメージを選択するとイメージドットナビゲーションになります。(※スライドにイメージがない場合は、ドットが表示されます。)

ドットナビゲーション
イメージナビゲーション

スライドタイプ

横スライドとフェイドを選択できます。

横スライド
フェイド

スピード

スライドのスピードを設定できます。(1000=1秒です。)

1000(1秒)
5000(5秒)

中央表示

左右に指定した余白を追加して、現在のスライドを真ん中に表示します。

複数表示

指定した分のスライドを一つの画面に表示します。

横幅固定

スライドを指定した横幅に固定することができます。通常はブロックの横幅と同じサイズになります。

横幅を200pxに設定

高さ固定

スライドの高さを設定できます。通常は現在表示している高さを自動で読み取り設定します。

設定は「CSS優先」「高さ固定」があります。

CSS優先

高さの指定がないため、CSSの設定がある場合その高さに合わせます。

各スライドの高さがバラバラの場合、一番高いスライドの高さが優先されます。

高さ固定

指定した値の高さに固定します。

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

【Gutenberg】広告スクリプトブロックのサムネイル

【Gutenberg】広告スクリプトブロック

Googleアドセンスなど、Javascriptコードで追加する広告を設置できるブロックです。広告スクリプトブロック広告

2021-08-08
【Gutenberg】ステップブロックのサムネイル

【Gutenberg】ステップブロック

利用流れなどに使えるステップブロックです。ステップブロックステップブロック例STEP1記事編集画面を開く新しい投稿もしく

2021-07-25
【Gutenberg】記事リストブロックのサムネイル

【Gutenberg】記事リストブロック

現在記事の関連記事や指定したカテゴリーorタグなどに属している記事を表示できるブロックです。記事リストブロック記事リスト

2021-07-25
【Gutenberg】目次ブロックのサムネイル

【Gutenberg】目次ブロック

記事内の見出しを自動で取得し目次を作成するブロックです。目次追加例ブロックの特徴目次デザイン目次のデザインは全部で3つあ

2021-05-16
サイトに「お問い合わせフォーム」を追加しよう!のサムネイル

サイトに「お問い合わせフォーム」を追加しよう!

DG-STYLEでは、テーマデフォルト機能として「お問い合わせフォーム」を追加することができます。サイトビルダーと同じ方

2021-03-01
【Gutenberg】サービスブロックのサムネイル

【Gutenberg】サービスブロック

サービスリストや社員紹介などで使える、写真付きカラムのブロックです。サービス追加ブロックの特徴カラム数は制限なしカラム追

2020-12-29
TOP