![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
この前教えてもらったカラムブロックを使ってブログを書いてみたよ!
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
さっそく実践しているのですね!
使い心地はどうですか?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
まだ慣れてなくて難しい部分もあるけど、横並びにできるっていいね!
でも画像をいっぱい並べるのがちょっと大変かも…。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
実は画像をもっと簡単に横並びにする方法があるんです。
それは、「ギャラリーブロック」を使う方法です!
今回は、ギャラリーブロックについて紹介します。
画像を横並びにするという機能はカラムブロックと似ているので、2つのブロックの違いについてわかりやすく解説していきます!
![](https://techkoya.com/wp/wp-content/uploads/2023/05/テクこやアイキャッチ20230519-1-300x169.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2023/05/テクこやアイキャッチ20230519-1-300x169.jpg)
↑カラムブロックの使い方も知っておくと、より違いがわかりやすくなります!
(カラムブロックの説明を読んでいない方にもわかるよう解説しています)
ギャラリーブロックとは
ギャラリーブロックは、複数の画像を横並びにして表示するためのブロックです。
このブロックを使えば、複数の画像を「簡単」「きれい」「シンプル」に並べることができます。
ワードプレスの編集画面では、ギャラリーブロックは以下のような説明になっています。
![ギャラリー
複数の画像をリッチなギャラリーで表示します。](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h25_47.png)
![ギャラリー
複数の画像をリッチなギャラリーで表示します。](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h25_47.png)
ギャラリーブロックを使えば、以下の様に画像を横並びにできます。
※スマートフォンの場合は縦並びになる場合があります
![猪鹿蝶の画像が横並び](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h39_28-1024x286.png)
![猪鹿蝶の画像が横並び](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h39_28-1024x286.png)
ギャラリーブロックの使い方
画像だけを横並びにするときは、ギャラリーブロックを使うととても便利です。
使い方も簡単で、画像ブロックやカラムブロックの使い方と似ています。
![](https://techkoya.com/wp/wp-content/uploads/2022/12/テクこやアイキャッチ1216-1-300x169.jpg)
![](https://techkoya.com/wp/wp-content/uploads/2022/12/テクこやアイキャッチ1216-1-300x169.jpg)
ギャラリーブロックの追加方法
![3通りの追加方法](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h45_58-1024x321.png)
![3通りの追加方法](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h45_58-1024x321.png)
ギャラリーブロックの追加方法は3種類あります。
どこから追加しても同じブロックが表示されますので、1番使いやすい方法で追加してください。
詳しい追加方法については、こちらをご覧ください。
※「見出し」を「ギャラリー」に置き換えてください。
![「アップロード」か「メディアライブラリ」を選択](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h55_03.png)
![「アップロード」か「メディアライブラリ」を選択](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_17h55_03.png)
新規画像を追加する場合は「アップロード」、
ワードプレスにすでに存在する画像を使用する場合は「メディアライブラリ」を選択します。
【アップロード】の場合
![Shiftを押しながら複数の画像を選択、開く](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_18h00_47.png)
![Shiftを押しながら複数の画像を選択、開く](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_18h00_47.png)
表示したい複数の画像を一気にアップロードすることができるため、アップロードしたいすべての画像を選択します。
【メディアライブラリ】の場合
![複数選択して「ギャラリーを作成」](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_18h08_23-1024x761.png)
![複数選択して「ギャラリーを作成」](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-01_18h08_23-1024x761.png)
ギャラリーブロックは、画像ブロックと違い複数の画像を選択することができます。
ギャラリーに追加したい画像を選択すると、各画像の右上にチェックマークと、画面の一番下にも選択中の画像が表示されます。
選択ができたら、右下の「ギャラリーを作成」をクリックします。
![必要があれば並び替えて、右下の「ギャラリーを挿入」をクリック](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_09h36_21-1024x756.png)
![必要があれば並び替えて、右下の「ギャラリーを挿入」をクリック](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_09h36_21-1024x756.png)
表示されている順番がそのまま反映されますが、上記の画面で画像をドラッグ&ドロップすることで、場所を入れ替えることができます。
場所を入れ替えたら(不要な方はそのままでOK)、右下の「ギャラリーを挿入」をクリックします。
![写真が3つ横並びで入った](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h29_15.png)
![写真が3つ横並びで入った](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h29_15.png)
アップロード、もしくはメディアライブラリから複数の画像が一度に追加できました。
ギャラリーの設定
ギャラリーでは、以下の設定ができます。
カラム数の変更
「カラムブロック」同様に、ギャラリーブロックでもカラム数(横並びにする画像の数)の変更ができます。
カラムの数は自由に変更できますが、今回は3カラム→2カラムにしてみます。
![横に3つから、上に2つと下に1つに変わった](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h49_351-1024x316.png)
![横に3つから、上に2つと下に1つに変わった](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h49_351-1024x316.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
カラムブロックのカラム数の変更とほぼ同じです♪
![リスト表示からギャラリーブロックを選択](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h55_12-1024x366.png)
![リスト表示からギャラリーブロックを選択](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_10h55_12-1024x366.png)
まず、ギャラリーブロック全体を選択します。
画像の周りをクリックしてもなかなか全体が選択できないので、左側にある「リスト表示」からギャラリーブロックを選択すると、スムーズに選択できます。
「リスト表示」からブロックを選択する方法について、詳しくはこちらをクリック!
![右側のパネルからカラム数を変更](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h02_59-1024x797.png)
![右側のパネルからカラム数を変更](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h02_59-1024x797.png)
右側にあるパネルを開いて、「ブロック」→「
今回は3つの画像を2カラムで表示しているので、上段は画像が2つ、下段は1つの画像が同じ幅で表示されました。
画像の切り抜き
画像の切り抜きは、ギャラリーの画像をきれいに表示するための重要な設定です。
画像の切り抜きを行うことで、「簡単」「きれい」「シンプル」に並べることができると言っても過言ではありません。
![](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h24_29-1024x222.png)
![](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h24_29-1024x222.png)
上の画像は、切り抜き「あり」と「なし」の画像を比較したものです。
切り抜きありだと、3つの画像が同じサイズできれいに並んでいるのがわかります。
しかし切り抜きなしだと、画像の元のサイズの影響を受けて表示されているため、一番左のシカの画像だけ大きくなっているのがわかります。
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
切り抜き「あり」の方が、見た目がきれいで好きかも
![右側のパネルから「画像の切り抜き」をクリックして切り替え](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h36_37-1024x388.png)
![右側のパネルから「画像の切り抜き」をクリックして切り替え](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_11h36_37-1024x388.png)
画像の切り替えも右側のパネルから行えます。1つ前に紹介した「カラム数」の下の項目です。
「画像の切り抜き」をオンにすることで、自動的にすべての画像の高さと幅のサイズが揃います。
逆に画像サイズを揃えたくない・元のサイズの違いを活かしたいなどの場合は、「画像の切り抜き」をオフにすることで、画像の切り抜きなしのサイズで表示できます。
画像の場所の入れ替え
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
「やっぱり画像の場所を入れ替えたい!」というときも簡単にできます!
画像を挿入する際に場所の入れ替えができましたが、挿入後もいつでも場所の入れ替えが可能です。
![シカとチョウの画像の場所を入れ替える](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h09_02.png)
![シカとチョウの画像の場所を入れ替える](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h09_02.png)
今回は、シカとチョウの画像を入れ替えてみましょう。
入れ替え方法は「カラムブロック」とほぼ同じです。
![左から
シカ、チョウ、イノシシ](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h11_37.png)
![左から
シカ、チョウ、イノシシ](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h11_37.png)
まず、移動したい画像をクリックします。
すると、上にブロックツールバーが表示されるので、移動したい方向の「< >」ボタンをクリックすると画像が移動します。
「< >」は移動できる方向だけ黒色で表示されて、クリックできます。
1回クリックで1回、というようにクリックした回数だけ移動します。
![左から
チョウ、シカ、イノシシ](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h18_42.png)
![左から
チョウ、シカ、イノシシ](https://techkoya.com/wp/wp-content/uploads/2023/06/2023-06-02_12h18_42.png)
カラムブロックとの違い
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/usagi-150x150.png)
「横並びにする」っていう点では、ギャラリーブロックもカラムブロックも同じだと思うんだけど、どう違うの?
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
![](https://techkoya.com/wp/wp-content/uploads/2022/02/fukidashi_sensei1-150x150.png)
一言で表すと、
「画像だけをきれいに横並びにしたいときは、ギャラリーブロック」
ですね。
ギャラリーブロックとカラムブロックの違いについて、表にまとめました。
ギャラリー | カラム | |
---|---|---|
挿入できるブロック | 画像 | すべて |
文字の挿入 | できない | できる |
複数画像を一度に挿入 | できる | できない |
画像の切り抜き | 簡単きれい | 難しい |
レイアウト | 横並び | 比較的自由 |
以上から、画像だけを何枚もきれいに横並びにしたいときには「ギャラリー」ブロックを、
画像と、文章などの他のブロックを横並びにしたいときには「カラム」ブロックを使用すると良いでしょう。
まとめ
今回は、ギャラリーブロックについて解説しました。
ギャラリーブロックは、画像だけを横並びにしたいときに最適なブロックです。
画像を何枚も表示したいときには、このブロックを使って簡単・きれいに並べましょう!
質問などあれば気軽に書き込んでくださいね♪