ブロックエディター 「ギャラリー」の使い方を説明します

Wordpress

こんにちは。管理人の berry です。「berry105」のブログに訪れてくださいまして、ありがとうございます。

今回は、 Gutenbergブロック機能内にある一般ブロックの「ギャラリー」の紹介です。


Gutenberg ブロックエディターを使い始めました。

一般的なブロックエディターの使い方、cocoonのブロックエディター使用方法について、機能や設定についてご紹介します。


スポンサーリンク

一般ブロック内にある「ギャラリー」って?


ブロックエディターにある一般ブロック内 のギャラリーは、 記事内に画像のギャラリーを設置することができます。

設置した画像にリンク設定できるため、いろんな使い道ができるのではないかと思います。

ブログ内のコンテンツを画像形式で、カテゴリー別に紹介するとか、自分で作ったいくつかのサイトを紹介するなどです。

カラムで記事紹介という方法と似ているかと思いますが、違う点は画像のみが表示されるという点です。この特性を活かして、あらかじめ表示したい画像をカスタムしておきつつ、紹介するなど工夫することで、文字なしのシンプルな形でアピールしたいコンテンツを記事内に設定できるかと思います。


実際にギャラリーを設定してみました


当ブログで使わせてもらっているパソコンの画像をギャラリーで設定してみました。こんな感じです。


パソコンの画像ギャラリー



レスポンシブテスト表示。(おそらくスマホではこんな表示になるかと思います。)
1カラム表示になるのかな、と思っていたのですが、2カラムで表示されていますね。

画像の数が奇数の場合 パソコン画面は、上段が3カラムで、最後の段が2カラムとなり、スマホ画面は、上段が2カラムで、最後のみ1カラムの表示になるようです。


ギャラリーで設置した画像をスマホで表示した場合、画像数が奇数のパターン画像


パソコンのイラストギャラリー



レスポンシブテストでは、こう表示されました。(おそらくスマホ表示の場合、こうなります。)画像枚数が偶数の場合、パソコン画面では、通常 3カラムで表示されるみたいですね。
スマホでは、実際にまだ確認していませんが、レスポンシブテストで、2カラムで均一に表示されました。


ギャラリーで設置した画像をスマホで表示した場合、画像数が偶数のパターン画像


二種類のギャラリーを設定してみました。
このように、いくつものパターンのギャラリーを作って、コンテンツに設置できます。

…昔は、確かギャラリー機能はウィジットにしかありませんでした。当時一度使ってみたことがありましたが、正直使いこなすことなく、使用頻度がゼロに近かったかな?と思います(;^ω^)

ですが、今回は記事内に設置できるようになったため、使い道も広がりそうなので、使用頻度があがるかもしれない…と思いました。


記事内にギャラリーを設置する方法


それでは、記事内にギャラリーを設置する方法を紹介していきたいと思います。

1. 一般ブロック内にある「ギャラリー」をクリックします。

※ブロックメニューを開示する方法は、「段落」の記事を参考にしてください。


ブロックエディターの一般ブロックメニューのギャラリー機能ボタン場所の説明画像


2.下の画像が表示されます。今回は、メディアライブラリ(WordPress内に保存した画像)を使って、ギャラリー設置を紹介します。
ということで、赤枠のメディアライブラリをクリックします。


ギャラリーを記事内に設置するときに表示される画像


3.「ギャラリーを作成」という画面に移動するので、作成したいギャラリーの画像をここで選んでいきます。


Wordpress内の「ギャラリーを作成」の画面


4.
① 選択したい画像の右上にカーソルを当てると、✔が表示されるので、選んだ画像に✔を入れていきます。

② 画面左下の青いボタン「ギャラリーを作成」をクリックします。


Wordpress内の「ギャラリーを作成」の画面で、チェック場所と青いボタン場所を説明した画像


ギャラリーを編集という画面に移ります。ここでは、画像の並び替えなど行うことができます。問題がなければ、左下の青いボタン「ギャラリーを挿入」をクリックします。


Wordpress内の「ギャラリーを編集」の画面


上記通りに画像を選んだ場合、このように表示されます。



選んだ画像が4つの場合、パソコン画面では一段目が3カラムで二段目が1カラム表示になります。なんとなく、漫画のコマみたいですね(;^ω^)

4つ画像を選んだ場合、スマホ表示は下の画像のような表示(2カラム)になります。


ギャラリーの画像が4つの場合、スマホ表示を説明する画像


以上で、ブロックエディターの一般ブロック内にあるギャラリーの使い方と設置方法の紹介を終わります。


まとめ


ギャラリー機能を今回初めて触ったのですが、触るまで使い道あるのだろうか、とか?ギャラリーと画像機能の違いとは?みたいな勝手な印象しかなかったため、全く興味を持つことありませんでした。(;’∀’)

ですが、実際に使ってみると、かなり面白い機能であることに気づきました。
「自分はまだまだブロックエディターの機能の凄さに気づいていないのかもな~?」と、思いました。


スポンサーリンク


   にほんブログ村 ブログブログ ブログノウハウへ

Wordpress
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント