【SWELL】2カラム化 | 左側に固定サイドバーを設置するカスタマイズ方法

※2024年4月7日更新しました。

WordPressテーマSWELLで「2カラムデザインにしつつ、左側に固定メニュー」を表示するカスタマイズを実装してみました。

SWELLで制作した和風なサイト

→「和風なサイト」を開く

ブレイクポイントは1,100px。
PCなどで閲覧時には、上記画像の通り左側に固定メニューが表示される仕様です。

#PR #お仕事PR

WordPressテーマSWELLで和風のサイトを作ってみました。

テンプレートを編集せず、サイドバー固定式の2カラムデザインにアレンジ。

コメントに制作メモを続けます。https://t.co/zq05vtVAgq pic.twitter.com/j5gMoYR14Y

— かんた🌊SWELLマニア (@swell_mania) December 17, 2023

サンプルサイト

解説用にシンプルなサンプルサイトを用意しました↓

→サンプルサイトを開く

サンプルサイトの構成

【バージョン】

• WordPress：6.5.2

• SWELL：2.10.0

WordPress、テーマともに記事執筆時に利用可能な最新バージョンです。

カスタマイズの概要

サンプルサイトのカスタマイズではテンプレートの編集は一切していません。

クライアントに納品後、固定した左側部分を編集できるよう配慮しました。

例えば、ロゴ画像部分はカスタマイザーから変更できる仕様です↓

メニュー部分はグロナビです。

グロナビはメニューから編集できる仕様です↓

さらにブログパーツを使い、グロナビ部分をバナーリンクや、ボックスメニューなどに変更することもできます。


<ボックスメニュー>

【SWELL】サイドバーにボックスメニューを設定したサンプル

＜バナーリンク＞

サイドバーにバナーリンクでメニューを設定したサンプル

更新履歴

• 2024年4月　記事更新

• 2023年12月　記事公開

有料記事部分では、サンプルサイトの左サイドバー固定メニュー部分に使ったコードをシェアします。

＜対応しているメニュー＞

• テキストリンク

• バナーリンク

• ボックスメニュー

右側のコンテンツエリアに表示されるブロックに対しては、今後のWordPressやテーマのアプデでクラス名や仕様が変わることがあるため調整用のコードは書いていません。

レイアウトの構成上、右側のコンテンツエリアで記事コンテンツ幅以上の横幅に広がるブロックやそれらのブロックオプションを使う場合は、CSSの調整が必要になります（一例：フルワイドブロック、カバーブロック、全幅・幅広、背景固定などのブロックオプション）。

ブロックオプションなどを設定していない場合の表示は、次のページで確認できます。

・SWELLブロック


カスタマイズ時のトラブルシューティングのアプローチや、注意事項は別記事にまとめているのご購入前にご覧ください。

自分が仕事で利用するベース用のコードです。少しでもCSSの知識がある人だと、よりデザインをアレンジできて楽しめると思います！