![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/560204AC-D8CB-4EE7-BB4B-20584C4263C5-e1649903441959-150x150.png)
SWELLを意気込んで購入したものの
ぜんぜん活用できてないよ〜
と思ったのでSWELLのミニ勉強会を主催(自習)しました
今回はブログのカラーを変える方法を学びました
設定方法の画像も載せていますのでよかったらどうぞ〜
SWELLの特徴を見てみるSWELLの基本カラー設定方法
「基本カラー設定」でできること
- メインカラー(見出しの色など)
- テキストカラー(文章の色)
- リンクカラー(リンクの文字色)
- 背景色
「外観」→「カスタマイズ」を選択
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/2302F986-0638-41CE-8D3B-4E7EE61D66B9-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/2302F986-0638-41CE-8D3B-4E7EE61D66B9-1024x618.jpeg)
「サイト全体設定」を選択
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/A181C9D5-CCFC-4F0C-94B2-1633150F66F8-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/A181C9D5-CCFC-4F0C-94B2-1633150F66F8-1024x618.jpeg)
「基本カラー」を選択
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/2DF6E312-AF7E-4D12-A832-4E83317A0D4C-1024x619.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/2DF6E312-AF7E-4D12-A832-4E83317A0D4C-1024x619.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
あとは自分好みの色に変更するだけ!
実際にどこの色が変わるかみてみましょう!
メインカラーの変更
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/8143E1EF-D646-4AC1-8B16-0E5BE75ACCA6-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/8143E1EF-D646-4AC1-8B16-0E5BE75ACCA6-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/CDF67621-7797-4BCF-A26B-464F5D209915-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/CDF67621-7797-4BCF-A26B-464F5D209915-1024x617.jpeg)
メインカラーを変更すると変わるのはこちら↓
- 見出し
- カテゴリー
- ボーダーなどなど
テキストカラーの変更
テキストカラーは文字通り文章の色が変わります
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/45F5DD70-1E57-48F0-B0A4-1FD31E03A6E4-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/45F5DD70-1E57-48F0-B0A4-1FD31E03A6E4-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/69232F2A-4088-490A-99C5-B814A2852E07-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/69232F2A-4088-490A-99C5-B814A2852E07-1024x618.jpeg)
投稿を開くとこのように文章の色が変わっていますね
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/30CBA930-F3B1-4F67-928B-6A36F69AC153-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/30CBA930-F3B1-4F67-928B-6A36F69AC153-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/336CED44-B96A-431A-BFAC-58236EB58D3A-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/336CED44-B96A-431A-BFAC-58236EB58D3A-1024x617.jpeg)
リンクカラーの変更
リンクの色は決まっているものだと思っていたので
ここも設定できるのはびっくりしました
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/888C9A5F-5826-4029-A0A2-178793520DB1-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/888C9A5F-5826-4029-A0A2-178793520DB1-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/40720B88-8CD3-4670-8FD5-B34AFCA0D61F-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/40720B88-8CD3-4670-8FD5-B34AFCA0D61F-1024x616.jpeg)
背景色の変更
ずっと背景色を変えたかったので
ここで設定できるのか!と喜んでいました笑
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/9970A141-8BAB-4702-8DCA-E18123457CC2-1024x614.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/9970A141-8BAB-4702-8DCA-E18123457CC2-1024x614.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/DC9D2821-DF47-4C13-9A47-81FD84978E7F-1024x619.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/DC9D2821-DF47-4C13-9A47-81FD84978E7F-1024x619.jpeg)
ちなみに投稿ページもこのように背景色が変わります
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/BE123294-91E9-4A03-8514-43B6F559FB99-1024x615.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/BE123294-91E9-4A03-8514-43B6F559FB99-1024x615.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/6DD2E0A9-6772-4CAF-AF26-F9799165E997-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/6DD2E0A9-6772-4CAF-AF26-F9799165E997-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
自分の好きな色に変更できると
よりブログのやる気が上がりますね!
この設定を考えるだけでも
すごく楽しかったですよ〜
さて、基本カラーを設定してぶち当たったのが
背景色が変わるとテキストや画像が読みにくい問題です
次はそんな問題を解決する設定を紹介します
コンテンツの背景を白にする設定方法
先ほどと同じく「サイト全体設定」を選択
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/0FBFB1D9-6E0E-4046-AC8D-B479E3400638-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/0FBFB1D9-6E0E-4046-AC8D-B479E3400638-1024x618.jpeg)
「基本デザイン」を選択
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/F8F5131A-7794-45BB-8358-AC89E8B731EB-1024x615.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/F8F5131A-7794-45BB-8358-AC89E8B731EB-1024x615.jpeg)
「サイト全体の見た目」項目の
「コンテンツの背景を白にする」の基本設定では
「オフ」になっています
「オン」にしてみると投稿部分の背景が白くなりました
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/7449B1D3-898B-4B91-973D-736ACC66A66A-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/7449B1D3-898B-4B91-973D-736ACC66A66A-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/DF66CEA4-0D16-45B0-83A0-DEE0CF63D901-1024x617.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/DF66CEA4-0D16-45B0-83A0-DEE0CF63D901-1024x617.jpeg)
ちなみに投稿ページもこのように「オン」すると背景が白くなります
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/18A17DD7-282B-42CC-8E6C-276CF6FB050F-1024x619.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/18A17DD7-282B-42CC-8E6C-276CF6FB050F-1024x619.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/AF074880-2F5B-4E72-9B76-D406EC388053-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/AF074880-2F5B-4E72-9B76-D406EC388053-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/511C95B3-C579-404A-88AB-3BB513D581BE-e1649902698593-150x150.png)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/511C95B3-C579-404A-88AB-3BB513D581BE-e1649902698593-150x150.png)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/511C95B3-C579-404A-88AB-3BB513D581BE-e1649902698593-150x150.png)
もともと白背景で投稿を作っていたので
とっても読みやすくなりましたね!
さらに設定をいじった結果、私は以下のようにしました
- 「コンテンツの背景を白にする」→「オン」
- その下の「どのページに適用するか」→「投稿ページのみ」にする
すると、メインページの背景は白くならず
投稿ページだけ白くなるので好みに合わせて設定してみてくださいね!
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/5158E8CA-23DA-454F-B5E4-9D148C3F6ACC-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/5158E8CA-23DA-454F-B5E4-9D148C3F6ACC-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/AD0720A1-C5CB-4590-A183-7A9C5B05B33A-1024x615.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/AD0720A1-C5CB-4590-A183-7A9C5B05B33A-1024x615.jpeg)
おまけ「全体の質感」設定
今まで設定していた「コンテンツの背景を白にする」の上の項目に
「全体の質感」があります
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/04/7698AB2D-A743-4D56-92A1-440B4A315559-e1649161005847-150x150.jpeg)
ここを設定すると柔らかい印象のブログができますよ
これらを変更した結果がこちらです
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/D03DC362-2BA6-4442-B460-E61A5A067B7D-1024x615.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/D03DC362-2BA6-4442-B460-E61A5A067B7D-1024x615.jpeg)
「全体をフラットにする」→チェックを入れると影がなくなりました
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/1A3253CE-7538-4027-AD6C-1677017A7F25-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/1A3253CE-7538-4027-AD6C-1677017A7F25-1024x616.jpeg)
「全体に丸みをもたせる」→チェックを入れると角に丸みができました
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/F1EA0B73-447A-4F88-A2E6-6029C045F9BF-1024x616.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/F1EA0B73-447A-4F88-A2E6-6029C045F9BF-1024x616.jpeg)
「全体をフラットにする」と「全体に丸みをもたせる」→両方にチェックを入れると画像の通り
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/A6A11A22-0E28-4513-A465-02E3FC5FD8B7-1024x618.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/A6A11A22-0E28-4513-A465-02E3FC5FD8B7-1024x618.jpeg)
パターンを試した結果、以下の設定にしました
- 「全体をフラットにする」→チェックなし
- 「全体に丸みをもたせる」→チェックあり
設定後のブログ
以上の設定完了後がこちら〜
変更前の画像を撮り忘れたのでビフォーアフターの比較ができませんが
かなり理想に近いデザインにすることができました!
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/43B584C1-282C-478D-9425-876536870949-1024x570.jpeg)
![](https://takosanwakuwakublog.com/wp-content/uploads/2022/05/43B584C1-282C-478D-9425-876536870949-1024x570.jpeg)
時間があるときに設定してみると楽しいですよ〜
またSWELLの設定がわかったら更新しますので
よかったら覗きにきてくださいね!
ではまた!
SWELLの購入はこちら
コメント