WordPressを使っていると、
「見出しの色を変えたい」
「ボタンをもう少しかわいくしたい」
「背景を少しだけ変えたい」
と思うことがあります。
そこで検索すると、だいたい出てくるのがCSSです。
最初は、
「これをコピペすれば変わるんだ」
と思うんですが、いざやってみると、
「反映されない」
「違う場所まで変わった」
「スマホだけ崩れた」
「前に入れたCSSとぶつかった」
みたいなことが起きます。
見た目を少し変えたかっただけなのに、いつの間にかCSSの修正ばかりしている。
今回は、そんなときに考えたい、
WordPressの装飾を増やしすぎない考え方
について紹介します。
CSSは便利だけど、増えるほど管理が難しくなる
CSSは便利です。
見出し。
ボタン。
背景。
文字色。
余白。
枠線。
かなり細かく変更できます。
でも、少しずつCSSを追加していくと、
「このコードは何のため？」
「この色はどこで変えてる？」
「この枠線、どのCSS？」
と分からなくなってくることがあります。
特に、いろいろなサイトからコードをコピーして追加している場合は、あとから見直すとかなり大変です。
「ちょっとだけ変更」が積み重なる
最初はH2だけ。
次はH3。
その次はボタン。
さらにQ&A。
目次。
リスト。
背景。
気づけば、いろいろな場所にCSSが増えています。
しかも、それぞれ別々のタイミングで作っていると、デザインも少しずつズレてきます。
H2は青。
ボタンは緑。
Q&Aはピンク。
目次だけグレー。
単体で見ると悪くなくても、記事全体で見ると、
なんかまとまってない。
ということが起こります。
WordPressの装飾は「パーツ」ではなく「全体」で考える
記事をきれいに見せたいとき、
ひとつのパーツだけを見るより、
記事全体の組み合わせ
で考えた方がまとまりやすいです。
たとえばブルー系の記事なら、
見出し。
目次。
Q&A。
POINT。
ボタン。
リスト。
背景。
こうしたパーツを、同じ世界観でそろえる。
そうすると、派手な装飾をたくさん使わなくても、全体が整って見えます。
CSSを増やしすぎると修正も増える
CSSを追加するときは、うまくいった瞬間は気持ちいいです。
でもあとでテーマを変更したり、WordPressの表示が変わったりすると、前に追加したCSSが合わなくなることがあります。
PCでは大丈夫。
でもスマホでは文字がはみ出す。
テーマ側のCSSが変わって、急に色がおかしくなる。
別の装飾と重なって、思っていない場所まで変わる。
こうなると、
見た目を変えるためのCSSが、今度は修正する対象になる
んですね。
CSSが悪いわけではない
ここは誤解しないでほしいところです。
CSSが悪いわけではありません。
自分でデザインを細かく作りたい人にとっては、とても便利なものです。
「ここを2pxだけ変えたい」
「この余白だけ調整したい」
という細かな調整には、CSSが向いています。
問題は、
CSSを書きたいわけではないのに、見た目を変えるためにCSSを覚えなければならない
状態です。
装飾を「選ぶ」方法もある
AIちいちゃんパレット Proでは、
ひとつずつCSSを書くのではなく、
コーデを選んで記事全体を着せ替える
という方法を使っています。
たとえばブルーセットを選ぶと、
見出し。
Q&A。
POINT。
リスト。
ボタン。
目次。
背景。
書体。
などを、同じブルー系のデザインへまとめて変更します。
ひとつずつCSSを探して追加するのではなく、
最初からセットでそろえる。
という考え方です。
コーデならあとから変えやすい
CSSを直接いろいろ追加すると、
「前のデザインへ戻したい」
と思ったときに、どのコードを消せばいいのか分からなくなることがあります。
コーデなら、
ブルー。
かわいい。
クリスマス。
別のコーデ。
というように、まとまった単位で変更できます。
デザインを変えること自体を、もっと気軽にできます。
ブログ全体を変えたいときはもっと大変
記事が1本なら、CSSを少し調整するだけでもいいかもしれません。
でも記事が100本あったらどうでしょう。
すべての記事のデザインをそろえたい。
季節に合わせて全部変えたい。
そんなときに、1記事ずつ直すのは大変です。
そこでAIちいちゃんパレット Proでは、
ブログ一括着せ替え
という方法も使っています。
複数の記事を選んで、同じコーデへまとめて変更できます。
見た目を変えたいだけなら、仕組みまで複雑にしなくていい
WordPressは自由度が高いです。
CSSを書いてもいい。
テーマを変えてもいい。
プラグインを使ってもいい。
でも自由度が高いからこそ、やりすぎると管理が難しくなります。
見た目を少し変えたいだけなら、
仕組みまで複雑にしなくてもいい。
これも大事だと思います。
装飾を増やすより、減らした方が見やすくなることもある
ブログを始めたばかりのころは、
囲み枠。
マーカー。
アイコン。
ボタン。
吹き出し。
いろいろ使いたくなります。
でも装飾が多すぎると、どこが大事なのか分からなくなることがあります。
全部が目立つと、
結局、何も目立たない。
見出しは見出し。
POINTは強調。
ボタンは行動。
それぞれ役割を分けた方が、記事は読みやすくなります。
デザインは「足す」だけじゃなく「そろえる」
ブログデザインというと、
何か新しい装飾を追加することを考えがちです。
でも実際には、
色をそろえる。
余白をそろえる。
角丸をそろえる。
文字サイズをそろえる。
こうしたことの方が、全体の印象に大きく影響します。
派手なCSSをたくさん追加しなくても、
統一されているだけで、かなりきれいに見えます。
CSSでハマったら、一度立ち止まって考える
CSSが反映されない。
別の場所まで変わった。
スマホで崩れた。
そんなときは、さらにCSSを追加する前に、
本当にこの変更はCSSでやる必要があるのか
を考えてみるのもひとつです。
見出しだけを細かく調整したいならCSS。
記事全体の雰囲気を変えたいならコーデ。
サイト全体の構造から変えたいならテーマ。
目的によって、使う方法を分けた方が管理しやすくなります。
難しいCSSを増やさなくても、ブログは変えられる
WordPressの見た目を変える方法は、CSSだけではありません。
もちろんCSSを使えると便利です。
でも、
見た目を変えたい。
記事を読みやすくしたい。
季節ごとに雰囲気を変えたい。
そのためだけに、難しいコードを増やし続ける必要はありません。
装飾を増やすのではなく、デザインをそろえる。
そして必要なら、
コーデごと着せ替える。
そんな方法なら、WordPressのデザインをもっと気軽に楽しめます。
WordPressのデザインに飽きたときどうする？テーマ変更・CSS・着せ替えを比較
【最短24時間】「記事・LP・ステップメール」の果てしない作業を全自動化！下書き1つで仕組みが連結する『AIちいちゃん仕様書』はこちら
極秘ファイル配布中
あなたの体験・話し方・いつもの言葉から、
「自分専属の書き手」をChatGPTにつくる
ちょっと怪しい研究ファイルができちゃいました（笑）。
何が入っているのかは……
研究所の中でこっそり確認してください。
※無料メルマガ登録で極秘ファイルを入手できます。
怪しいですが、ちゃんと僕が作ってます（笑）。