WordPressの記事を装飾する。
僕も今までだったら、
見出しの色を変える。
枠を付ける。
箇条書きをかわいくする。
そんなイメージでした。
今回も最初はそんな感じだったんです。
AIちいちゃんパレット Proに、
あとから新しいコーデを追加できる機能
ができました。
だったら実際にコーデを作ってみよう。
第1号は、
クリスマスコーデ。
季節ものなら分かりやすいし、
「クリスマスの記事にしたいけど、そのためだけにCSSいじる？」
と思ったんですよね。
クリスマスの間だけ着せ替える。
終わったら別のコーデに戻す。
これなら簡単。
いいじゃん。
ということで作り始めました。
最初のクリスマスコーデは、なんか違った
まず作ったのが見出し。
赤。
緑。
クリスマスっぽい色。
そこへリースなんかも入れてみました。
技術的にはできた。
ちゃんとWordPressの記事に表示される。
だけども、
なんか違う。
クリスマスっぽい色を使っている。
リースもある。
なのに、
クリスマスコーデと言われなかったら、クリスマスだと分からない。
これじゃダメだなと。
そこでネットでクリスマスのデザインをいろいろ見てみました。
すると全然違ったんです。
リースを1個置いて終わりじゃない。
赤と緑にしただけでもない。
オーナメント。
ヒイラギ。
ツリー。
プレゼント。
雪。
ライン。
文字。
背景。
全部で一つのクリスマスデザインになっている。
なるほどね。
WordPressの見出しそのものをクリスマスにしてみた
そこから作り直しました。
普通のH2の横にクリスマスのイラストを置くんじゃなくて、
H2そのものを小さなクリスマスカードみたいにする。
赤い手描き風のライン。
オーナメント。
ヒイラギ。
クリスマスツリー。
文字も大きく、太くする。
これなら「クリスマスコーデ」という文字を読まなくても、
「あ、クリスマスだ」
と分かる。
まあ、ここまで来るのに何回も直しましたけどね（笑）。
最初はツリーを大きくしてもらったつもりが、
ちっちゃ！
文字を太く大きくしてと言っても、
「変わった？」
みたいな（笑）。
AIと相談しながら何度も直して、ようやくH2が完成しました。
H2だけじゃなく記事のパーツも着せ替えてみた
H2ができたので、今度は記事全体へ広げていきます。
H3。
H4。
H5。
H6。
箇条書き。
Q&A。
購入者限定特典の枠。
それぞれを同じクリスマスの世界観で作っていきました。
H2はクリスマスカード。
H3には深緑。
Q&Aにはサンタ。
特典にはプレゼント。
一個ずつ見ると、
いいじゃん。
かなりクリスマスになってきた。
でも記事全体を見ると、まだ何か足りない。
パーツはクリスマスなんだけど、記事は普通。
そんな感じだったんですよね。
だったら本文の背景もクリスマスにすればいいじゃん
そこで思ったのが、
背景。
見出しもQ&Aも箇条書きもクリスマスになった。
だったら、その後ろにある本文の背景もクリスマスにすればいい。
うっすらクリスマスのイラストが入った背景。
これなら記事全体が一つにつながるんじゃない？
ということで、
背景を入れてみました。
あれ？
ない。
入れたはずのクリスマス背景が見えない。
背景を入れたのに、本文カードに隠れていた（笑）
また失敗？
設定できてない？
そこでWorkで調べてもらいました。
すると背景そのものが入っていないわけではなかったんです。
Cocoonの記事には、サイト全体の背景があって、その上に本文が表示される大きな領域があります。
僕が最初に背景を入れた場所だと、その上から本文の大きな白いカードみたいな部分がかぶっていた。
しかも、その本文部分が画面のかなり大きな面積を占めています。
つまり、
クリスマス背景はちゃんといる。
いるんだけど、
本文カードの後ろにほとんど隠れてる（笑）。
見えているのは左右のほんの少しだけ。
そりゃ分からん。
僕がやりたかったのは、ブログの外側をクリスマスにすることじゃないんですよね。
読者が読んでいる、
記事そのものをクリスマスにしたい。
だったら背景を付ける場所も違う。
ここで初めて気づきました。
本文そのものに背景を入れたら、がらっと変わった
そこで背景を入れる場所を変えて、本文側にクリスマス背景が見えるようにしました。
最初は少し色が強かった。
これはこれでクリスマスっぽい？
いや。
なんか背景が主張しすぎる。
せっかく作ったH2やQ&Aより、後ろの色が気になる。
本文は読むところだから、これは違う。
そこで背景をかなり薄くしました。
ほぼ白に近いアイボリー。
クリスマスの模様も、
「よく見るとうっすらいる」
くらい。
すると、がらっと変わった。
H2。
H3。
箇条書き。
Q&A。
特典。
それまで別々に置かれていたクリスマスのパーツが、全部同じ場所にいるように見えたんです。
あ、これだ。
背景は飾りじゃなく、全部をつなぐものだった
ここで僕の中の「WordPressの記事装飾」が少し変わりました。
今までは、
見出しを装飾する。
箇条書きを装飾する。
Q&Aを装飾する。
一個ずつのパーツを見ていたんですよね。
でも今回やってみて分かったのは、
背景は全部のパーツをつなぐものなんだ
ということ。
だから背景だけ派手でもダメ。
逆に何もなければ、H2やQ&Aをクリスマスにしても、それぞれのパーツが置かれている感じが残る。
背景は目立たなくていい。
むしろ本文だから、目立たない方がいい。
文章を読んでいるときには邪魔しない。
でも記事全体を見ると、ちゃんとクリスマス。
そのくらいがちょうどよかった。
よし完成！と思ったら、今度は公開すると背景だけ消えた
背景も入った。
これで完成！
更新して公開ページを確認。
あれ？
また背景がない（笑）。
編集画面では、ちゃんとクリスマス背景が見えているんです。
ところが投稿を更新して公開ページを見ると、
背景だけ消えている。
H2はいる。
H3もいる。
箇条書きもいる。
Q&Aもサンタもいる。
背景、お前だけどこ行った？（笑）
今度は最初の「本文カードに隠れて見えない」とは別の問題でした。
編集画面では背景が表示されている。
でも公開ページでは消える。
つまり、WordPressの編集画面側では背景が適用されていても、Cocoonの公開側で実際に本文を表示している場所には、うまく反映されていない可能性がある。
現在ここを修正しています。
でも背景が消えたから、逆によく分かった
普通だったら、
また不具合かよ。
なんですけどね（笑）。
でも公開ページで背景だけ消えた画面を見たとき、
逆に分かりやすかったんです。
背景がある編集画面。
背景がない公開画面。
比べると、全然違う。
同じH2。
同じH3。
同じQ&A。
同じ箇条書き。
なのに背景がないだけで、また、
「クリスマスのパーツを置いた記事」
に少し戻って見える。
背景が入ると、
「クリスマスコーデを着た記事」
になる。
最初は背景なんて、最後のちょっとした飾りくらいに考えていたんですけどね。
違いました。
WordPressの記事装飾は、色を変えるだけじゃなかった
今回クリスマスコーデを作ってみて思ったのは、
WordPressの記事装飾って、
「H2を何色にする？」
だけじゃないんですよね。
配色。
文字。
ライン。
余白。
イラスト。
枠。
Q&A。
箇条書き。
背景。
それぞれが同じ方向を向いていると、記事全体に一つの世界ができる。
逆に、一個一個がどれだけかわいくてもバラバラだったら、
素材を置いただけ
に見えてしまう。
最初のクリスマスコーデが、まさにそれでした。
リースを置いた。
クリスマスカラーにした。
でも、
なんか違う。
そこから何回も作り直して、背景まで来て、ようやく「着せ替える」という意味が僕自身でも分かってきた気がします。
「記事を装飾する」から「記事を着せ替える」へ
AIちいちゃんパレット Proを作り始めたときから、
記事を服みたいに着せ替える
という考え方はありました。
ブルーセットから、かわいいセットへ。
かわいいセットから、また別のセットへ。
ボタン一つで着せ替える。
だからサイトの名前も、
AIちいちゃんクローゼット
にしました。
パレットが着せ替える道具。
コーデが服。
クローゼットが新しい服を探す場所。
でも作っている僕自身が、まだ、
「見出しを装飾する」
「Q&Aを装飾する」
という考え方から完全には抜けてなかったのかもしれません。
今回、背景まで含めて作ってみて、
記事全体の空気まで変わって、初めて着せ替えになる。
そんな感じがしました。
次はハロウィンコーデを作ってみる
そして次に作るのは、
ハロウィンコーデ。
今度はクリスマスの失敗を生かします。
もう最初からネットでハロウィンのデザインをいろいろ見ています（笑）。
オレンジ。
黒。
紫。
かぼちゃ。
おばけ。
コウモリ。
蜘蛛の巣。
魔女。
お城。
三日月。
そして今度は、
背景も最初からコーデの一部として考える。
クリスマスでは、H2から一個ずつ作って最後に背景へたどり着きました。
ハロウィンでは最初から、
「記事全体でハロウィンに見えるには？」
を考えて作ってみようと思っています。
季節ごとにCSSを直さなくても着せ替えられるようにしたい
クリスマスになったからCSSを調べる。
終わったら元に戻す。
ハロウィンになったら、またCSSを調べる。
僕なら、やらなくなると思う（笑）。
だから、
クリスマスになったらクリスマスコーデ。
ハロウィンになったらハロウィンコーデ。
お正月になったらお正月コーデ。
服を着替えるみたいに、
今日はこれ。
くらいで変えられたらいい。
今回作ったクリスマスコーデは、AIちいちゃんクローゼットで無料配布します。
そして次はハロウィン。
季節を一周する頃には、僕もコーデ作りに慣れていると思います。
たぶん。
また、
なんか違う。
って言ってるかもしれませんけどね（笑）。