WordPressの記事を、もっとかわいくしたい。
見出しの色を変えたり、枠を付けたり、箇条書きを装飾したり。
WordPressの記事装飾というと、こうした「パーツのデザイン」を思い浮かべる人も多いと思います。
でも今回、AIちいちゃんパレット Proのクリスマスコーデを実際に作ってみて、一つ気づいたことがありました。
H2をクリスマスにする。
Q&Aもクリスマスにする。
箇条書きもクリスマスにする。
一つずつはかわいい。
でも記事全体を見ると、
なんか違う。
そこで最後に変えてみたのが、
記事の背景です。
背景までコーデの一部として整えてみると、それまでバラバラに見えていた装飾が一つにつながりました。
今回は、クリスマスコーデを作りながら分かった、
「WordPressの記事を装飾する」と「記事全体を着せ替える」の違い
について紹介します。
WordPressの記事装飾はパーツだけでもできる
WordPressでは、いろいろな場所を装飾できます。
たとえば、
- H2・H3などの見出し
- 箇条書き
- ボタン
- Q&A
- マーカー
- 囲み枠
- POINTなどのBOX
こうしたパーツを少し変えるだけでも、記事の印象はかなり変わります。
見出しに色を付けるだけでも、何も装飾していない記事とは全然違いますよね。
もちろん、それだけなら悪いわけではありません。
シンプルなブログなら、むしろ装飾を増やしすぎない方が読みやすくなります。
でも、
「記事全体をクリスマスにしたい」
となると、少し話が変わりました。
最初は見出しをクリスマス風にしてみました
クリスマスコーデを作り始めたとき、最初に取りかかったのはH2でした。
クリスマスだから、
赤。
緑。
ヒイラギ。
リース。
こうしたものを使えばクリスマスになると思っていました。
ところが、実際に作ってみると、
クリスマスっぽいけど、なんだか普通。
色は合っています。
クリスマスのイラストも入っています。
でも、
普通のWeb見出しにクリスマスの飾りを付けただけ
に見えてしまいました。
そこで実際のクリスマスカードや広告、クリスマスデザインなども参考にしながら、もう一度考え直しました。
「飾りを置く」から「見出しそのものをデザインする」へ
作り直したH2では、クリスマスの素材を横に置くだけではなく、
見出し全体を小さなクリスマスカードのようにする
ことを意識しました。
手描き風の赤いライン。
上から吊り下がるオーナメント。
ヒイラギ。
クリスマスツリー。
丸みのある大きな文字。
そして、それぞれを別々の飾りとして置くのではなく、一つの横長グラフィックとして見えるようにまとめる。
すると、かなり印象が変わりました。
「クリスマスコーデ」という文字を読まなくても、
見ただけでクリスマスを感じられるH2
になってきました。
H3やQ&Aもクリスマスにしてみる
H2ができたら、次は他のパーツです。
H3。
H4。
H5。
H6。
箇条書き。
Q&A。
POINT。
特典BOX。
H2だけ豪華にして、他がいつものデザインでは記事全体としてまとまりません。
そこで、それぞれにクリスマスのデザインを取り入れていきました。
ただし、全部を同じデザインにはしていません。
H2はクリスマスカード。
Q&Aにはサンタ。
特典BOXにはプレゼント。
それぞれ違う役割を持たせながら、
赤・深緑・アイボリーなどの配色や素材の雰囲気をそろえる。
こうすると、一つずつのパーツにもクリスマスらしさが出てきます。
ところが。
ここまで作って記事全体を見ると、まだ少し違和感がありました。
パーツはクリスマスなのに、その間にある本文はいつもの記事。
ここで背景の存在が大きくなってきます。
WordPressの記事背景も変えてみることにしました
だったら、
本文の背景までクリスマスコーデにしてみたらどうだろう？
ということで、薄いクリスマス模様の背景を入れてみることにしました。
文章を読む場所なので、派手な背景にはしません。
ベースは明るいアイボリー。
そこへクリスマスのモチーフが、うっすら見えるくらい。
これなら本文の読みやすさを保ちながら、見出しと見出しの間にもクリスマスの雰囲気を残せます。
ところが最初は、
背景を入れたはずなのに見えませんでした。
Cocoonの背景に入れたら本文部分に隠れてしまった
今回クリスマスコーデを作っていたWordPressでは、Cocoonを使っています。
最初はCocoon側の背景部分へクリスマス背景を入れてみました。
でも実際の記事を見ると、ほとんど見えません。
調べてみると、背景が設定されていなかったわけではありませんでした。
Cocoonではサイトの背景の上に、記事本文を表示する大きな白い領域があります。
その本文部分が画面の大部分を占めていたため、
外側に設定したクリスマス背景が、本文部分の後ろに隠れていた
んです。
左右に少しだけ背景が見えていても、記事を読んでいる部分は白いまま。
これでは、
「記事をクリスマスに着せ替える」
という目的には合いません。
サイト背景と記事背景は役割が違う
ここは実際に作ってみて分かりやすかったところです。
サイト全体の外側へ背景を入れることと、
記事を読む本文領域そのものへ背景を入れることは違います。
今回やりたかったのは、サイト全体をクリスマスサイトへ変更することではありません。
クリスマスコーデを使ったその記事をクリスマスにしたい。
そのため、背景を表示する場所も記事本文側へ変更しました。
すると、
今度はちゃんと本文の後ろにクリスマス背景が見えるようになりました。
背景を入れたら記事全体がガラッと変わりました
ここが一番大きな変化でした。
H2のデザインは同じ。
Q&Aも同じ。
箇条書きも同じ。
それなのに背景が入ると、記事全体の印象がガラッと変わります。
それまでは、
クリスマスのパーツが並んでいる記事。
背景を入れたあとは、
記事全体がクリスマスコーデになっている。
そんな違いが出ました。
見出しと見出しの間にある普通の文章まで、同じ世界の中に入ったように見えるんです。
ただし背景は濃くしすぎない
背景を入れればいいなら、もっとクリスマスらしくしよう。
そう考えて色やイラストを強くすると、今度は別の問題が出てきます。
文章が読みにくい。
ブログ記事の主役は、あくまで本文です。
背景のイラストを見てもらうことが目的ではありません。
そこでクリスマスコーデでは、
- 明るいベースカラー
- かなり薄い背景模様
- 本文と十分なコントラスト
- 見出しやBOXより背景を目立たせない
というバランスに調整しました。
「背景にもクリスマスがいる！」
と最初に気づく必要はありません。
記事全体を見たときに、
なんとなく全部がつながって見える。
そのくらいの背景の方が、長いブログ記事には合います。
今度は編集画面では見えるのに公開すると消えました
背景を本文側へ入れて、
これで完成。
……と思ったら、もう一つありました。
WordPressを更新すると背景が消える。
編集画面ではクリスマス背景が表示されています。
ところが公開ページを確認すると、
H2はクリスマス。
Q&Aもクリスマス。
箇条書きもクリスマス。
背景だけいない。
最初の「背景が本文の後ろに隠れていた」とは別の問題です。
編集画面では背景が適用されていても、公開ページ側では同じ場所へ反映されていなかったため、公開側でも背景が維持されるように調整する必要がありました。
こうした違いも、実際のWordPressで確認しないとなかなか気づきません。
背景が消れたことで逆に違いがよく分かりました
ただ、この失敗で面白いことも分かりました。
背景ありと背景なしを、ほぼ同じ状態で比較できたんです。
H2も同じ。
Q&Aも同じ。
箇条書きも同じ。
違うのは背景。
それだけなのに、全体のまとまり方がかなり違いました。
そこで改めて、
背景は単なる飾りではなく、別々のパーツを一つのコーデとしてつなぐ役割がある
と感じました。
WordPressの記事装飾は「足し算」だけではない
WordPressの記事をかわいくしようとすると、
イラストを追加する。
枠を追加する。
色を追加する。
アイコンを追加する。
ついつい「何を足すか」を考えたくなります。
でも今回のクリスマスコーデでは、それだけではうまくいきませんでした。
大切だったのは、
配色をそろえる。
素材のテイストをそろえる。
余白をそろえる。
背景まで含めて同じ世界にする。
そして、文章を読む邪魔になる装飾は増やしすぎない。
一つのパーツだけではなく、
記事全体でどう見えるか
を考えることでした。
記事装飾から「着せ替え」へ
これが、AIちいちゃんパレット Proでやりたい「着せ替え」です。
見出しの色だけ変更するのではなく、
H2。
H3。
Q&A。
箇条書き。
BOX。
ボタン。
そして背景。
記事を構成しているパーツを同じテーマでまとめて、
記事全体の雰囲気を着せ替える。
クリスマスが終わったら、また別のコーデへ。
ハロウィンなら、
オレンジ。
黒。
紫。
かぼちゃ。
おばけ。
コウモリ。
蜘蛛の巣。
そして、その世界に合った背景。
季節によって記事を書き直すのではなく、
同じ記事を違う服へ着せ替える。
そんな使い方ができるようにしています。
次はハロウィンコーデを作ります
クリスマスコーデを作ったことで、次に改善したいところも見えてきました。
次に予定しているのは、
ハロウィンコーデ。
今度は最初から背景も含めて考えます。
H2だけを見て完成と判断するのではなく、
普通の本文まで含めた記事全体がハロウィンに見えるか。
そこまで確認しながら作る予定です。
クリスマスでかなり遠回りしましたからね（笑）。
でも、その遠回りがあったから、
WordPressの記事装飾と、記事を着せ替えることは少し違う。
ということも分かりました。
AIちいちゃんクローゼットでは、これからも実際にコーデを作りながら、
かわいいだけじゃなく、ちゃんと文章を読める記事デザイン
を作っていきます。