サポートに戻る コンテンツとメディア ブロック スライドショーブロック

スライドショーブロック

このガイドでは、スライドショーブロックを使用して、インタラクティブな画像のスライドショーを投稿またはページに追加する方法を説明します。

サイトでは次のように表示されます。

スライドショーブロックを追加する

スライドショーブロックを追加するには、「+」ブロック挿入アイコンをクリックして「スライドショー」と検索します。これをクリックしてブロックを投稿または固定ページに追加します。

ブロックエディターの左上にある「+」ブロック挿入ボタンを使用して、スライドショーブロックを追加する方法を示すスクリーンショット。
新しいブロックを追加してスライドショーを検索します。

💡

キーボードを使用して新しい行に「/slideshow」 と入力して Enter キーを押すことで、新しいスライドショーブロックをすばやく追加することもできます。

メインエディター領域の新しいブロックに「/」と「slideshow」を入力し、スライドショーブロックを追加する方法を示すスクリーンショット。
新しいブロックに「/slideshow」と入力します。

詳細については、ブロックの追加に関する詳細な手順をご覧ください。

画像を追加する

最初にスライドショーブロックを追加する場合、「アップロード」「画像を選択」の2つのオプションが表示されます。

スライドショーブロックを使用して、メディアライブラリ、Google フォト、Pexels の無料写真、Openverse 画像から画像をアップロードまたは追加する方法の例。
スライドショーブロックで画像をアップロードまたは選択します。

「アップロード」オプションでは、コンピューターから新規の画像をサイトにアップロードできます。

「画像を選択」オプションでは、以前アップロードされたメディアライブラリの画像から選択するか、Google フォトPexels の無料写真Openverse 写真ライブラリから選べます。

さらに画像を追加する

作成したスライドショーの下にある「画像をアップロード」オプションを使用すれば、スライドショーにさらに画像を追加できます。

「画像をアップロード」オプションを使用して、スライドショーに画像を追加することを示すスクリーンショット。
スライドショーにさらに画像を追加します。

スライドショーを編集する

ツールバーの「スライドショーを編集」ボタンを使用して、画像を追加または削除したり、画像の表示順を変更したりできます。

スライドショーブロックツールバーの「スライドショーを編集」オプションのスクリーンショット。
ブロックツールバーの「スライドショーを編集」ボタン。

画像の順序を変更する

スライドショーの作成時に選択した順序で、画像がスライドショーに追加されます。「スライドショーを編集」オプションを使用して画像の順序を変更できます。スライドショーを編集するとき、選択した各画像の横に数字が表示されます。この数字は、スライドショーブロックに表示される画像の順番を示します。

スライドショーブロックで画像の順序を変更します。

ブロックツールバー

ブロックをクリックすると、ブロックの上に次のオプションのツールバーが表示されます。

スライドショーブロックツールバーを示すスクリーンショット。
スライドショーブロックツールバー

スライドショーブロックのツールバーには次のオプションがあります。

ブロック設定

ブロックをクリックすると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の ⚙️ (ギア / 歯車) アイコンをクリックして設定を表示させます。

右のサイドバーにあるスライドショーブロック設定のスクリーンショット。
⚙️ アイコンをクリックするとブロック設定が開く

スライドショーブロックには複数の設定があり、「ブロック設定」サイドバーで調整できます。

スライドショーブロック設定
自動再生

このオプションを有効にすると、スライドショーの画像の切り替えが自動的に行われるようになります。

有効にするとスライドショーに一時停止ボタンが表示され、読者がスライドショーを一時停止できます。自動切り替えのタイミング (秒単位) を選択することもできます。

切り替えのタイミングを設定するための、自動再生のトグルとスライドショーブロックの一時停止ボタンを示すスクリーンショット。
自動再生を有効にしたときの、スライドショーブロックの一時停止ボタン。
効果

「効果」タブでは、スライドを切り替える際の効果を「スライド」または「フェード」から選択できます。

スライドショーブロックの「スライド」および「フェード」の切り替え効果を示すスクリーンショット。
スライドショーブロックの切り替えの効果。
画像設定

「画像設定」タブでは、スライドショーブロックの画像サイズをポスター画像、中、大、フルサイズのオプションから選択できます。

スライドショーブロックの画像設定のスクリーンショット。
スライドショーブロックの画像サイズ。
高度な設定

高度な設定

高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。

高度な設定のセクションでブロックに CSS クラスを追加できます。
高度な設定のセクションでブロックに CSS クラスを追加できます。
Copied to clipboard!