SWELL│CSSだけでスプリットレイアウトにする方法

SWELLの固定ページで、PCでは左に案内メニュー、右に本文を置くCSS例です。

ブログパーツをウィジェットに置き、ページ固有のCSSで配置を変更します。テーマ設定によって調整が必要な試作例です。

以下やり方です。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

SWELLをCSSだけでスプリットレイアウトにする方法

まず検証用の固定ページを作り、元のCSSとウィジェット配置を保存します。

ブログパーツを作成してウィジェットで表示。

対象ページのIDとウィジェットIDを確認してからCSSを調整します。

PCの左メニュー用のブログパーツを作成

PCの左側に表示するコンテンツを用意します。

作成したブログパーツを「外観 → ウィジェット」の「固定ページ上部」へ配置します。このウィジェット枠は他の固定ページにも表示され得るため、対象ページだけに出す条件を別途設定してください。CSSのページ指定は配置変更を限定するだけで、ウィジェットの出力自体は限定しません。

SWELLカスタマイズの設定

お好みで背景色等を設定しておきます。

またサイドバーは無しで設定しておきます。

対象ページのIDとウィジェットIDを確認してからCSSを調整します。

CSSの挿入と適用手順

以下のCSSを「外観 → カスタマイズ → 追加CSS」、または子テーマのstyle.cssに追加します。この例のpage-id-123は対象固定ページのbodyクラスへ、block-7は配置したウィジェットのIDへ変更します。番号を推測せず、公開HTMLを開発者ツールで確認してください。

確認した環境・未確認の点と戻し方

2026年10月21日にコードを見直しました。960px以上は左パネルを固定し、959px以下ではウィジェットを元の位置に表示します。左パネルの上端120pxは例なので、ヘッダーと管理バーに重ならない値へ調整してください。左パネルは長い場合に内部スクロールします。実SWELLへの導入・実端末・編集画面・プラグイン併用は未検証です。

設定を元に戻す場合は、ウィジェットに配置したブログパーツを削除し、追加したCSSを削除してください。カスタマイザーでサイドバーを非表示にした場合は元の設定へ戻します。

関連情報：カラムブロックのブレイクポイントを変更する方法、カラムの切り替え幅の比較。

以下のCSSを挿入しましょう。