WordPressで記事を書いていると、
もうちょっと見やすくしたい。
と思うことがあります。
大事なところにマーカーを引いたり。
POINTを囲ったり。
見出しをちょっとおしゃれにしたり。
文章だけの記事より、適度に装飾した方が読みやすい。
これは僕もそう思います。
でも。
WordPressの記事を装飾しようとすると、
意外と面倒なんですよね。
テーマに入っている装飾を探す。
ブロックを選ぶ。
を変える。
見出しを変える。
もっと変えたくなったらCSSを調べる。
「このCSSを追加してください」
はい。
どこに？
（笑）
僕は専門のWebデザイナーでもプログラマーでもありません。
だから昔から、
もっと簡単にできないのかな？
と思っていました。
そして今は、
WordPressの記事を服みたいに着せ替えたらいいじゃん。
という、ちょっと変な方向へ進んでいます。
そこからできたのが、
AIちいちゃんパレット Pro
そして、
AIちいちゃんクローゼット
です。
今回は、WordPressの記事装飾を調べている人向けに、
普通の装飾方法も含めながら、
なぜ僕が「記事を着せ替える」というところまで行ってしまったのか
を書いてみようと思います。
WordPressの記事装飾って何をするの？
WordPressの記事装飾というと、難しく聞こえるかもしれません。
でも普段ブログで見かける、
太字
マーカー
文字色
箇条書き
囲み枠
吹き出し
ボタン
見出しのデザイン
こういうものも全部、
記事を読みやすくするための装飾です。
WordPressのブロックエディターだけでできるものもあります。
使っているテーマに最初から入っているものもあります。
プラグインを追加すると使えるものもある。
そして、もっと自由に変えたくなると出てくるのが、CSS。
僕もWordPressを使っているので、この流れは何度も見てきました。
最初は、
「ここをちょっと変えたい」
だけなんです。
ところが調べていくと、
〇〇にこのCSSを追加してください。
となる。
コピペすれば使えるものも多いので、それ自体は便利です。
でも次に、
「じゃあ今度はこっち」
「この見出しも変えたい」
「囲み枠も合わせたい」
となってくる。
だんだん、
記事を書くのか、装飾を作っているのか分からなくなる（笑）
WordPressの記事をおしゃれにする方法は1つじゃない
WordPressの記事をおしゃれにする方法は、別にCSSだけではありません。
大きく分けると、
- WordPress標準のブロックを使う
- テーマに入っている装飾を使う
- 装飾プラグインを追加する
- CSSで自分好みに変更する
こんな感じです。
僕が使っているCocoonにも、もともといろんな機能があります。
だから、
普通にブログを書くなら、それで十分な人も多いと思います。
わざわざ僕みたいなことをする必要はありません（笑）
でも僕の場合、
あるところから欲しいものが変わってきました。
「装飾を追加したい」
じゃなかったんです。
僕が欲しかったのは「今日はこれ」に変えることだった
マーカーを追加したい。
POINT枠が欲しい。
かわいいボタンが欲しい。
そういうパーツ単体の話なら、すでにいろんな方法があります。
僕が途中から考え始めたのは、
記事全体の雰囲気を変えたい。
ということでした。
今日はブルー。
次の記事はかわいい感じ。
商品レビューならレビューっぽく。
クリスマスならクリスマス。
春なら桜。
でも、そのたびに、
H2を変更。
H3を変更。
囲み枠を変更。
マーカーを変更。
文字を変更。
ひとつずつやるの？
面倒じゃん。
だったら、
服みたいに全部まとめて着替えればいい。
ここから、
「装飾」
だったものが、
僕の中で、
「着せ替え」
に変わりました。
そこからAIちいちゃんパレット Proを作り始めた
そうしてChatGPTと相談しながら作り始めたのが、
AIちいちゃんパレット Pro
です。
名前の通り、WordPressの記事を装飾するためのパレットです。
僕が全部コードを書いたわけではありません。
というか、
書けません（笑）
僕がやっているのは、
実際に使う。
「あれ？ここ使いにくい」
となる。
ChatGPTに、
「これ、もっとこうできない？」
と相談する。
仕様を考える。
AIに開発してもらう。
また使う。
また、
「なんか違う」
となる。
直す。
だいたいこれの繰り返しです。
最初から、
ものすごいWordPress装飾プラグインを作るぞ！
と全部計画していたわけではありません。
使っているうちに増えていきました。
最初は記事を一発で着せ替えられるようになった
現在のAIちいちゃんパレット Proでは、
記事全体をまとめて着せ替えられます。
たとえば、
ブルーセット
を選ぶ。
すると記事全体がブルー系のコーデになる。
かわいいセット
へ変えれば、また違う雰囲気になる。
ほかにも、
書体を変えたり。
マーカーをちょい足ししたり。
パーツ単位で変更したり。
最初は、
「便利になった！」
と思っていました。
でも、また使っていると出てくるんです。
次の不満が（笑）
新しいコーデが欲しくなった
ブルー。
かわいい。
使える。
でも、そのうち当然、
もっと違うものも欲しい。
となります。
クリスマス。
お正月。
桜。
ハロウィン。
商品レビュー。
比較記事。
ランキング。
記事によって着せ替えられたら面白い。
でも新しいセットを作るたびに、
パレット本体を更新するの？
それも違うな。
ここでまた考えました。
服を買うたびに、
クローゼット本体を工事する人はいないよね。
だったら、
パレットとコーデを分ければいい。
パレットは道具、コーデは服
ここで今の考え方ができました。
AIちいちゃんパレット Pro＝着せ替える道具
そして、
コーデ＝服。
新しい服が欲しくなったら、あとから追加すればいい。
この仕組みを作ったのがVer.1.2です。
現在は、
「👗 コーデを追加」
から外部のコーデファイルを読み込めるようになっています。
追加すると、そのコーデがセット一覧に出てきます。
そのまま記事を着せ替えられる。
WordPressを閉じても残る。
いらなくなった追加コーデは削除できる。
別のコーデへ着せ替え直すこともできる。
ここまでできたとき、
「あれ？」
と思いました。
じゃあ、新しい服を探す場所も必要じゃん。
それでAIちいちゃんクローゼットができた
服を着替える道具がある。
服もあとから増やせる。
じゃあ次は、
服をどこで探す？
そこで作ったのが、
AIちいちゃんクローゼット
です。
名前、そのままです（笑）
AIちいちゃんクローゼットは、
WordPressの記事装飾や、これから作るコーデなどを集めていくためのサイトです。
考え方は、
パレット＝着せ替える道具
コーデ＝服
クローゼット＝新しい服を探す場所
です。
なのでAIちいちゃんパレット Proの中にも、
「👗 新しいコーデを見る」
というボタンを作りました。
そこからクローゼットへ行けます。
そして現在は、
クローゼットでコーデを見る。
↓
コーデファイルを入手する。
↓
WordPressへ戻る。
↓
「👗 コーデを追加」
↓
新しいコーデをパレットへ追加。
↓
記事を着せ替える。
ここまでの土台ができました。
難しいCSSはもういらない。記事を着せ替える新しい楽しさ。
AIちいちゃんクローゼットのキャッチコピーは、
「難しいCSSはもういらない。記事を着せ替える新しい楽しさ。」
です。
これは、
CSSは不要だからCSSなんて覚えるな
という意味ではありません。
CSSが分かれば、もちろん自由にいろんなことができます。
僕もCSSそのものを否定しているわけではありません。
でも、
WordPressでブログを書きたい人全員が、
記事を少しおしゃれにしたいだけでCSSを勉強しないといけないの？
とは思うんです。
ブログを書きたい。
自分の体験を書きたい。
商品を紹介したい。
そこが本来やりたいことなのに、
見出しをちょっと変えるためにCSSを調べ始めて、
気づいたら1時間。
僕なら、
その1時間で記事書きたい（笑）
だったら、着せ替えでいいじゃん。
という考えです。
WordPressテーマを変更するのとは少し違う
ここは少し分かりにくいかもしれません。
WordPressには「テーマ」があります。
テーマを変更すれば、サイト全体のデザインを大きく変えられます。
それとは別に、僕がやりたいのは、
記事の中を着せ替えること。
です。
サイト全体を引っ越すように変えるんじゃない。
この記事はこのコーデ。
別の記事は違うコーデ。
そんな使い方です。
服に例えるなら、
WordPressテーマは、
家そのものの内装を変える感じ。
パレットのコーデは、
今日着る服を選ぶ感じ。
僕の中ではそんな違いです。
ただ派手にすればいいとも思っていない
ここも最近かなり考えるようになりました。
WordPressの記事装飾って、
増やせば増やすほど良くなるわけじゃありません。
文字が真っ赤。
次は黄色。
大きい囲み枠。
キラキラしたボタン。
また違う枠。
全部目立たせたら、
結局どこ見ればいいの？
となります。
僕が作りたいのは、
派手な記事じゃなくて、
読みやすいけど、ちゃんと雰囲気がある記事。
です。
見出し。
余白。
文字。
囲み枠。
ライン。
マーカー。
全部が同じコーデとしてまとまっている。
だから、
「かわいいセットなら全部かわいい」
ではなく、
記事として読めるかわいさ
が必要。
これ、思ったより難しいんですよね。
そしてクリスマスコーデで盛大に失敗した（笑）
ちょうど最近、それを思い知りました。
Ver.1.2の追加コーデ機能が完成したので、
テスト用に、
クリスマスコーデ
を作ったんです。
追加できた。
ちゃんと保存できた。
セット一覧にも出た。
着せ替えも成功。
機能としては、
できた！
ところがデザインを見ると、
……これクリスマスか？
（笑）
冬っぽい。
北欧っぽい。
でも、
「クリスマス！」
とはならない。
せっかくオリジナルにしようとしたら、
定番の赤・緑・ゴールドや、ヒイラギ、オーナメントみたいな、
クリスマスをクリスマスに見せるもの
まで弱くなってしまいました。
結局、
追加コーデ機能は成功。
でも、
クリスマスコーデはボツ（笑）
になりました。
こういうところも実際に作って使わないと分かりません。
「おしゃれ」と「読みやすい」と「テーマが伝わる」は別だった
今回クリスマスコーデを作っていて気づいたのは、
おしゃれならOKじゃない
ということでした。
おしゃれ。
でもクリスマスに見えない。
クリスマスっぽい。
でも文字が読みにくい。
かわいい。
でも装飾がうるさい。
全部ダメ。
だから今は、
一目でテーマが伝わる
↓
記事として読みやすい
↓
その上でクローゼットらしくする
という順番で考えるようになりました。
これからお正月や桜、ハロウィンなんかを作るときにも、この考え方を使うつもりです。
失敗したけど、
失敗したおかげでルールが1個できました。
AIちいちゃんクローゼットはまだ作っている途中
ここまで書くと、
ものすごく完成されたサービスみたいに見えるかもしれません。
まだです（笑）
AIちいちゃんクローゼットも、
AIちいちゃんパレット Proも、
今も作りながら変わっています。
新しいコーデをワンクリックで自動追加できるわけでもありません。
有料コーデを販売しているわけでもありません。
ランキングや星評価があるわけでもない。
そういうものは、これから考えているところです。
今できているのは、
新しいコーデを探す場所を作った。
そして、
見つけたコーデをパレットへあとから追加できる仕組みができた。
ここまでです。
でも僕は、こういう途中が一番面白かったりします。
「あれ欲しい」
「できた」
「使いにくい」
「直そう」
「じゃあ次これ欲しい」
ずっとこれです。
WordPressの記事装飾が「作業」じゃなくなったら面白い
僕が最終的にやりたいのは、
WordPressの記事装飾を、
面倒な作業
から少し変えることです。
今日は何着ようかな？
みたいに、
この記事、どのコーデにしようかな？
になる。
季節が変わったら、
「桜にしてみよう」
クリスマスになったら、
「クリスマスコーデ入れてみよう」
レビュー記事を書いたら、
「レビュー用に着せ替えよう」
そうなったら、
WordPressの記事を書くのも、ちょっと楽しくなると思うんです。
別に全員がやる必要はありません。
文章だけのシンプルなブログが好きな人もいる。
それでいい。
でも、
WordPressの記事をもう少しおしゃれにしたい。
でも難しいCSSはちょっと……。
できれば簡単に雰囲気ごと変えたい。
そんな人には、
こういう方法もあっていいんじゃないかなと思っています。
WordPressの記事を着せ替えてみたい人へ
そんなことをやっている場所が、
です。
WordPressの記事装飾。
AIちいちゃんパレット Pro。
新しいコーデ。
実際に作って失敗した話。
これから、そういうものをどんどん増やしていきます。
まだクリスマスコーデすらボツになっていますけどね（笑）
でも、
最初から完成されたものを見せるより、
「こうやってできていった」
を残しておくのも面白いかなと思っています。
WordPressの記事を、
ただ装飾するんじゃなくて、
服を選ぶみたいに着せ替える。
興味があったら、
一度クローゼットをのぞいてみてください。
たぶん今後、
服がどんどん増えていきます。
たぶん（笑）
便利ツール完全ガイド
ブログのネタ探しから記事作成、
WordPress下書き、LP、ステップメールまで。
初心者でも迷わないAIツール活用ガイドを
無料でプレゼントしています。
メルマガ登録後、すぐにご覧いただけます。