MENU

【SWELL】コンテンツの背景色を白→好きな色に変更する

PR

【SWELL】コンテンツの背景色を白→好きな色に変更する

SWELLでは、カスタマイザーの設定で記事ページのメインエリアとサイドバーを白背景にすることができます。

サイトの背景を白以外にしている場合は、この設定をオンにした方が記事ページがより見やすくなって良いですよね。

ただし背景色が本当の真っ白（#fff）なので、サイトの雰囲気になんかちょっと合わないな～と感じる場合もあります。

背景が浮いて見える…

そこで今回はこの背景色を真っ白ではなく、好きな色に変更するカスタマイズをご紹介します！

とっても簡単＆サイトの雰囲気がガラッと変わるのでおすすめです。

カスタマイズ後はこんな感じ↓

※今回解説しているもの以外のカスタマイズも含んでいます

色はサイトの雰囲気に合わせてベージュにしてみましたが、お好みに応じて変更できます！

ついでに角丸が目立つバージョンも作ってみました。

より柔らかい印象に

管理人

現在このカスタマイズは当サイトでも使用しています！

CONTENTS

コンテンツの背景を白にする方法（事前準備）

まずは事前準備として、SWELLの設定でページコンテンツの背景を白にしていきます。

そもそも背景を白にできることを知らなかった！という方も参考にしてみてください。

カスタマイザー（カスタマイズ）＞サイト全体設定＞基本デザイン＞サイト全体の見た目＞コンテンツの背景を白にする

こちらをオンにすることで、白背景になります。

オフ

背景なし

オン

メインエリア（記事部分）とサイドバー両方に背景が付く

オン（メインエリアのみ）

メインエリアのみ背景が付き、サイドバーは背景なし

カスタマイズ方法

いよいよ背景色を好きな色に変更していきます。

やり方は以下のコードをカスタマイザー＞追加CSSにコピペするだけ。

.-frame-on .l-mainContent {
  background: #f9f9f4;
}

#sidebar .c-widget, #sidebar .p-profileBox {
  background: #f9f9f4 !important;
}
管理人

カラーコードはお好みに応じて変更してください

より角丸に

デフォルトでも微妙に角丸にはなっているのですが、よりカーブを付けた角丸に対応したバージョンです。

.-frame-on .l-mainContent {
  background: #f9f9f4;
  border-radius: 15px !important;
}

#sidebar .c-widget, #sidebar .p-profileBox {
  background: #f9f9f4 !important;
  border-radius: 15px !important;
}
管理人

カーブの丸みはborder-radiusの数値を調整することで変更できます。

最後に

以上です！超簡単！

こういった地味なカスタマイズも、サイトをおしゃれにする上では重要ですね。

ぜひやってみてください。

SWELLカスタマイズ
CONTENTS