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

WordPressのブロックエディタでカラムを使っていると、「もう少し幅を絞って中央に寄せたい」「標準のままだと横に広がりすぎて読みにくい」と感じることはありませんか？

標準機能でも「幅広」や「全幅」は選べますが、「600pxくらいで中央寄せにしたい」といった細かい要望にはCSSが不可欠です。

今回は、特定のカラムだけに適用できる、汎用性の高いCSSカスタマイズをご紹介します。

CSSを追記する場所

まずは、以下のいずれかにコードを追記してください。初心者の方には、反映が確認しやすい「追加CSS」がおすすめです。

• 外観 ＞ カスタマイズ ＞ 追加CSS（手軽に試したい場合）
• 子テーマの style.css（サイト全体で管理したい場合）
• 各ページのカスタムCSS欄（そのページ限定で適用したい場合）

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

以下のコードをコピー＆ペーストしてください。
PCでは指定した幅に制限し、スマホでは自動的に横幅いっぱい（100%）に広がる設定にしています。

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

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

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

ブロックにクラスを適用する手順

CSSを記述しただけでは反映されません。調整したい「カラムブロック」にクラス名を紐付けます。

• 編集画面で、対象のカラム（一番外側の親ブロック）を選択します。
• 右サイドバーの 「高度な設定」 をクリック。
• 「追加CSSクラス」 の欄に、先ほど設定したクラス名を入力します。
  入力する文字：block-columns-custom（※ドットは不要です）

応用編：複数の幅を使い分けたい場合

「この記事は600pxだけど、別の記事では800pxにしたい」という場合は、以下のように数字を含めたクラス名を用意しておくと便利です。

• .custom-w600 { max-width: 600px; }
• .custom-w800 { max-width: 800px; }

まとめ

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