2022.04.15WordPressで記事を編集する際、文章と関連画像を並べて配置したい場合があると思います。そんなときに役立つ画像と文章を横並びレイアウトにする方法を3つ紹介します。それぞれ手軽さや特徴に違いがありますが、3番目のカラムを使う方法は万能で汎用性が高く、当記事でもこの方法を使ってレイアウトしていますのでぜひ取り入れてみてください。左寄せ・右寄せの仕様とメリット/デメリット画像ブロックのツールバー項目「配置を変更」で左寄せ又は右寄せに指定した場合、CSSのfloatによる後続要素の回り込みが発生することで横並びレイアウトを実現できます。操作が単純なため比較的簡単に利用できますが、floatの挙動を把握していない場合は予期しないレイアウトになってしまう場合があります。回り込み解除するには工夫が必要この方法を使用した場合、横並びにしたくない要素まで回り込んでしまう場合はひと工夫必要になってきます。回り込み解除の具体的な方法については別の記事を参考にしてみてください。Gutenbergでの画像配置による回り込み解除:その1【WordPress】Wordpressにおいて現在標準のブロックエディタであるGutenbergで記事を編集する際、画像の配置位置による後続のブロックの回り込みを解除する方法について考えます。ブロックとブロックスタイルを使って画像の回り込み解除する方法を紹介します。「メディアとテキスト」ブロックの特徴メディアとテキストの配置は左右入れ替えることができます。画像サイズは選べますが実際に表示されるサイズは「メディアの幅」で指定した数値に依存します。メリット画像幅は%で指定するため、閲覧環境が異なる場合もディスプレイ幅と画像幅の比率は維持されます。「メディアと文章の設定」に「モバイルでは縦に並べる」という項目があり、これをオンにすることで容易にレスポンシブ対応もできます。テキスト部分の上揃え・中央揃え・下揃えが選択できます。デメリット「メディアの幅」の指定方法に%以外の単位が無いため、困る場面もあるかもしれません。「カラム」ブロックの特徴カラム内に様々なブロックを配置して横並びにでき、2カラム以上のレイアウトも実現できます。カラムで横並びにするメリットカラム幅は多くの単位が使えるため汎用性が高いです。標準でレスポンシブ対応しており、ディスプレイサイズに応じて縦並びで表示されます。大きなデメリットは感じません。補足この記事内で画像とテキストが横並びになっている箇所は「カラム」を使った方法でレイアウトしています。ウェブ倉庫.メニューホームウェブ制作ホビーお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。