WordPressカラムブロックを追加してボタンの位置を揃える
WordPressカラムブロックを追加してCSSでボタンの位置を揃える
WordPressのレイアウト機能のひとつであるブロックを利用して、見た目もおしゃれで、カッコイイ超クールなレイアウトを実現します。
今回は3列のカラムを見本として作りますが、実際には4列または2列のカラムを推奨します。
このカラムは、レスポンシブ対応なので、4列の場合、ブラウザの横幅サイズに応じて、4列 → 2列 → 1列と変化するので、4列または2列を推奨しています。
完成までの流れを説明
- カラムを2ブロック追加。カラム1つだと、操作がしにくいので2つ追加（1つ作成した後複製して3ブロックにします）
- 上から、画像、見出し、段落、リンクボタンの構成で作成します
- 完成したカラム（ブロック）を複製して、計3つ作ります
- 最初に作成した、2つの空のカラムのもう一つを削除。カラム（ブロック）操作は、癖があり、慣れる必要があるので、このような手順を踏んでいます
- 最初でも最後でも良いですが、カラムのボタンが不ぞろいなので、CSSでレイアウトとボタンの位置を整えます。WordPressのカスタマイズの「追加CSS」に、一番下にある、CSSソースをコピペします
- 完成
/* 横並びフレーム */
.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 横並びフレーム */