Wordpress

WordPressで画像と文字を横に並べる方法!

ワードプレスで画像と文字をきれいに横並びにする方法

今回はWordpressで画像と文字を横に並べる方法をお伝えします。

画像と文字がきれいに横に並んでいると、レイアウトとしてかっこいいですよね。
ただし横並びのレイアウトはパソコンだと見やすいですが、スマホだと画面が狭いので見にくいです。

この記事ではパソコンで見ると画像と文字が横に並び、スマホで見ると縦に並ぶ方法を解説します。
最後にNG例も紹介しますね。

パソコンで見ると横並び。

パソコンで見た図

スマホで見ると縦に並ぶ。

スマホで見た図

※この記事はグーテンベルクが対象です。

WordPressで画像と文字を横に並べる方法!

ブロックはカラムを選択する

管理画面でブロックを追加すると利用できるブロックが表示されます。

今回はその中からカラムを選択します。

ブロックの新規追加からカラムを選択

次に使いたいカラムの種類を選択します。今回は一番左。

カラムの種類を選択

すると下の画面が出てきます。

カラムの表示

左側に画像、右側に文章を入れます。

画像と文章を配置

更新してパソコンで見るときれいに横に並びます。

パソコンで見た図

スマホで見ると縦に並びます。

スマホで見た図

以上。ここからはNG例を紹介します。

NG例

メディアと文章を使った場合

ブロックの新規追加から、メディアと文章を使った場合

このように画像と文章を配置。

画像と文章を配置

更新して、パソコンで見ると問題なし。

パソコンで見た場合はきれい

ただ、スマホで見ても横に並ぶ。

スマホで見ても横並びになる

アラインレフトを使った場合

画像を配置してからアラインレフトを選択。

アラインレフトを使った場合

文字を入力。

文字を入力

更新してパソコンで見るとこうなる。

PCのレイアウトが崩れている図

スマホだと縦に並ぶ。

スマホで見た図

まとめ

画像は戦略を持ってきれいに配置するべし

+1ポイント

実はこの方法ってつい最近知りました。
しかも記事書いてる間にWordpressのバージョンが更新されて、カラムの種類が選択できるようになりました。

めちゃくちゃタイムリー。

WordPressの使い方はいろんな方が書いているので、検索するとたくさん出てきます。
ですが、まだまだ出てこない方法もあるので、そういうのって自分で試行錯誤するしかないんですよね。

いいやり方が見つかったら、またこのブログでお知らせしますね。

ABOUT ME
ひつじのラム
サイト訪問ありがとうございます! ひつじのラムは大阪府在住のブロガーです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA