広告：ページ内にてアフィリエイト広告を利用しています。
WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。
左右の高さが合わない例
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（右）
上記サンプルでは、カラムブロックの中のコンテンツについてグループ化して背景色を設定していますが、普通に作ると左右の高さが異なって表示されてしまいます。
本記事では、
カラム・リッチカラムブロックで高さを揃える方法を解説します。
レイアウト大事ですねっ！
左右の高さを揃えたサンプル
サンプル
左右の高さを揃えたサンプルです。多様なパターンでもそろえることが可能です。
グループの高さを揃えた例
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（右）
キャプションボックスの高さを揃えた例
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（右）
左右の高さを揃える方法
方法
左右の高さを揃る方法です。多様なパターンでもそろえることが可能です。
グループで囲った部分で高さを揃える方法
サンプル
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（右）
左右のカラム両方とも同じ対応をします。
- カラム内のブロックを選択してグループ化する
- 必要に応じてグループに背景色をつける
- グループの「追加CSSクラス」に任意のクラス名（例：myColumn）を設定する
左右両方のカラムにて同じ設定（同じクラス名）を入れます。
WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。
- CSSを設定する
設定するCSSは下記です。
.myColumn{
height : 100%;
}- 「height」に 100% を設定して高さを揃えます
「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。
キャプションボックスで高さを揃える方法
SWELLでは「キャプションボックス」ブロックという使い勝手の良いボックス表現のブロックがあります。カラムブロックや立地カラムブロックとの相性がよく使えます。こちらで高さを揃える方法です。
サンプル
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（左）
カラムの例（右）
左右のカラム両方とも同じ対応をします。
- キャプションボックスの「追加CSSクラス」に任意のクラス名（例：myColumnCaptionBox）を設定する
WordPressの管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。
- CSSを設定する
設定するCSSは下記です。
.myColumnCaptionBox {
height : 100%;
}
.myColumnCaptionBox .cap_box_content{
height : 100%;
}- キャプションボックス全体およびコンテンツ部分を 100% に設定します
「追加CSS」はサイト内で共有になるので、記事内の他ブロックや、他記事で同じように高さを揃えたい場合は、対象のブロックにクラス名を設定するだけで反映されます。
まとめ：カラムブロック・リッチカラムで左右の高さを揃える方法
まとめ
WordPress の「カラム」ブロック、SWELLの「リッチカラム」ブロックは左右にカラムを分けられる便利なブロックです。ただし、中にコンテンツを配置した場合、左右の高さが揃わず若干見た目が悪くなります。
本記事では、カラム・リッチカラムブロックで高さを揃える方法を解説しました。
- グループまたはキャプションブロックにクラス名を設定する
- CSSで高さを100%に設定する
おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。
素敵なサイトを作ってくださいね！
SWELL の利用方法などについてココナラにて「支援作業」を販売しております。
よかったらご利用くださいませ。
一番上に戻る（Back to the initial position on click.）
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。
