Gutenberg(グーテンベルク)で記事の画像を横並びにしたい!

2022-08-08

ブロックエディタで画像を横並びにする
うさぎさん

Gutenbergで画像付きのブログを投稿したいんだけど、一個しか入らないんだ!

写真や画像を横並びにしたいってことだね?すごく簡単だよ!

管理人

Mixhostをインストールして、WordPressをインストールして、プラグインにグーテンベルグをインストールして・・・

ブログ作成において、ここまででもおなかいっぱいですが、記事の投稿でつまずいてしまうと、楽しくなくなってしまいますね。

今回はブロックエディターGutenberg(グーテンベルグ)で記事を作成するときに、画像を横並びにする方法をお伝えします。

1.Gutenbergで画像を横並びにする方法

グーテンベルグで画像を横並びにして記事を投稿したい場合、

記事を作成するのと同じ手順でブロックを分割し、そこに画像を挿入します。

画像を横並びにするためには、カラムを使う!

画像を入れる場所を決めたら、画面左上の+ボタンを押します。

デザインの項目から「カラム」を選択します。

ブロックエディタで画像を横並びにする

カラムをクリックすると、以下のような画面が出てきます。

分割したいサイズを選択しましょう。

ブロックエディタで画像を横並びにする
ブロックエディタで画像を横並びにする

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

うさぎさん

おお~!これは色々応用できそうだ!

じゃあ、自分の手持ち画像から横並びにしてみよう!

管理人

2.手持ちの画像を横並びにする

先ほどの50/50にしたカラムの左側の+をクリック→「メディア」項目の中の「画像」を選択することで、

手持ちの画像を入れることができます。

ブロックエディタで画像を横並びにする
ブロックエディタで画像を横並びにする
ブロックエディタで画像を横並びにする
うさぎさん

やった!画像を横に並べることができた!

これを作りたかったのね・・・

管理人

ちなみに、ドラッグアンドドロップで直接画像を入れることもできます。

HTML形式の画像も、もちろん横並びに出来ます。

3.リンク先の画像を横並びにする

カラム上の+ボタンをクリックしたら、「ウィジェット」の「カスタムHTML」をクリック

ブロックエディタで画像を横並びにする

下図の様に、HTML形式のリンクを貼り付けます。

プレビューをクリックすると、画像の表示も確認できます。

うさぎさん

思ったより簡単だったよ。もっと色々試してみたいな!!

楽しいっていうのが一番大事だよね!

管理人
うさぎさん

あれ?でもモバイルビューにしたら画像が縦になっちゃった!

そうだね。これはカラムの設定を変える必要があるよ。

カラムを選択して、右上のブロックを見てみて。

管理人
ブロックエディタで画像を横並びにする
うさぎさん

あ、「モバイルでは縦に並べる」になっている!

このチェックを外せば完了だよ!

管理人

スマホで画像を横並びに表示するには、「縦に並べる」チェックを外そう!

4.さいごに

いかがしたでしょうか。少しつまずいてしまいそうな操作ですが、

覚えてしまえば簡単にできそうですね。今後もWordpressに関する記事を投稿していきたいと思いますので、是非活用してくださいね。

【わずか1分】ワードプレスにGoogleアナリティクスを設置する方法 - LIFEOnline (geisha999.com)

色々と応用もできると思います。ブログ作りのお役に立てれば幸いです!

-記事一覧