ブログを続けるコツの一つは、自分好みのデザインになっているかも大切だと思っています。
デザインのカスタマイズは手間がかかりそう…と思っている方でも簡単に設定できるのが、WordPressの有料テーマ SWELL
です。私も SWELL を導入してから、いくつかの項目の設定と、本当にわずかなCSSを記述するだけで理想のブログデザインを作ることができました。
ここでは、私が実際に行ったカスタマイズの内容を詳しくお伝えします。
カラー設定はこれ！
SWELLのカラー設定は各所に散りばめられています。
エリアごとに配色できる自由度があるともいえますが、統一感を出したい場合はあれもこれも同じ色にしないといけないという煩わしさもあります。それでも項目が多すぎることはありませんので、一つひとつチェックしていきましょう。
サイト全体設計 ＞ 基本カラー
まずはサイト全体の基本カラーを設定しましょう。
ここで特に重要なのはメインカラーと背景色です。
メインカラー
SWELLでは見出しやボタンなどで使われます。
背景色と密接に関連しますので、単体で考えるのではなくバランスを見て決めましょう。（このサイトはオレンジ#f49340です）
背景色
メインコンテンツエリアの背景色なので、サイトの大半を占める色です。
極端ですが、サイト全体が黒っぽいか白っぽいかで印象は大きく変わりますよね。どういう印象にしたいかを考えて設定をしましょう。（このサイトではグレー#f0eeeeです）
配色の組み合わせに悩む場合は、下記のようなツールを試してみるのもアリです。
この色にしてみようかな…と思った色をセットすると、それにマッチする色が提案されます。
サイト全体設計 ＞ お知らせバー
お知らせバーを常設するかどうかによっても変わりますが、このサイトでは常設しています。
背景色とは異なる色を設定することで、ヘッダーとメインコンテンツの境界にもなって良い役割になっていると思います。
ここではメインカラーを軸に配色ツールから提案された茶色（#534439）にしました。
お知らせなので目立ってほしい領域ですが、サイト全体に馴染みつつ悪目立ちしない配色にできました。
ヘッダー / フッター
ヘッダーとフッターも個別に背景色の設定ができます。
私は色数を増やすのがあまり好みではないので、メインコンテンツと同じ色に設定しています。
CSSのカスタマイズは2箇所のみ！
Cocoonではカスタム用のCSSを多く設定していたので、これしか設定しなくて良いというのは驚きでした。それでは何をしているかを簡単に説明します。
記事内の行間を広げる
本文の行間はデフォルトだと1.8が指定されています。
それでも問題ないのですが、全体的にゆったりした印象にしたかったため少しだけ広げました。
もっと広くしたい / 狭くしたい場合は、お好みの状態になるまで数値を調整してみてください。
/*記事内の行間調整*/
.post_content{
line-height: 2;
}商品レビューブロックのボーダーを消す
管理画面で調整する箇所が見当たらなかったのですが、どこかにあるんですかね…？
商品レビューブロックには上辺に黒い2pxのボーダーが入っていますが、ブログの配色で黒は使っていませんので、ちょっと浮いてしまうのが気になりました。あまり効果的なラインには見えなかったので、いっそのこと削除してしまいました。
/*商品レビューブロックのボーダー削除*/
.swell-block-review__inner{
border-radius: 0;
border-top: none;
box-shadow: none;
}まとめ
SWELLの設定は、基本カラーやヘッダー・フッターの配色を少し工夫するだけで、簡単に自分好みのデザインを作れる点が魅力です。さらに、CSSのカスタマイズも最小限で済むため、これだけコピペしてもらえれば私と同じ設定にできます。
もし「もっとこうしたい！」というポイントがあれば、今回紹介した設定をベースにぜひご自身でアレンジしてみてください。これからブログを始める方やデザインに迷っている方にとって、この内容が少しでも参考になれば幸いです。
