

Gutenbergで画像付きのブログを投稿したいんだけど、一個しか入らないんだ!
写真や画像を横並びにしたいってことだね?すごく簡単だよ!

Mixhostをインストールして、WordPressをインストールして、プラグインにグーテンベルグをインストールして・・・
ブログ作成において、ここまででもおなかいっぱいですが、記事の投稿でつまずいてしまうと、楽しくなくなってしまいますね。
今回はブロックエディターGutenberg(グーテンベルグ)で記事を作成するときに、画像を横並びにする方法をお伝えします。
1.Gutenbergで画像を横並びにする方法
グーテンベルグで画像を横並びにして記事を投稿したい場合、
記事を作成するのと同じ手順でブロックを分割し、そこに画像を挿入します。
画像を横並びにするためには、カラムを使う!
画像を入れる場所を決めたら、画面左上の+ボタンを押します。
デザインの項目から「カラム」を選択します。

カラムをクリックすると、以下のような画面が出てきます。
分割したいサイズを選択しましょう。


上の図は50/50を選んだ際のブロックパターンです。これで画像をいれる準備ができました。

おお~!これは色々応用できそうだ!
じゃあ、自分の手持ち画像から横並びにしてみよう!

2.手持ちの画像を横並びにする
先ほどの50/50にしたカラムの左側の+をクリック→「メディア」項目の中の「画像」を選択することで、
手持ちの画像を入れることができます。




やった!画像を横に並べることができた!
これを作りたかったのね・・・

ちなみに、ドラッグアンドドロップで直接画像を入れることもできます。
HTML形式の画像も、もちろん横並びに出来ます。
3.リンク先の画像を横並びにする
カラム上の+ボタンをクリックしたら、「ウィジェット」の「カスタムHTML」をクリック

下図の様に、HTML形式のリンクを貼り付けます。
プレビューをクリックすると、画像の表示も確認できます。


思ったより簡単だったよ。もっと色々試してみたいな!!
楽しいっていうのが一番大事だよね!


あれ?でもモバイルビューにしたら画像が縦になっちゃった!
そうだね。これはカラムの設定を変える必要があるよ。
カラムを選択して、右上のブロックを見てみて。



あ、「モバイルでは縦に並べる」になっている!
このチェックを外せば完了だよ!

スマホで画像を横並びに表示するには、「縦に並べる」チェックを外そう!
4.さいごに
いかがしたでしょうか。少しつまずいてしまいそうな操作ですが、
覚えてしまえば簡単にできそうですね。今後もWordpressに関する記事を投稿していきたいと思いますので、是非活用してくださいね。
【わずか1分】ワードプレスにGoogleアナリティクスを設置する方法 - LIFEOnline (geisha999.com)
色々と応用もできると思います。ブログ作りのお役に立てれば幸いです!