LoginSignup
1
1

More than 5 years have passed since last update.

Wordpress5 Gutenbergで画像を横並びに表示する

Posted at

概要

カラム機能を利用し、Wordpress5.0(Bebo)付属のGutenbergエディタ上でコードを書かずに画像を横並びにする方法を紹介します。
※なお幅の狭い画面だとレスポンシブによっては縦並びになります。

やり方

1.ホーム画面から新規追加を選択すると以下の画面に移ります。

スクリーンショット 2018-12-25 12.06.42.png

2.+ボタン(ブロック追加)→レイアウト要素→カラムを選択します。

スクリーンショット 2018-12-25 12.28.15.png

スクリーンショット 2018-12-25 12.07.16.png
スクリーンショット 2018-12-25 12.30.57.png

3.ブロックが横並びで利用できるようになりました。カラムで横に分割されたブロック内の+ボタン→一般ブロック→画像を選択します。今回はダミー画像を貼り付けてみました。

スクリーンショット 2018-12-25 12.30.57.png

スクリーンショット 2018-12-25 12.31.23.png

スクリーンショット 2018-12-25 12.10.57.png

4.以上の操作を行いプレビューで見ると画像が横並びで表示されます。※この画面の幅なら横並びですが幅が小さくなると縦並びになります。

スクリーンショット 2018-12-25 12.14.35.png

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1