WordPressで記事を書いていると、
「見出しの色を変えたい」
「もう少しかわいいデザインにしたい」
「今のH2、なんか好きじゃない」
と思うことがあります。
そこで検索してみると、
追加CSS
CSSコード
class
セレクタ
疑似要素
といった言葉が出てきます。
すると、
「見出しの色を変えたいだけなのに、急に難しくなった……」
となることがあります。
もちろんCSSを書ければ、WordPressのデザインはかなり自由に変更できます。
でも、見出しを少し変えたい人全員がCSSを覚えなければいけないのでしょうか。
今回は、CSSが分からなくてもWordPressの記事デザインを変更する考え方を紹介します。
WordPressの見出しはテーマによってデザインが違う
WordPressの記事には、
H2。
H3。
H4。
などの見出しがあります。
同じH2でも、使っているテーマによって見た目はかなり違います。
背景色が付くテーマ。
左側に線が入るテーマ。
下線だけのシンプルなテーマ。
大きな枠で囲まれるテーマ。
これはテーマ側のCSSによってデザインされているためです。
だからテーマを変えると、
同じ記事なのに見出しデザインまで変わる
ことがあります。
見出しだけ変えたいのにテーマ変更は大げさ
今のテーマ自体には特に不満がない。
でも、
H2だけ変えたい。
そんな場合もあります。
そのためだけにWordPressテーマそのものを変更するのは、少し大げさです。
テーマ変更すると、
ヘッダー。
フッター。
サイドバー。
記事幅。
独自機能。
など、見出し以外の部分まで変わります。
見出しだけ変えたいなら、もっと小さな変更で十分です。
追加CSSで変更する方法もある
WordPressでは、追加CSSなどを使って見出しデザインを変更できます。
たとえばH2の背景色や線、余白、文字サイズなどをCSSで指定します。
CSSに慣れている人なら、かなり自由に作れます。
ただ、初心者の場合、
「コードはどこに貼るの？」
「このCSSで合ってる？」
「反映されない」
「スマホだけ崩れた」
「テーマを更新したらどうなる？」
といった別の悩みが出てくることがあります。
見た目を変えるために、今度はCSSの勉強が始まってしまいます。
CSSが分からなくてもデザインを変えられていい
ここでAIちいちゃんパレット Proでは、
CSSを書くのではなく、コーデを選んで着せ替える
という方法を使っています。
たとえば、
通常コーデ。
ブルーコーデ。
かわいいコーデ。
クリスマスコーデ。
などを選ぶと、そのコーデに合わせて見出しデザインを変更できます。
自分で、
背景色。
線の太さ。
角丸。
余白。
文字色。
をひとつずつ設定する必要はありません。
H2だけではなくH3・H4もまとめて変える
見出しデザインを変更するときに難しいのが、H2だけきれいにして終わりではないところです。
H2が強いデザインなら、H3は少し弱くする。
H4はさらにシンプルにする。
記事全体で階層が分かるようにした方が読みやすくなります。
そこでパレットでは、
H2
H3
H4
H5
H6
まで、コーデとしてまとめてデザインできます。
ひとつずつ別々にCSSを書くのではなく、最初からセットとして考えます。
見出しはデザインだけで選ばない
以前の記事でも紹介しましたが、H2・H3・H4には意味があります。
H2の中の小さな話がH3。
H3の中をさらに分けるならH4。
という階層です。
だから、
「H3のデザインの方がかわいいから、ここはH3にしよう」
という使い方はおすすめしません。
見出しレベルは記事構造で決める。
見た目はパレットで変える。
この2つを分けると、記事構造を崩さず好きなデザインにできます。
見出しだけ変えても記事全体がまとまらないことがある
最初は、
「H2だけかわいくしたい」
と思っていても、実際にH2だけ変えると、
「今度はボタンが合わない」
「Q&Aだけ昔のデザイン」
「目次だけ別の雰囲気」
となることがあります。
そこでAIちいちゃんパレットでは、見出しだけではなく、
目次。
Q&A。
POINT。
リスト。
ボタン。
マーカー。
背景。
書体。
などもコーデの一部として扱っています。
つまり、
H2だけを装飾するのではなく、記事全体の服をそろえる
という考え方です。
目次まで着せ替えられる
WordPressの目次は、テーマや目次プラグインの固定デザインになっていることが多いです。
でも記事全体を着せ替えたときに、
見出しはクリスマス。
Q&Aもクリスマス。
背景もクリスマス。
なのに目次だけ普通。
だと少し惜しいですよね。
そこでAIちいちゃんパレット Proでは、目次もコーデの対象にしました。
ブルーならブルーの目次。
かわいいならかわいい目次。
クリスマスなら季節感のある目次。
というように、記事の入口からデザインをそろえられます。
1記事ずつではなくブログ全体も変更できる
さらに、見出しデザインを変えたい記事が100本あったらどうでしょう。
1記事ずつ開いて変更するのは大変です。
そこで追加したのが、
ブログ一括着せ替え
です。
複数の記事を選択し、同じコーデをまとめて適用できます。
たとえば、
通常デザイン
↓
ブルーコーデ
へブログ全体を変更する。
クリスマス期間だけ、
通常
↓
クリスマスコーデ
へ変更する。
季節が終わったら元に戻す。
こんな使い方もできます。
テーマを変えなくても見た目はかなり変えられる
WordPressの見た目を変えたいとき、
最初にテーマ変更を考える人もいると思います。
でも実際には、
見出し。
背景。
目次。
ボタン。
Q&A。
など、記事本文の印象が変わるだけでも、ブログ全体の雰囲気はかなり変わります。
つまり、
テーマはそのままでも、見た目を変える方法はある。
ということです。
テーマ変更による設定や互換性の問題を避けながら、記事デザインだけを変えることもできます。
CSSを覚えなくてもいい？
もちろんCSSを知っていると便利です。
細かな調整をしたいときや、オリジナルのデザインを作り込みたいときには役立ちます。
でも、
WordPressの記事を書きたい人全員が、CSSを書ける必要はありません。
ブログ記事を書きたい。
見出しを少しきれいにしたい。
読みやすいデザインにしたい。
そのくらいなら、完成したコーデを選ぶ方法があってもいいと思います。
難しいCSSは、使いたい人だけ使えばいい
WordPressには自由にカスタマイズできる良さがあります。
だからCSSを書きたい人は、自由に書けばいい。
細かくデザインしたい人は、好きなだけ作り込めばいい。
でも、
「見出しの色を変えたいだけなのにCSSが分からない」
という人まで、コードと格闘する必要はありません。
AIちいちゃんパレット Proでは、
デザインを作る作業を「コーデを選ぶ」に変える。
という考え方で作っています。
見出しを変える。
目次も変える。
Q&Aも変える。
背景も変える。
必要ならブログ全体を一括で変える。
CSSを書かなくても、
記事を着せ替えるようにWordPressのデザインを楽しめる。
そんな方法もあります。
WordPress記事の装飾をもっと簡単に｜CSSが苦手な僕が「AIちいちゃんクローゼット」を作った理由
便利ツール完全ガイド
ブログのネタ探しから記事作成、
WordPress下書き、LP、ステップメールまで。
初心者でも迷わないAIツール活用ガイドを
無料でプレゼントしています。
メルマガ登録後、すぐにご覧いただけます。