WordPressカラムブロックを追加してボタンの位置を揃える

WordPressカラムブロックを追加してCSSでボタンの位置を揃える

WordPressのレイアウト機能のひとつであるブロックを利用して、見た目もおしゃれで、カッコイイ超クールなレイアウトを実現します。

今回は3列のカラムを見本として作りますが、実際には4列または2列のカラムを推奨します。

このカラムは、レスポンシブ対応なので、4列の場合、ブラウザの横幅サイズに応じて、4列 → 2列 → 1列と変化するので、4列または2列を推奨しています。

完成までの流れを説明

  1. カラムを2ブロック追加。カラム1つだと、操作がしにくいので2つ追加(1つ作成した後複製して3ブロックにします)
  2. 上から、画像、見出し、段落、リンクボタンの構成で作成します
  3. 完成したカラム(ブロック)を複製して、計3つ作ります
  4. 最初に作成した、2つの空のカラムのもう一つを削除。カラム(ブロック)操作は、癖があり、慣れる必要があるので、このような手順を踏んでいます
  5. 最初でも最後でも良いですが、カラムのボタンが不ぞろいなので、CSSでレイアウトとボタンの位置を整えます。WordPressのカスタマイズの「追加CSS」に、一番下にある、CSSソースをコピペします
  6. 完成
/* 横並びフレーム */
.wp-block-button {
  font-weight: bold;
  text-align: center;
  margin: 0px 0px 30px 0px !important;
	width: 100%;
}
.wp-block-button a {
  color: #FFF !important;
	border-style: none !important;
  background: #bf1319 !important;
  font-size: 0.8em !important;
}
.wp-block-button a:hover  {
  color: #FFF !important;
	border-style: none !important;
	background-color: #000 !important;
	text-decoration: none;
  font-size: 0.8em !important;
}
.wp-block-column {
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.wp-block-column h5 {
  color: #000;
  line-height: 1.5em;
  font-size: 0.8em;
  font-weight: bold;
  text-align: left;
  margin: 0px 0px 0px 0px;
	width: 100%;
	border-style: none;
}
.wp-block-column p {
  margin: 0px 0px 10px 0px;
  line-height: 1.6em;
  font-size: 0.8em;
}
.wp-block-buttons {
  margin-top: auto;
	width: 100%;
}
.wp-block-buttons a {
	width: 100%;
}
.wp-block-spacer {
  margin: 0px 0px -20px 0px;
}
/* END 横並びフレーム */
/* 横並びフレーム */
.wp-block-columns {
	padding:0.0em;
	margin: 0.0em 0.0em 0.0em 0.0em;
	height: auto;
	width: 100%;
}
.wp-block-column {
	padding:0.5em !important;
	margin: 0.0em 0.0em 2.0em 0.0em;
	height: auto;
	text-align: left;
	border-radius: 0px;
	box-shadow: 3px 3px 0px #DDD;
	border: 1px solid #CCC;
  padding: 0px;
  display: flex;
  flex-direction: column;
	background-color: #FFF;
}
.wp-block-button {
  font-weight: normal;
  text-align: center;
  margin: 0px 0px 0px 0px !important;
	width: 100%;
}
.wp-block-button a {
  color: #FFF !important;
  background: #FF9900;
  font-size: 0.77em !important;
}
.wp-block-button a:hover  {
  color: #FFF !important;
	background-color: #FFCC00 !important;
  font-size: 0.77em !important;
}
.wp-block-column h5 {
  color: #000;
  line-height: 1.5em;
  font-size: 0.8em;
  font-weight: bold;
  text-align: left;
  margin: 0px 0px 0px 0px;
	width: 100%;
	border-style: none;
}
.wp-block-column p {
  margin: 0px 0px 0px 0px;
  line-height: 1.6em;
  font-size: 0.8em;
}
.wp-block-buttons {
  margin-top: auto;
	width: 100%;
}
.wp-block-buttons a {
	width: 100%;
  margin: 10px 0px 0px 0px;
}
/* END 横並びフレーム */