WordPressでサイトを立ち上げて、テーマを入れた直後は「おお、けっこうきれいじゃないか」と思うものです。
けれど、しばらく記事を書いていると、ふとした瞬間に気づきます。
「ここ、もうちょっと色を変えたいな」「フォントの雰囲気を柔らかくできないかな」と。
テーマを丸ごと変えるのは面倒だし、今のテーマには愛着もある。
そんな時こそ、CSSでのカスタマイズが役に立ちます。
私は現在SWELLを使っていますが、その前は長らくCocoonを使っていました。
どちらも素晴らしいテーマで、Cocoonは無料とは思えないほど高機能、SWELLは有料だけあってデザイン性が高く、直感的に操作できます。
ただ、どちらを使っていても「あと少し」を自分の手で変えたくなる瞬間はやってきます。
この記事では、その欲求を叶えるCSSカスタマイズの中でも、すぐに試せて効果を感じやすいものを体験談と一緒に紹介します。
色を変えるだけで印象は一変する
サイトの第一印象は色で決まる、と言っても過言ではありません。
テーマのデフォルトカラーは万人向けに作られているため、悪くはないのですが「どこかで見たことある感じ」になりがちです。
Cocoonを使っていた頃、私はボタンの色をブランドカラーに合わせただけで「ここは〇〇のサイトだ」と認識してもらえるようになりました。
CSSで色を変えるのはとても簡単です。
カスタマイザーの「追加CSS」に以下のように書くだけで、ボタンの色が変わります。
button,
input[type="submit"] {
background-color: #ff7f50;
color: #ffffff;
}
このコードでは背景色をコーラルピンク、文字色を白に設定しています。
色のコードは好みに応じて変えればOKです。
春なら淡い桜色、夏はターコイズブルー、秋はこっくりしたオレンジ、冬は深いネイビーなど、季節感を出すのもおすすめです。
私は実際に季節ごとに色を変えており、そのたびに訪問者から「雰囲気が変わって新鮮」と言われます。
色選びのちょっとしたコツ
配色は自由ですが、やりすぎると全体がちぐはぐになります。
私も一度、好きな色を詰め込みすぎて見づらいサイトになったことがあります。
その反省から、今は「メインカラー1色＋サブカラー1色＋アクセント1色」の3色以内に絞っています。
メインカラーはブランドやテーマカラー、サブカラーは背景やサイドバーなど補助的な部分、アクセントカラーはリンクやボタンに使うとまとまりやすいです。
フォントを変えてサイトの空気感を作る
フォントは文章の「声色」です。どんなに同じ文章でも、フォントを変えるだけで印象が変わります。
Cocoonの標準フォントは読みやすい明朝体寄りですが、もう少し柔らかさがほしくてGoogle Fontsを導入したことがあります。
例えば、以下のコードで本文のフォントを変えられます。
body {
font-family: 'Noto Sans JP', sans-serif;
}
Noto Sans JPはすっきりしていて読みやすく、しかも無料。
フォント変更後は、アクセス解析で滞在時間が数秒伸びました。
小さな変化ですが、積み重なれば大きな差になります。
SWELLの場合はもともと洗練されたフォントが採用されていますが、見出しだけ手書き風フォントに変えるなど、部分的な変更も面白いです。
以前、見出しを筆記体にしてみたら、全体が雑誌っぽい雰囲気になり、SNSでのシェア率が少し上がったことがあります。
フォント選びの落とし穴
おしゃれなフォントほどクセがあります。本文全体に装飾的なフォントを使うと、長文では読みにくくなります。
私も一度やってしまい、記事の直帰率が上がった苦い経験があります。
それ以来、本文はシンプルで可読性の高いフォント、見出しやバナーなど短いテキスト部分に遊び心を出すようにしています。
ボタンの見た目を変えてクリック率を上げる
ボタンは訪問者がアクションを起こすための重要なパーツです。
見た目を少し変えるだけで、クリック率が上がることがあります。
Cocoon時代、ボタンの角を丸くして影をつけたら、クリック数が約10％増えました。
以下のCSSを追加すると、ボタンがふんわり浮いたような見た目になります。
button,
input[type="submit"] {
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
button:hover,
input[type="submit"]:hover {
transform: translateY(-2px);
}
マウスを乗せたときにわずかに浮き上がるアニメーションは、人の注意を引きやすいです。
SWELLでもこのような動きを足すと、標準デザインに個性が加わります。
ボタンと心理効果
人は動きに反応する生き物です。
小さなアニメーションは無意識に「押してみようかな」という気持ちを引き出します。
ただし、派手すぎると逆効果になる場合もあります。
私は一度、ボタンを跳ねさせる動きを試しましたが、子供向けサイトのような印象になってしまい、すぐに元に戻しました。
余白を整えて見やすさを高める
意外と軽視されがちなのが余白です。
文字や画像の間隔が詰まりすぎていると、どれだけおしゃれな色やフォントを使っても読みにくくなります。
Cocoonを使っていた頃、見出しの上下の余白を少し広げたら、記事全体がスッキリして読みやすくなりました。
以下は見出しの余白を広げるCSSです。
h2 {
margin-top: 2em;
margin-bottom: 1em;
}
これだけで、見出しの存在感が増し、文章のまとまりも良く見えます。
SWELLでは初期設定でも余白が十分に取られていますが、自分の文章量や画像の配置に合わせて微調整すると、さらに心地よくなります。
余白の感覚をつかむ方法
画面全体を縮小して見て、息苦しさを感じる部分は余白が足りていないことが多いです。
逆にスカスカに感じる部分は詰めてもOK。
私は記事を書き終えたら、一度縮小表示で全体を眺めて調整しています。
季節やイベントごとのちょい足しカスタマイズ
CSSの面白いところは、短期間だけの変更も簡単にできることです。
私は季節ごとに色や背景画像を変える「ちょい足しカスタマイズ」をよくやります。
春は淡いピンクと花びらの背景、夏は青と白で涼しげに、秋は紅葉色、冬は雪の結晶など。
これをやると、リピーターから「次はどんなデザインかな」と楽しみにしてもらえます。
Cocoon時代はヘッダー画像を季節ごとに差し替え、SWELLでは背景やアクセントカラーを変えるようにしています。
作業はほんの数分ですが、サイトが生きているような印象を与えられます。
スマホ表示を意識したカスタマイズ
最近はサイト訪問者の半分以上がスマホからアクセスしてきます。
パソコンで見て「完璧！」と思っても、スマホで見ると文字が詰まりすぎていたり、画像がはみ出していたりすることがあります。
Cocoonを使っていた頃、スマホ表示を意識せず作業していて、ある日アクセス解析を見たら「スマホからの直帰率が異常に高い」ことに気づきました。
原因は単純で、ボタンやリンクが小さくて押しにくかったのです。
スマホだけデザインを変えるには、CSSのメディアクエリが役立ちます。
@media screen and (max-width: 768px) {
button,
input[type="submit"] {
padding: 12px 20px;
font-size: 16px;
}
}
このコードは、画面幅が768px以下（スマホや小さめのタブレット）の時だけ、ボタンを大きくして押しやすくしています。
SWELLでは元からスマホ向けの調整が細かくされているのですが、自分のサイト構成やボタン配置によっては、さらに余白やサイズを調整することで操作性が向上します。
私はこの調整を入れた後、スマホ経由の購入率が少し上がりました。
指で押しやすいかどうかは、意外と売上や問い合わせ件数に直結します。
見出しデザインを変えて記事の雰囲気を一新
見出しは文章の目印です。特にブログでは、見出しのデザイン次第で記事の読みやすさが大きく変わります。
Cocoonの見出しはシンプルで情報整理に向いていますが、私は途中から「もう少し華やかさがほしい」と感じて、CSSで装飾を加えました。
例えば、H2見出しに左側のラインと背景色をつけるCSSはこんな感じです。
h2 {
border-left: 5px solid #ff7f50;
background-color: #fff8f5;
padding: 0.5em 1em;
}
これだけで、記事全体が柔らかく親しみやすい雰囲気になります。
SWELLでは見出しデザインを管理画面から簡単に変えられますが、CSSでオリジナルの装飾を足すことで「このブログっぽさ」を演出できます。
以前、見出しにドットパターンの背景を入れたことがあり、その時はSNSで「見出しかわいい！」とコメントをもらいました。
見出し変更で気をつけたいこと
見出しは目立たせたい反面、派手すぎると本文よりも存在感が強くなってしまいます。
私も一度、見出しにグラデーションをかけて影をつけ、さらにアニメーションまで入れた結果、「見出ししか目に入らない」という失敗をしました。
結局、装飾はシンプルにして、色や形で差をつける程度に落ち着きました。
テーマごとの微妙なクセと付き合い方
同じCSSでも、テーマによって反映のされ方が違います。
CocoonとSWELLを両方使ってきて、そのクセを実感しました。
Cocoonはカスタマイズ性が高く、細かい部分までCSSが反映されやすいのが長所です。
ただし、その分、既存のスタイルが複雑で、思わぬところで意図しないデザインが出てくることもあります。
私はCocoonでリンク色を変えたら、なぜかサイドバーの一部も同じ色になり、見づらくなった経験があります。
その時は「特定のクラスやIDを指定する」というCSSの基本に立ち返って解決しました。
SWELLは全体のデザイン統一感が強く、CSSの上書きがテーマ側の設定とぶつかることがあります。
例えば、見出しやボタンの色はテーマ設定で管理されているため、CSSで変えると管理画面の表示と実際の表示がずれることがあります。
私はこれに気づかず、「CSSを書いたのに変わらない！」と数時間悩んだことがあります。
SWELLの場合は、まず管理画面で設定を確認し、それでも変えられない部分だけCSSを当てるのが効率的です。
テーマごとのクセは最初は戸惑いますが、慣れてくると「このテーマはこういう考え方で作られているんだな」とわかり、CSSを書くのもスムーズになります。
まとめ
CSSカスタマイズは、無料テーマでも十分におしゃれなサイトを作れる強力な手段です。
Cocoonの柔軟性、SWELLの統一感、それぞれの特徴を活かしつつ、色やフォント、ボタン、余白、見出しなどを自分好みに整えていくと、サイトはぐっと魅力的になります。
スマホ表示やテーマごとのクセも理解すれば、見た目だけでなく使いやすさも向上します。
何より、自分の手で調整したサイトは愛着が深まり、更新するのが楽しくなります。
小さな変更から始めて、その変化を楽しみながら、少しずつ理想のデザインに近づけていきましょう。
コメント