【SWELL】サイドバーの横幅を変える方法

SWELLのサイドバーの横幅は決まっており、単純な設定だけでは変えることができません。しかし、サイトに合わせた横幅に変えたいケースは多々あります。

本記事は、2024/4/21時点（バージョン: 2.10.0）のSWELLを対象としています。

サイドバーの横幅

SWELLのサイドバーは、横幅約300px程度を基本としており、アフィリエイトの（300✕250）バナーなどがちょうどよく収まるサイズです。そのままでもすっきりしていますが、サイトによってあ若干幅広と思うこともあるかもしれませんね。

ここ数年流行っているデザインで、全体をフラットに魅せる大きさです。SWELLのセンスの良さが、ここでもよくわかりますね。

サイドバーの横幅を変更する

SWELLのサイドバーの横幅を変更する場合は、CSS を用いて強制的に変更します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

以下の CSS を追加します（基本的にはコピペで OK です）。

.-sidebar-on #sidebar {
	width: 100px !important;
}

@media (min-width: 960px) {
	.-sidebar-on .l-mainContent {
		width: calc(100% - 100px - var(--swl-sidebar_margin));
	}
}

サイドバーの幅を変えたい場合は、上記の CSS の 100 数字の部分を適宜変えてください（２か所同時に変えてください）。

まとめ：サイドバーの横幅を変更する

SWELL でサイドバーの横幅を変更する場合は、CSS で強制指定します。

サイドバーだけではなく、メインコンテンツの横幅も合わせて変更が必要です。

おしゃれなサイトを作るコツを知りたい方は以下の記事を参照してください。