【WordPress】カラム幅を調整するCSSサンプル

WordPressのブログ記事や固定ページで、カラムを使ってレイアウトを組むと「幅のバランスを変えたい」と思うことはありませんか？
テーマやブロックエディタ標準の設定だけでは思い通りにならない場合、CSSを追加すれば柔軟に調整できます。

今回は、 特定のカラム幅を狭めたいときのCSSサンプル をご紹介します。

CSSを追記する場所

以下のいずれかにコードを追記します。

• 外観 ＞ カスタマイズ ＞ 追加CSS
• 子テーマの style.css
• SWELL を使用している場合：ページ下部の「カスタムCSS＆JS」内の「CSS用コード」でも可

カラム幅を調整するCSS例

以下のコードを追加します。
小さな画面（スマホなど）では横幅いっぱいに広がるよう、メディアクエリも入れています。

/* カラム幅を調整するカスタムクラス */
.block-columns-custom {
    max-width: 600px;
    margin: 0 auto;
}

/* スマホでは全幅にする */
@media screen and (max-width: 600px) {
    .block-columns-custom {
        max-width: 100%;
    }
}

※メディアクエリは SWELL のブレークポイントを例にしています。お使いのテーマに合わせて調整してください。

ブロックにクラスを追加する

狭めたいカラムブロックを選択し、 「高度な設定 ＞ 追加CSSクラス」 に次のクラス名を入力します。

block-columns-custom

これで、そのカラムだけ幅を制御できるようになります。

まとめ

カラム幅はを調整することで、デザインの自由度がぐっと広がります。
ちょっとしたレイアウトの工夫で、記事やページの見やすさが変わりますので、ぜひ活用してみてください。