WordPress

Jetpackブロックのスライドショーやギャラリーは従来のものとどう違うのか

WordPress5.0以降ブロックエディタが使えるようになって、Jetpackのギャラリー機能が、Jetpackブロックとして定義されました。一方で従来通り、クラシックエディタ上でメディアを追加ボタンからギャラリーを追加もできる(以下、旧式と略す)ので、どう違うのか比べてみました。

ざっくりまとめると、以下。
目次以下に実際のスライドショーとギャラリー、その設定方法についても書きました。

  • 見た目
    • スライド:デザインとフェードの効果が微妙に違います
    • ギャラリー:旧式もJetpackブロックもほぼ同じ
    • ギャラリー:キャプションを指定した場合は、旧式はホバー表示されるが、Jetpackブロックは表示されない(が、ホバーはモバイルフレンドリーではないという意見もあるのでキャプションなしでもよいのかもしれません)
  • 便利さ
    • Jetpackブロックの方が手数が少ない
    • jetpackブロックは、投稿画面上でプレビューできて便利

個人的に、スライドショーは旧式(クラシックエディタに挿入したものの見た目)の方が好みです。が、旧式を使ったことがない人であれば、Jetpackブロックを使った方がいい、というか便利です。旧式の場合は以下の2つの間違えやすい点があるので。

  • メディアライブラリーから画像を選択する際に左側のギャラリーを作成を選択した上で画像を選択するのが間違えやすい(ギャラリーを作成を選択し忘れる)
  • その次の、ギャラリーを編集の際に、ギャラリーの設定が複数あるのでどこを選択したらよいか最初は戸惑う(スライドショーであれば、タイプをスライドショーに、リンク先をなしorなんらかのリンクに設定するだけなのだけど)
ギャラリーの設定の初期値

1.スライドショー

1-1.クラシックエディタの中に

スライドショーには JavaScript が必要です。

1-2.Jetpackブロック
1-3.Jetpackスライドショー設定方法

※スライドショーで使う画像はすでにアップロード済みとします

1-3-1.クラシックエディタの場合

①クラシックエディタのツールバーよりメディアをクリック

②以下を指定
・左側より「ギャラリーを作成」を選択
・使用する画像を選択
・右下の「ギャラリーを作成」をクリック

③以下を指定する
・キャプションがあれば指定する
・右側ギャラリーの設定でタイプをスライドショーにする
・リンク先があれば指定する、不要であればなしにする
・右下「ギャラリーを挿入」をクリック

旧式の場合は、以下の図のように投稿エディタ中でプレビューされないのでぱっと見何を設定したのかわかりません。

1-3-2.Jetpackブロックの場合
①JetpackブロックからSlideshowを選択する

②メディアライブラリボタンをクリック

③以下を指定
・スライド表示させる画像を選択する
・右下の「ギャラリーを作成」をクリック

④キャプションがあれば記載し、「ギャラリーを挿入」をクリック

なお、Jetpackブロックのスライドショーの場合は、初期値が自動スライドなしになっています。自動スライドにしたい場合は、上記のギャラリーを挿入を終えた後に、以下の⑤を行います。

⑤スライドのAutoplay、秒数、イフェクト(スライドorフェード)を指定する

2.タイルモザイク

2-1.クラシックエディタ
2-2.Jetpackブロック
2-3.設定方法

スライドショーではなく、画像ギャラリーの場合は、クラシックエディタ内の旧式で5種類(サムネイルグリッド、タイルモザイク、正方形タイル、丸型、タイルカラム)、Jetpackブロックで4種類(Tiled mosaic、Circles、Square tiles、Tiles Columns)あるのですが、以下はタイルモザイクの場合について書きます。

また、キャプションも付けてあります。

2-3-1.クラシックエディタ
①クラシックエディタのツールバーより「メディアを追加」をクリック

 

②以下を指定
・左側より「ギャラリーを作成」を選択
・画像を選択
・右下「ギャラリーを作成」をクリック

 

③以下を指定する
・キャプションがあれば指定する
・右側ギャラリーの設定でタイプをタイルモザイクにする
・リンク先があれば指定する、不要であればなしにする
・右下「ギャラリーを挿入」をクリック
2-3-3.Jetpackブロック
①Jetpackブロックより、Tiled Galleryを選択する

 

②メディアライブラリをクリック

 

③以下を指定
・表示させる画像を選択する
・右下の「ギャラリーを作成」をクリック

 

④キャプションがあれば記載し、「ギャラリーを挿入」をクリック

3.参照情報

3-1.Jetpack情報

Jetpackブロック

https://jetpack.com/support/jetpack-blocks/

https://jetpack.com/support/jetpack-blocks/tiled-gallery-block/

旧式の場合のタイルギャラリー

https://jetpack.com/support/tiled-galleries/

3-2.Jetpackについての関連記事

旧式のJetpackギャラリーの詳しい使い方はこちら

画像が多い投稿の場合はJetpackのスライドショーやギャラリー表示が便利