ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

【カラムブロック】各カラム内に配置したボタンの縦位置を揃える方法(カスタムCSS使用)

カラムブロックを使うと2列以上に並んだコンテンツの作成が可能です。

例えばこのような感じ・・・

アピールブロック事例

お店や会社のサイトでよく見るコンテンツですよね。アピールブロックと呼んだりもするようですが。

カラムブロックを使えば簡単に作れるように思うのですが、困るのがボタンの位置です。画像とボタンの間にある文章の量が違うと、ボタンの位置が3つのカラム間で縦に揃わなくて不細工なんですね。

こんな風に・・・

アピールブロックボタンが揃っていない事例

各カラムの高さはカラムブロックが自動的に揃えてくれるのですが、カラム内に入っているコンテンツは上から順に詰めて表示されるので、こんなことになってしまいます。

でもCSSで整えれば次の通り、自動的に位置が揃います。

アピールブロックボタンを揃えた事例

本記事では、カスタムCSSを使ってカラム内のボタンの位置を揃える方法について紹介します。

※本記事ではカラムブロックの操作方法は解説しません。カラムブロックの使い方については次の記事を参照ください。

また、本記事ではカスタムCSSを使用します。カスタムCSSについては次の記事を参照ください。

手順概要

手順概要は次の3ステップです。

  1. カラムブロックでコンテンツをつくる
  2. カラムブロックにidを付与する
  3. カスタムCSSでスタイルを整える

手順詳細

カラムブロックでコンテンツ作成

Gutenberg(ブロックエディター)を開けて、カラムブロックでコンテンツを作成します。

  • カラム数は3カラムで、横幅は均等とする
  • 各カラム内にコンテンツを入力して作成
    (上から画像ブロック、見出しブロック、段落ブロック、ボタンブロックを配置して入力)
  • 段落とボタンの間が詰まり過ぎならスペーサーブロックを入れる
    (ただしスペーサーの高さはカラム間で揃えるように)
  • 画像と見出し、ボタンは中央揃えとする。段落は左配置または中央揃え(好みで)
  • 各カラム内の背景色は好みでつける
Gutenberg画面でのカラムブロック
ブロックエディター画面のカラムブロック

当然ですが、ブロックエディター内でもボタンの位置は揃っていない状態です。

カラムブロックにidを付与する

カスタムCSSを適用するために、カラムにidを付与しておきます。

カラムブロック全体(個々のカラムではなく)を選択してから、画面右のパネル内の高度な設定を開けて、HTMLアンカーの中にid名を入力します。

今回はid名をpr-blockとしました。

id名を入力

クラス名を付与してカスタムCSSを適用してもよいのですが、今回はこのカラムのみに限定したいためにidにしました。

カスタムCSSでスタイルを整える

いっぺんにこのCSSを使います、と最終形を紹介してもよいのですが、各CSSの効果を確認するためにステップを踏んで解説します。

まずは、CSS適用前の状態の確認をしておきます。作成したカラムブロックをweb表示させると次の通りです。

CSS適用前のアピールブロック

パディングで余白を整える

コンテンツが余白なしで各カラム内に広がっているので、パディングをつけて整えます。ついでに枠線と角丸もつけて見映えよくします。

カラムブロックの各カラムにはclass="wp-block-column"が自動的に付与されているのでCSSは次の通りです。

#pr-block .wp-block-column {
	border: solid 2px #704104;
	padding: 1rem;
	margin-bottom: 1.5rem;
	border-radius: 8px;
}

CSSを適用すると次のような見映えに変わります。

padding適用後のアピールブロック

各カラムにフレックスボックスを設定する

次に各カラムにフレックスボックスを適用します。

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です。

  1. 個々のカラムにフレックスボックスを適用し(display: flex;)、方向は縦方向に揃うようにflex-direction: columnとする
  2. カラム全体にはalign-items: stretch;をかけて個々のカラムが縦いっぱいに自動的に伸びるようにしておく
    (本来デフォルトではそうなっているが、明示的に記述しておく)
  3. ②と同じ目的で、個々のカラムのalign-selfはautoとしておく
    (これも本来デフォルトではauto設定だが、明示的に記述する)
  4. ②③で自動的に縦に伸びるようになっている状態で、揃えたいボタンに自動マージンを付与する
    (ボタンをカラム内の最下部に置きたい場合は、margin-top:auto;をかける。)

このように、自動的にボタンの位置が揃うためには、縦方向いっぱいに個々のカラムが自動的に広がっていることが条件となります

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる