SWELLの設定に コンテンツの背景を白にする の項目があります。
これを設定すると トップページや投稿画面のメインとなる部分の背景を白色にすることができます。厳密には、4つのパターンで設定できるようです(後述します)。
設定をONにすると、例えば、以下のような形になります。
「トップページ」のコンテンツ背景が白の状態
![](https://masa-a.com/wp/wp-content/uploads/2021/05/2021-06-27_top.png)
「投稿ページ」のコンテンツ背景が白の状態
![](https://masa-a.com/wp/wp-content/uploads/2021/06/2021-06-27_post.png)
![](https://masa-a.com/wp/wp-content/uploads/2021/05/question_head_girl.png)
えっと
白 にしかできないの?
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
今の所、白にしか出来ませんが、
CSSを触ることで
白 以外にも一応出来ますよ。
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
SWELL公式フォーラムでもこの件に関するトピックがあります。
![](https://u.swell-theme.com/wp-content/uploads/2019/07/forum_banner03.png)
![](https://masa-a.com/wp/wp-content/uploads/2021/03/necchusyou_face_girl2.jpg)
白以外にするにはCSS使わないといけないの??
実はイマイチよくわかってないんですけど、、、
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
もしかしたら開発者が
今後、改善してくれる可能性もあります。
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
でも、「今すぐ、必ず改善してくれる」とは限らないので、
急ぎの場合は、本を見て学習したり、ネットで調べるなどして設定すると良いと思います。
ちなみに、Web系の仕事を考えているならCSSが使えることは必須だと思います。
![](https://masa-a.com/wp/wp-content/uploads/2020/12/pose_syourai_man2.png)
以下の本を見て勉強しようかな?
ココナラみたいなのを使って他の人にカスタマイズしてもらうのも良いかも?
![](https://masa-a.com/wp/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
また、以前はこの設定をオンすると
「投稿・固定ページ」が一緒に背景が変わってしまっていたので、
「投稿ページだけ白にしたい」ということが出来ませんでしたが、
これについても改善要望が出され、、、
![](https://u.swell-theme.com/wp-content/uploads/2019/07/forum_banner03.png)
![](https://masa-a.com/wp/wp-content/uploads/2020/12/ahiruguchi_man1.png)
この要望を受けて、今では機能が改善され、
以下のように、4つのパターンのどれかを選べるようになりました。
![](https://masa-a.com/wp/wp-content/uploads/2021/06/2021-06-27_17h04_49.png)
- 全てのページ
- 投稿ページのみ
- 固定ページのみ
- 投稿・固定ページ
ラジオボタンで、オンにすることで背景を白に出来ます。
![](https://swell-theme.com/wp-content/uploads/2019/04/thumb_design.png)
![](https://swell-theme.com/wp-content/uploads/2021/06/thumb-2-3-9.png)
なんのためにコンテンツの背景を白にするのか?
![](https://masa-a.com/wp/wp-content/uploads/2020/12/pose_syourai_man2.png)
これどんな効果があるんだろ?
これをどうするかは迷うところです。
この効果についてはどういった効果があるのかは現在調査中ですが、「メインとなる部分」と「そうではない部分」をわかりやすくするといったところででしょうか?
このブログでも、「最初は設定しなくても良いのではないか」と思い設定していませんでしたが、今は迷っているところです。
他のブログでも、よく見かけるデザインです。
![](https://masa-a.com/wp/wp-content/uploads/2020/12/pose_syourai_man2.png)
シェア的にはどうなんだろ?
「コンテンツ背景の色」を好みの色にするにはCSSのどこを触ればいいのか?
この「コンテンツの背景を白にする」をオン にして chromeの開発者ツールで調べてみると次のクラス?がありました
.-frame-on
というわかりやすい名前がついています。
多分これです。 これを変えれば、白以外にできると思います。
.-frame-on .l-mainContent {
background-color: (色指定); /*ここに自分の好きな色を設定する*/
}
.-frame-on-sidebar #sidebar .c-widget {
background-color: (色指定); /*ここに自分の好きな色を設定する*/
}
エディターのページも白くなるので、苦手な方は対策必要です。
2021年06月27日、この「コンテンツの背景を白にする」をオン にして試していたところ、投稿画面の背景も白くなりました。
一般的なエクセルやワードなどでは、背景が白なので、別に気にならないかもしれませんが、目を酷使している方の中には白い画面が苦手という方もおられると思います。
投稿画面の背景色も白以外に変更する場合は、CSSで設定する必要があります。
一応、長期的なSWELLの開発方針としては、投稿画面と実際の投稿結果がおなじになるように作ろうという方針のようなので、今後改善されていく可能性はありますが、フォーラムを覗いてみると課題がたくさんあるため、すぐに改善されないかもしれません。
設定の仕方がわからない方は、DMいただければ有償で対策を代理で講じる事はできかもしれません。