WordPress│クラシックエディタでも使えるカラムを作成する方法

2023.08.132024.03.05

ブロックエディタならカラムブロックを使ってコンテンツを分けて表示することがよくあると思います。

しかしクラシックエディタの場合はその方法が使えません。

ということでHTMLとCSSだけで簡易のカラムを作成してみました。

サンプル

内容1

内容2

内容3

内容4

内容5

内容6

クラシックエディタでも使えるカラムを作成する方法

CSSのflexboxを使って制御するだけです。

HTML

<div class="column-container">
<div class="column">内容1</div>
<div class="column">内容2</div>
<div class="column">内容3</div>
<div class="column">内容4</div>
<div class="column">内容5</div>
<div class="column">内容6</div>
<!-- 必要に応じてさらにカラムを追加 -->
</div>

CSS

rootの部分で設定が変更できるようになっています。

初期設定は

599px以下で1カラム
600px以上で2カラム
960以上で3カラム

になるように設定。

:root {
    --columns-default: 1; /* デフォルトのカラム数 */
    --columns-medium: 2; /* 600px以上でのカラム数 */
    --columns-large: 3; /* 960px以上でのカラム数 */
    --gap-value: 10px; /* 間隔 */
}

.column-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap-value);
}

.column-container .column {
    flex: 0 0 calc(100% / var(--columns-default) - var(--gap-value));
    box-sizing: border-box;
    border: 1px solid #ccc; /* 枠線 */
    padding: 10px;
    text-align: center;
}

@media (min-width: 600px) {
    .column-container .column {
        flex: 0 0 calc(100% / var(--columns-medium) - var(--gap-value));
    }
}

@media (min-width: 960px) {
    .column-container .column {
        flex: 0 0 calc(100% / var(--columns-large) - (var(--columns-large) - 1) * var(--gap-value) / var(--columns-large));
    }
}

サンプル

検証で幅を変更しながら確認してみてください。

内容1

内容2

内容3

内容4

内容5

内容6

グリッドレイアウトを使った応用例

グリッドレイアウトを使うとブレイクポイントは指定はできませんが、似たような表現ができます。

※こちらの方がCSSの行数が少なくなります。

HTML

<div class="grid-column-container">
<div class="column">内容1</div>
<div class="column">内容2</div>
<div class="column">内容3</div>
<div class="column">内容4</div>
<div class="column">内容5</div>
<div class="column">内容6</div>
<!-- 必要に応じてさらにカラムを追加 -->
</div>

CSS

.grid-column-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px
}

.grid-column-container .column {
    box-sizing: border-box;
    border: 1px solid #ccc; /* 枠線 */
    padding: 10px;
    text-align: center;
}