今回はWordpressで画像と文字を横に並べる方法をお伝えします。
画像と文字がきれいに横に並んでいると、レイアウトとしてかっこいいですよね。
ただし横並びのレイアウトはパソコンだと見やすいですが、スマホだと画面が狭いので見にくいです。
この記事ではパソコンで見ると画像と文字が横に並び、スマホで見ると縦に並ぶ方法を解説します。
最後にNG例も紹介しますね。
パソコンで見ると横並び。
スマホで見ると縦に並ぶ。
※この記事はグーテンベルクが対象です。
WordPressで画像と文字を横に並べる方法！
ブロックはカラムを選択する
管理画面でブロックを追加すると利用できるブロックが表示されます。
今回はその中からカラムを選択します。
次に使いたいカラムの種類を選択します。今回は一番左。
すると下の画面が出てきます。
左側に画像、右側に文章を入れます。
更新してパソコンで見るときれいに横に並びます。
スマホで見ると縦に並びます。
以上。ここからはNG例を紹介します。
NG例
メディアと文章を使った場合
このように画像と文章を配置。
更新して、パソコンで見ると問題なし。
ただ、スマホで見ても横に並ぶ。
アラインレフトを使った場合
画像を配置してからアラインレフトを選択。
文字を入力。
更新してパソコンで見るとこうなる。
スマホだと縦に並ぶ。
まとめ
画像は戦略を持ってきれいに配置するべし
＋１ポイント
実はこの方法ってつい最近知りました。
しかも記事書いてる間にWordpressのバージョンが更新されて、カラムの種類が選択できるようになりました。
めちゃくちゃタイムリー。
WordPressの使い方はいろんな方が書いているので、検索するとたくさん出てきます。
ですが、まだまだ出てこない方法もあるので、そういうのって自分で試行錯誤するしかないんですよね。
いいやり方が見つかったら、またこのブログでお知らせしますね。
