【カラムブロック】各カラム内に配置したボタンの縦位置を揃える方法（カスタムCSS使用）
カラムブロックを使うと2列以上に並んだコンテンツの作成が可能です。
例えばこのような感じ・・・
お店や会社のサイトでよく見るコンテンツですよね。アピールブロックと呼んだりもするようですが。
カラムブロックを使えば簡単に作れるように思うのですが、困るのがボタンの位置です。画像とボタンの間にある文章の量が違うと、ボタンの位置が３つのカラム間で縦に揃わなくて不細工なんですね。
こんな風に・・・
各カラムの高さはカラムブロックが自動的に揃えてくれるのですが、カラム内に入っているコンテンツは上から順に詰めて表示されるので、こんなことになってしまいます。
でもCSSで整えれば次の通り、自動的に位置が揃います。
本記事では、カスタムCSSを使ってカラム内のボタンの位置を揃える方法について紹介します。
※本記事ではカラムブロックの操作方法は解説しません。カラムブロックの使い方については次の記事を参照ください。
https://web-children.com/2019/09/22/multi-column-layout-by-b...また、本記事ではカスタムCSSを使用します。カスタムCSSについては次の記事を参照ください。
手順概要
手順概要は次の３ステップです。
- カラムブロックでコンテンツをつくる
- カラムブロックにidを付与する
- カスタムCSSでスタイルを整える
手順詳細
カラムブロックでコンテンツ作成
Gutenberg（ブロックエディター）を開けて、カラムブロックでコンテンツを作成します。
- カラム数は３カラムで、横幅は均等とする
- 各カラム内にコンテンツを入力して作成
（上から画像ブロック、見出しブロック、段落ブロック、ボタンブロックを配置して入力） - 段落とボタンの間が詰まり過ぎならスペーサーブロックを入れる
（ただしスペーサーの高さはカラム間で揃えるように） - 画像と見出し、ボタンは中央揃えとする。段落は左配置または中央揃え（好みで）
- 各カラム内の背景色は好みでつける
当然ですが、ブロックエディター内でもボタンの位置は揃っていない状態です。
カラムブロックにidを付与する
カスタムCSSを適用するために、カラムにidを付与しておきます。
カラムブロック全体（個々のカラムではなく）を選択してから、画面右のパネル内の高度な設定を開けて、HTMLアンカーの中にid名を入力します。
今回はid名をpr-blockとしました。
クラス名を付与してカスタムCSSを適用してもよいのですが、今回はこのカラムのみに限定したいためにidにしました。
カスタムCSSでスタイルを整える
いっぺんにこのCSSを使います、と最終形を紹介してもよいのですが、各CSSの効果を確認するためにステップを踏んで解説します。
まずは、CSS適用前の状態の確認をしておきます。作成したカラムブロックをweb表示させると次の通りです。
パディングで余白を整える
コンテンツが余白なしで各カラム内に広がっているので、パディングをつけて整えます。ついでに枠線と角丸もつけて見映えよくします。
カラムブロックの各カラムにはclass="wp-block-column"が自動的に付与されているのでCSSは次の通りです。
#pr-block .wp-block-column {
border: solid 2px #704104;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 8px;
}CSSを適用すると次のような見映えに変わります。
各カラムにフレックスボックスを設定する
次に各カラムにフレックスボックスを適用します。
display: flex;でフレックスボックスをかけて、縦方向の並びを維持するためにflex-direction: column;とします。
#pr-block .wp-block-column {
display: flex;
flex-direction: column;
border: solid 2px #704104;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 8px;
}実はこの段階ではweb表示させても何も変化がありません。
ボタンにmargin-top: auto;をかける
この状態で、ボタンにmargin-top: auto;をかけます。標準のボタンブロックの場合はclass="wp-block-buttons"が自動付与されているので次のようになります。
#pr-block .wp-block-column {
display: flex;
flex-direction: column;
border: solid 2px #704104;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 8px;
}
#pr-block .wp-block-buttons {
margin-top: auto;
}これで次のようにボタンの上にmarginが自動的に調整され、ボタンの位置が揃います。
margin-top: auto; でもボタンの位置が揃わない場合
実はここで落とし穴があります。場合によってはボタンの位置が揃わない、ということがありえます。
カラムブロックの設定で、カラム全体や個々のカラムの垂直配置を設定してしまうと揃わないのです。
あるいは、いったんボタンの位置が揃っていても、あとからよかれと思って垂直配置の設定をしてしまうと、ボタンの位置は揃わなくなってしまいます。
これはカラムブロックで垂直配置の設定をすると、カラム全体および個々のカラムにフレックスボックスのデフォルト値から外れた設定がされてしまうからです。具体的にはカラム全体にはalign-itemsで垂直方向の揃え方を指定し、個々のカラムではalign-selfで個々の位置を指定してしまいます。
そこで、カラム全体にはalign-itemsのデフォルト値、個々のカラムにはalign-selfのデフォルト値を記述します。
（本来align-itemsのデフォルト値はnormalですが、今回の目的に応じてstretchとしておきます。normalで同じ動作にはなります）
カラム全体にはclass="wp-block-columns"が付与されているので次のようになります。
#pr-block.wp-block-columns {
align-items: stretch;
}
#pr-block .wp-block-column {
display: flex;
flex-direction: column;
align-self: auto;
border: solid 2px #704104;
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 8px;
}
#pr-block .wp-block-buttons {
margin-top: auto;
}以上がCSSの完成形です。これでカラムブロックの垂直配置の設定が無視されてボタンの縦位置が揃います。
次のまとめで、ボタンの位置が自動的に揃うための条件（考え方）を記述しておくので参考にしてください。
まとめ（ボタンを揃えるための考え方）
カラム内のボタンの位置を縦方向に揃えるためには、次の考え方でCSSを適用するとOKです。
- 個々のカラムにフレックスボックスを適用し（display: flex;）、方向は縦方向に揃うようにflex-direction: columnとする
- カラム全体にはalign-items: stretch;をかけて個々のカラムが縦いっぱいに自動的に伸びるようにしておく
（本来デフォルトではそうなっているが、明示的に記述しておく） - ②と同じ目的で、個々のカラムのalign-selfはautoとしておく
（これも本来デフォルトではauto設定だが、明示的に記述する） - ②③で自動的に縦に伸びるようになっている状態で、揃えたいボタンに自動マージンを付与する
（ボタンをカラム内の最下部に置きたい場合は、margin-top:auto;をかける。）
このように、自動的にボタンの位置が揃うためには、縦方向いっぱいに個々のカラムが自動的に広がっていることが条件となります。
