Cocoonのままブログをおしゃれにできる？有料テーマへ変更する前に知りたいデザイン崩れとCSS不要の着せ替え方法

WordPressでブログを続けていると、ある日突然、自分のブログが地味に見えてくることがあります。

最初は記事を書くだけで精一杯だったし、無事に公開できただけでもうれしかった。それなのに、ほかの人のブログを見る余裕が出てくると、

「このブログ、見出しがオシャレだな」
「ボタンもきれいだな」
「やっぱり有料テーマを使っているからかな？」

そんなことが気になり始めるんですよね。

そして、だんだん今のブログに物足りなさを感じてくる。

僕もそうでした。

もっと見出しを変えたい。
囲み枠もオシャレにしたい。
ボタンも見やすくしたい。
記事によって雰囲気も変えたい。

そうなると、最初に思いつくのが有料テーマへの変更です。

でも、ちょっと待ってください。

有料テーマへ変更すれば、ブログ全体の見た目は大きく変えられます。ただし、洋服を着替えるようにボタンひとつで全部きれいに入れ替わるとは限りません。

記事本文は残っても、見出しの形や囲み枠、ボタン、吹き出し、ショートコードなどは、今使っているテーマに合わせて作られていることがあります。テーマを変えたあとに、過去の記事を一つずつ確認しなければならなくなる可能性もあるんだよね。

もちろん、有料テーマへの変更が悪いわけではありません。

新しいテーマにしかない機能やデザインが必要なら、準備をしたうえで変更する方法もあります。でも、単純に「記事の見た目を少し変えたい」という理由だけなら、もっと小さく始める方法もあります。

今使っているCocoonを残したまま、必要な記事パーツだけを着せ替える。

難しいCSSを書かず、見出しや囲み枠、ボタンなどをパレットから選んで変える。

記事本文を先に完成させて、装飾は最後にまとめてやる。

今回は、そんな新しいブログ装飾の考え方について、僕がAIちいちゃんパレット Proを作りながら気づいたことも含めて紹介します。

テーマを変更するべきか迷っている人も、CSSを触って何が何だか分からなくなった人も、まずはこの記事を読んでから考えてみてくださいね。

Cocoonの見た目を変えたいから有料テーマへ変更する？

Cocoonは無料で使えるWordPressテーマですが、無料だから何もできないわけではありません。

記事を書くための機能もある。
吹き出しも使える。
ボタンも作れる。
囲み枠もある。
目次も表示できる。

僕も長く使ってきましたが、普通にブログを書くなら十分すぎるほど機能があります。

それでも、長く使っていると見た目を変えたくなるんですよね。

これはCocoonが悪いという話ではありません。毎日同じ服を着ていたら、たまには違う服を着たくなる。それと似たようなものです。

最初はシンプルな見た目が気に入っていても、記事が増えてくると、

「もう少し自分らしいブログにしたい」
「ほかのブログとは違う雰囲気にしたい」
「記事ごとにデザインを変えられたら面白いのに」

と思うようになります。

そこで有料テーマを調べ始めます。

人気のテーマ。
オシャレなテーマ。
表示が速いと紹介されているテーマ。
SEOに強いと書かれているテーマ。

見ていると、だんだん欲しくなるんですよね。

デモ画面は当然きれいです。見出しも整っているし、トップページも洗練されている。テーマを入れれば、自分のブログも一瞬で同じようになる気がしてきます。

でも、デモ画面は、そのテーマが一番きれいに見えるように作られた見本です。

自分のブログには、これまで書いてきた記事があります。Cocoonの吹き出しを使っている記事もあれば、Cocoonのボタンや囲み枠を使っている記事もある。追加CSSを書いている場合もあります。

まったく同じ条件ではないんです。

有料テーマへ変更する前に考えたいのは、価格だけではありません。

これまで使ってきた機能は、新しいテーマでもそのまま表示されるのか。

過去の記事は、どこまで確認する必要があるのか。

今のブログで気に入っているところまで変わってしまわないか。

購入ボタンを押す前に、まずはここを確認したほうがいいんだよね。

WordPressのテーマを変更しても記事は消えない。でも見た目は同じではない

まず安心してほしいのは、一般的にはWordPressのテーマを変更しただけで、投稿や固定ページ、画像が全部消えるわけではないということです。

WordPressでは、記事などの内容とテーマが分かれて管理されています。そのため、テーマを変えても、これまで書いた文章やアップロードした画像は基本的に残ります。

では、何が変わるのか。

主に変わるのは、その内容をどう見せるかという部分です。

テーマは、ブログ全体の服のようなものです。

記事本文が体だとしたら、テーマは服、髪型、靴、アクセサリーまで含めた全体の見せ方に近いかもしれません。

テーマを変えれば、文字の大きさや行間、見出し、背景、記事幅、サイドバー、メニューなどが変わります。テーマによって用意されている場所が違うため、ウィジェットの配置をやり直す必要が出ることもあります。

WordPressの公式情報でも、ウィジェットを置ける場所はテーマによって異なり、テーマ変更後にウィジェットが見当たらない場合は「使用停止中のウィジェット」に残っていることがあると説明されています。WordPress公式：ウィジェットの管理

つまり、

「テーマを変えても記事が消えない」

と、

「テーマを変えても今までと同じように表示される」

は、別の話なんです。

ここをごちゃ混ぜにすると、

「記事は消えないと聞いていたのに、見た目が変になった！」

となります。

記事は残っている。
でも、見た目は変わっている。

まじ？

となるんですが、テーマを変えるというのは、もともとそういうものなんですよね。

テーマ固有の装飾が残るとは限らない

特に確認したいのが、テーマ独自の機能を使って作った装飾です。

たとえば、テーマ専用のショートコード、吹き出し、ボタン、ランキング、囲み枠などです。

新しいテーマが同じ仕組みに対応していなければ、以前と同じ見た目にはなりません。ショートコードの文字列がそのまま表示されたり、装飾されていた部分が普通の文章に戻ったりする可能性もあります。

もちろん、新しいテーマ側に引っ越し用の機能が用意されている場合もあります。

でも、すべての装飾が完全に変換されるとは限りません。

テーマを変更したあとに、

トップページを見る。
記事一覧を見る。
よく読まれている記事を見る。
商品紹介記事を見る。
吹き出しのある記事を見る。
ボタンや囲み枠のある記事を見る。
スマホでも確認する。

この作業が必要になります。

記事が10本なら、まだ確認しやすいかもしれません。

100本、200本と増えてからテーマを変えると、それだけ確認する場所も増えます。ブログ全体を着替えるつもりが、過去記事の修正作業で何日も止まってしまうことがあるんだよね。

ウィジェットやメニューも確認が必要

テーマによって、サイドバーやフッターに用意されている場所が違います。

Cocoonでは表示できていたものが、新しいテーマでは別の場所へ移ることもあります。メニューそのものが消えなくても、表示する場所を選び直す必要が出る場合があります。

トップページの構成も同じです。

ヘッダー。
ロゴ。
メインメニュー。
サイドバー。
おすすめ記事。
プロフィール。
フッター。

これらは記事本文とは別に、テーマの設定と深く関係しています。

WordPressの公式説明でも、テーマはサイト全体のデザインを担い、テーマごとにカスタマイズできる設定が異なることが案内されています。WordPress公式：管理画面とテーマ設定

有料テーマを購入して有効化したら完成。

ではなく、

有料テーマを購入する。
新しいテーマを設定する。
今までの表示を確認する。
必要な場所を直す。
スマホでも確認する。

ここまでがテーマ変更なんです。

購入して終わりじゃなかった。

そこが、テーマ変更で最初につまずきやすいところだと思います。

有料テーマへ変更するとSEOに悪いの？

テーマを変えたら検索順位が落ちる。

そんな話を見たことがある人もいると思います。

ここは、少し落ち着いて考えたほうがいいです。

WordPressのテーマを変えたという理由だけで、必ず検索順位が落ちるわけではありません。逆に、有料テーマに変えただけで検索順位が上がるとも限りません。

検索順位は、テーマの価格で決まるものではないからです。

ただし、テーマ変更によってサイトの状態が大きく変われば、それが間接的に影響する可能性はあります。

たとえば、

• 表示速度が大きく遅くなった
• スマホで文字やボタンが見にくくなった
• 見出しの順番がおかしくなった
• 大切な内部リンクが外れた
• 説明文や検索向けの設定が変わった
• 構造化された情報の出し方が変わった
• 広告や画像がずれて読みにくくなった
• ページの一部が正常に表示されなくなった

このような問題が起きれば、お客さんが読みづらくなります。

せっかく検索結果から来ても、ページが重い。ボタンが押せない。文字が小さい。どこを読めばいいか分からない。

これでは、テーマを変更した意味がありません。

Googleも、検索順位だけを狙った小手先の変更ではなく、実際にページを使う人にとって分かりやすく、役立つ改善をすることを勧めています。Google検索セントラル：コアアップデートとサイト改善

だから、

「有料テーマだからSEOに強い」
「無料テーマだからSEOに弱い」

と単純には決められないんですよね。

大切なのは、テーマを変えたあとも、

記事を読みやすいか。
スマホで使いやすいか。
必要なページへ移動しやすいか。
今までの大切な機能が残っているか。
表示がおかしくなっていないか。

ここを確認することです。

見た目を変えたくてテーマを変更したのに、過去の記事が読みにくくなり、修正に追われて新しい記事も書けなくなる。

それは、ちょっともったいないですよね。

有料テーマへの変更が悪いわけではない

ここまで読むと、

「じゃあ、有料テーマへ変えないほうがいいの？」

と思うかもしれません。

そういう話ではありません。

有料テーマには、有料テーマの良さがあります。

使いたいデザインが最初からそろっている。
販売ページを作りやすい。
サポートや説明が充実している。
自分が欲しい機能が用意されている。
サイト全体を大きく作り直せる。

今のテーマでは実現しにくい目的があり、そのテーマなら解決できる。過去記事の確認や修正も含めて移行する準備ができている。

それなら、有料テーマへの変更は十分ありです。

僕が言いたいのは、

「ブログを少しオシャレにしたい」

という理由だけで、いきなりブログ全体を引っ越さなくてもいいということです。

部屋のカーテンを変えたいだけなのに、家ごと引っ越す必要はないですよね。

見出しを変えたい。
囲み枠を変えたい。
ボタンを変えたい。
文字の雰囲気を変えたい。

それなら、必要な部分だけ変える方法を先に試してもいいと思います。

やってみて、それでもブログ全体を作り直したいと思ったら、そのとき改めてテーマ変更を考えればいい。

順番の話なんだよね。

Cocoonのデザインを変えるためにCSSを調べ始める

Cocoonのまま見た目を変えようとすると、次に出てくるのがCSSです。

検索すると、たくさんのコードが見つかります。

「このCSSをコピペするだけ」
「初心者でも簡単」
「見出しをオシャレにするCSS」
「ボタンをかわいくするCSS」

簡単そうに見えます。

コードをコピーする。
WordPressの追加CSSへ貼る。
保存する。

これだけなら、確かに難しくありません。

でも、うまくいけばの話です（笑）

貼ってみたら何も変わらない。
一部だけ変わった。
思っていた色と違う。
スマホでは文字がはみ出す。
ほかの装飾まで変わった。
前に貼ったCSSとぶつかっている。
どのコードが何をしているのか分からない。

こうなると、急に難しくなります。

最初は見出しの色を変えたかっただけなんです。

それなのに気づいたら、

クラス？
余白？
内側の余白？
外側の余白？
優先順位？
スマホ用の設定？

知らない言葉を調べ始めています。

「CSSをコピペするだけじゃなかったの？」

となるんですよね。

コピペしたCSSが悪いとは限らない

ネットで紹介されているCSSが間違っているとは限りません。

その人の環境では、きちんと動いている可能性があります。

でも、使っているテーマやプラグイン、すでに入れているCSS、WordPressの状態が違えば、同じコードを貼っても同じ結果になるとは限りません。

そのため、

「このコードは使えない」

ではなく、

「自分のブログの状態とは合っていなかった」

という場合もあります。

問題は、初心者にはその違いを見つけにくいことです。

コードの意味が分からないまま追加すると、何か変になったときに戻し方も分かりません。

どこを消せばいい？
前に入れたコードは必要？
全部消したら元に戻る？
ほかの記事まで変わっていない？

見た目を整えるために始めたのに、不安のほうが大きくなるんだよね。

テーマファイルを直接直すのはさらに怖い

WordPressには、テーマファイルを直接編集できる場所もあります。

でも、よく分からないまま直接変更するのはおすすめできません。

入力を一つ間違えただけで表示に問題が出る可能性がありますし、テーマを更新したときに変更内容が消えることもあります。

WordPress公式でも、テーマファイルを直接変更すると更新時に変更が失われる可能性があるため、カスタマイザーなどを使う方法が案内されています。WordPress公式：カスタマイザー

僕もコードを書く専門家ではありません。

だから、

「難しいCSSを全部覚えればいい」

という方向には行きませんでした。

覚えるより、使わなくてもできる形を作ったほうが早くない？

そこから始まったのが、AIちいちゃんパレット Proです。

本当にやりたかったのはCSSを書くことではなかった

ここで、いったん最初の目的へ戻ります。

ブログを始めた目的は、CSSを勉強することだったでしょうか。

見出しの角を丸くすること。
枠線を何色にするか決めること。
ボタンの影を何ピクセルにするか考えること。

それが一番やりたかったことでしょうか。

もちろん、デザインそのものが好きなら、CSSを覚えるのも楽しいと思います。自分で細かく調整できるようになれば、できることも増えます。

でも、記事を書いて商品やサービスを紹介したい人にとって、デザインは目的ではありません。

文章を読みやすくするため。
大切な部分へ目を向けてもらうため。
次に読んでほしい記事へ案内するため。
商品や特典の入り口を分かりやすくするため。

デザインは、そのための器なんですよね。

器を作ることに何時間も使って、中に入れる料理が完成していない。

それでは本末転倒です。

僕もツールが好きなので、便利そうなものを見ると欲しくなります。

高機能。
最新。
みんな使っている。
有名。

そういう言葉を見ると安心します。

昔の僕は、必要かどうかより「全部そろっているか」を気にしていたところがありました。教材もそう。ツールもそう。

でも実際には、高機能なものを持っていても、記事が書けるわけではありません。

オシャレなテーマを入れても、読んでもらえる文章が勝手に完成するわけではないんです。

結局、一番大切なのは記事の中身です。

誰に向けて書くのか。
何に悩んでいる人へ届けるのか。
自分は何を経験したのか。
何を失敗したのか。
そこから何に気づいたのか。

ここがなければ、見た目だけきれいなブログになります。

きれいなんだけど、何も残らない。

なんか違う。

そうなってしまいます。

ブログのデザインで迷子になる本当の理由

ブログのデザインで迷うのは、センスがないからではありません。

選べるものが多すぎるからです。

見出しだけでも、

色。
太さ。
背景。
線。
角丸。
影。
アイコン。
文字の大きさ。
上下の余白。
左右の余白。

いろいろあります。

さらに、囲み枠、ボタン、箇条書き、Q&A、吹き出し、マーカーまで一つずつ選び始めると、記事全体をどうまとめればいいのか分からなくなります。

見出しはブルー。
ポイント枠は黄色。
ボタンは赤。
Q&Aはピンク。
箇条書きは緑。

一つずつ見ると悪くない。

でも、全部を一緒にすると、ごちゃごちゃして見える。

洋服で考えると分かりやすいです。

シャツだけ見ればオシャレ。
ズボンだけ見てもオシャレ。
靴も帽子もオシャレ。

なのに全部着たら、なんか違う。

ありますよね（笑）

ブログの記事装飾も同じです。

一つのパーツだけを選ぶのではなく、記事全体を一つのコーデとして考えたほうがまとまりやすくなります。

だから僕は、見出しやボタンを一つずつ変える機能だけでなく、記事全体をまとめて着せ替える機能が欲しくなりました。

「今日はこの記事をブルーでいこう」

と決めたら、ブルーセットを選ぶ。

見出し。
箇条書き。
ポイント枠。
Q&A。
ボタン。

それぞれが同じ世界観になる。

一つずつ探して組み合わせるのではなく、最初から相性のよいパーツをセットにしておく。

これならデザインが得意ではなくても、記事全体をまとめやすくなります。

H2からH6まで全部変えればオシャレになるわけではない

見出しを一括で変えられる機能は便利です。

ただ、何でも一発で変えればいいわけではありません。

記事の中には、大きな見出しもあれば、小さな見出しもあります。さらに、強調したい部分、普通に読んでほしい部分、行動してほしい部分があります。

全部を強いデザインにすると、どこが大切なのか分からなくなります。

H2も目立つ。
H3も目立つ。
囲み枠も目立つ。
ボタンも目立つ。
マーカーも目立つ。

全員が、

「僕を見て！」
「私を見て！」
「ここが大事！」

と言っている状態です。

うるさい（笑）

記事装飾で大切なのは、全部を目立たせることではありません。

情報の順番を見せることです。

大きな話が始まる場所はH2。
その中の細かい話はH3。
特に覚えてほしいところはポイント枠。
次に進んでほしい場所はボタン。

それぞれに役割があります。

そのため、記事全体を着せ替えたあとで、

見出しが強すぎないか。
囲み枠が多すぎないか。
ボタンが埋もれていないか。
同じ色ばかりで単調になっていないか。
スマホで見たときに疲れないか。

最後に確認する必要があります。

一発変換は完成ではありません。

最初の面倒な作業を一気に減らして、最後に少しだけ自分で整えるための機能です。

ここは勘違いしないほうがいいと思います。

CSSを書かずに必要なパーツだけ着せ替える新しい方法

AIちいちゃんパレット Proは、WordPressの記事を着せ替えるために作っているプラグインです。

考え方はシンプルです。

難しいCSSを書く代わりに、使いたい記事パーツをパレットから選ぶ。

見出しを変えたいなら、見出しを選ぶ。
Q&Aを作りたいなら、Q&Aを選ぶ。
ボタンを作りたいなら、リンク文字を選んでボタンへ変える。
記事全体を整えたいなら、コーデセットを選ぶ。

プログラムを書くのではなく、服を選ぶようにデザインを選ぶんです。

記事全体をまとめて着せ替えられる

記事全体を一つずつ装飾するのは、思っているより時間がかかります。

H2を変える。
H3を変える。
箇条書きを変える。
Q&Aを変える。
ボタンを変える。
マーカーを入れる。

記事が長くなるほど、作業も増えます。

そこでAIちいちゃんパレット Proでは、コーデセットを選んで記事全体をまとめて着せ替えられるようにしました。

たとえばブルーセットなら、見出しや箇条書き、Q&A、ボタンなどをブルー系の世界観へまとめます。

かわいいセットなら、やさしい色と丸みのある形で全体をまとめます。

季節のコーデが増えれば、クリスマスやハロウィンなど、その時期に合わせた雰囲気へ変えることもできます。

ただ色を変えるだけではありません。

見出しの形。
枠線。
角丸。
背景。
文字の太さ。
余白。
アイコン。

複数の要素を合わせて、一つのコーデとして作ります。

それを保管しておく場所が、AIちいちゃんクローゼットです。

パレットが着せ替え道具。
コーデが洋服。
クローゼットが服を探す場所。

この関係なんだよね。

気になる部分だけ単体で変えられる

記事全体を着せ替えたあと、

「見出しはこれでいいけど、ボタンだけ変えたい」
「この記事ではQ&Aだけ使いたい」
「ここにポイント枠を一つ入れたい」

と思うこともあります。

そのため、パーツ単体の変換も必要です。

全部を一括で変えるか。
一部だけ変えるか。

どちらか一つではなく、その日の記事に合わせて使い分けられるほうが便利です。

毎回、全身コーデを変えたいわけではありません。

今日はシャツだけ。
今日は靴だけ。
今日は全身。

ブログの記事も同じなんです。

書体やマーカーだけ変える方法もある

見出しや囲み枠を大きく変えなくても、書体が変わるだけで記事の雰囲気は変わります。

すっきりしたゴシック。
やさしい丸ゴシック。
落ち着いた明朝。

記事の内容に合わせて選べます。

さらに、特に読んでほしい一文へマーカーを追加するなど、少しだけ装飾を足す方法もあります。

大切なのは、装飾を増やすことではありません。

読みやすくすることです。

何もかも囲まない。
何もかも太字にしない。
何もかもマーカーを引かない。

本当に大切な場所だけ使う。

そのほうが、結果的に目立つんですよね。

テーマを変えずにパーツを着せ替えるメリット

テーマを変更せず、記事パーツを着せ替える方法には、いくつかメリットがあります。

Cocoonの便利な機能を残しやすい

テーマをCocoonのまま使うなら、今まで慣れてきた管理画面や基本機能をそのまま使えます。

設定を最初から覚え直す必要もありません。

メニューはどこ？
広告の設定はどこ？
吹き出しはどうやって作る？
目次はどこで設定する？

新しいテーマへ変えると、このような違いを一つずつ覚える必要があります。

もちろん、新しいテーマに慣れる楽しさもあります。

でも、今の環境に大きな不満がなく、見た目だけ変えたいなら、慣れた環境を残せるのは大きいと思います。

ブログ全体を一気に変えなくていい

テーマ変更は、基本的にブログ全体へ影響します。

一方、記事の着せ替えなら、まず一つの記事で試せます。

テスト用の記事で使ってみる。
スマホで確認する。
気に入ったら別の記事でも使う。

少しずつ進められます。

いきなり全記事を変える必要はありません。

これは初心者にとって大きな安心です。

失敗するのが怖いのは、失敗したときに戻せるか分からないからなんですよね。

小さく試せる。
気に入らなければやめられる。
別のコーデも試せる。

この気軽さが大切です。

記事ごとに雰囲気を変えられる

ブログ全体のテーマは一つですが、記事の内容は全部同じではありません。

商品レビュー。
使い方の記事。
失敗談。
実践記。
無料特典の案内。
季節の記事。

内容が違えば、合う雰囲気も変わります。

さわやかな記事はブルー。
やさしい説明は淡いピンク。
落ち着いたレビューはシンプル。
クリスマス企画は北欧風。

テーマを変えずに記事単位で着せ替えられれば、ブログ全体の基本は残しながら、それぞれの記事に合った見せ方ができます。

ずっと同じ服を着なくていい。

今日はこれ。
次はこれ。

そんなふうに記事を作れると、ブログのデザインが作業ではなく、少し楽しくなります。

AIちいちゃんパレット Proを作って分かったこと

AIちいちゃんパレット Proは、最初から完成した設計図があったわけではありません。

僕とAIちいちゃんで、

「こういうのがあったら便利じゃない？」
「これもできる？」
「じゃあ、作ってみよう」

と話しながら作ってきました。

実際に使ってみる。
「あれ？」が見つかる。
直す。
また使う。
また「あれ？」が見つかる。

ずっとそんな感じです（笑）

記事全体をブルーにしたら終わりではなかった

最初に記事全体をブルーセットへ着せ替えられたときは、

「おお、できた！」

と思いました。

見出しが変わる。
箇条書きも変わる。
Q&Aも変わる。
ボタンも変わる。

構想していた「記事を丸ごと着せ替える」が、本当に動き始めたんです。

でも、記事を見ていくと問題が見つかります。

この見出しは認識されている。
こっちは認識されていない。
普通の箇条書きは変わる。
別の作り方をした箇条書きは変わらない。
Cocoonのボタンはどうする？
自分で装飾したところは守ったほうがいい？

一発変換できたから完成ではありませんでした。

むしろ、動いてから分かることのほうが多かったんです。

戻る・やり直すが必要になった

着せ替えは、試してみなければ分かりません。

ブルーがいいと思って選んだけど、記事の内容には合わなかった。

かわいいセットを試したけど、少し違った。

書体だけ前のほうが読みやすかった。

そういうことがあります。

だから、「着せ替えられる」だけでは足りませんでした。

戻る。
やり直す。

この機能が必要だったんです。

デザインを自由に試すには、自由に戻せることも大切です。

選んだら最後。
失敗したら自分で直す。

それでは怖くて試せません。

僕自身、よく分からないものを触るときは、

「これ、戻せるの？」

が一番気になります。

だから、初心者が気軽に試すためには、高機能にするより先に、戻れる仕組みが必要だったんだよね。

ノーマルにも服が着いていた

さらに面白かったのが、装飾を外せば完全なノーマル状態へ戻ると思っていたことです。

見出しのデザインを外す。
普通の見出しへ戻す。

簡単そうに見えます。

でも、Cocoonの普通の見出しにも、Cocoonのデザインが付いています。

つまり、僕がノーマルだと思って見ていたものも、実はCocoonという服を着ていたんです。

な、なるほど〜。

おもろ。

となりました（笑）

だから、何も装飾されていない状態へ戻すのではなく、

Cocoonノーマルパーツ。
AIちいちゃんテーマノーマルパーツ。

というように、それぞれのテーマに合った普通の見た目へ着せ替える考え方が必要になります。

ここは実際に作ってみなければ分からなかったところです。

テーマとプラグインの関係を考えるうえでも、とても大切な気づきでした。

使いやすい記事装飾プラグインに必要な条件

記事装飾プラグインは、機能が多ければ使いやすいとは限りません。

ボタンが100個あっても、どれを使えばいいか分からなければ迷います。

僕が考える大切な条件は、次のとおりです。

CSSを書かなくても使える

まず、コードを書かなくても使えること。

記事を書いている画面で、変えたい部分を選び、パレットから使いたいデザインを選べる。

これが基本です。

「このコードを追加CSSへ貼ってください」
「クラス名を入力してください」
「テーマファイルを編集してください」

初心者向けなら、ここをできるだけ減らしたほうがいいと思います。

難しいことができるより、迷わず使えるほうが大切です。

記事全体と単体パーツの両方に対応している

一発着せ替えだけでは、細かい調整ができません。

単体パーツだけでは、毎回の作業が増えます。

そのため、

記事全体をまとめて着せ替える。
必要なところだけ単体で変える。
マーカーなどを少し追加する。

この3つを使い分けられると便利です。

まずコーデセットで大きく整える。
そのあと、必要な部分だけ変える。

最初から全部を手作業で整えるより、かなりラクになります。

戻る方法が分かりやすい

装飾を試したら、簡単に戻せること。

これは絶対に必要です。

初心者が困るのは、失敗することではありません。

失敗したあとに、どうすればいいか分からないことです。

戻るボタンが見える。
やり直しもできる。
どこまで戻るのか分かる。

この安心感があると、デザインを試しやすくなります。

スマホで読んだときに邪魔にならない

パソコンできれいに見えても、スマホで読みにくければ困ります。

文字が小さい。
枠が画面からはみ出す。
ボタンが押しにくい。
見出しが大きすぎる。
左右の余白が狭すぎる。
装飾が続いて目が疲れる。

ブログはスマホで読まれることも多いため、最後は必ずスマホで確認したほうがいいです。

記事を着せ替えたあと、最初から最後まで一度スクロールしてみる。

それだけでも、

「ここ、装飾が続きすぎだな」
「この見出しは大きすぎるな」
「このボタンは押しにくいな」

と気づけます。

作る側の画面ではなく、お客さんが見る画面で確認する。

ここが大切です。

テーマの機能とぶつかりにくい

プラグインで何でもやろうとすると、テーマの機能と役割が重なることがあります。

Cocoonの吹き出し。
Cocoonのボタン。
Cocoonの見出し。
プラグインの吹き出し。
プラグインのボタン。
プラグインの見出し。

同じような機能が重なると、どちらを使えばいいか分からなくなります。

そのため、テーマの便利なところは残し、足りない部分だけプラグインで補う考え方が必要です。

全部を奪うのではなく、今あるものと一緒に使う。

AIちいちゃんパレット Proも、Cocoonからすべてを置き換えるためのものではありません。

Cocoonのまま、記事装飾の選択肢を増やす。

それくらいがちょうどいいと思っています。

記事を書くときはデザインを忘れていい

記事を書きながら装飾まで考えると、手が止まりやすくなります。

この見出しは何色にしよう。
ここは囲み枠にしようか。
ボタンはどれにしよう。
マーカーを入れようか。
画像はどこに置こう。

文章を書く頭と、デザインを考える頭を同時に使うことになります。

これは疲れます。

だから、先に文章を書く。

装飾は最後。

これでいいんです。

ステップ1：まずは書く内容を決める

最初に決めるのはデザインではありません。

誰に向けて書くのか。
何に悩んでいるのか。
この記事で何を持ち帰ってほしいのか。

ここを決めます。

たとえば今回なら、

Cocoonを使っている。
ブログの見た目を変えたい。
有料テーマへの変更を考えている。
でも、過去記事が崩れないか心配。
CSSもよく分からない。

そんな人へ向けて書いています。

相手が見えれば、必要な話も見えてきます。

ステップ2：デザインを考えず本文を書く

文章を書いている途中では、装飾を考えなくて大丈夫です。

見出し。
本文。
箇条書き。
紹介したい商品。
自分の体験。

まずは材料を全部出します。

文章が少しくらい変でもいい。
順番がおかしくてもいい。
誤字があってもいい。

あとで直せます。

書いている途中に毎回デザインを整えると、文章の流れが切れてしまいます。

まずは最後まで書く。

ここを優先します。

ステップ3：文章を読み直して役割を分ける

本文が書けたら、読み直します。

大きな話題はH2。
その中の細かい説明はH3。
覚えてほしいところはポイント枠。
手順は箇条書き。
よくある疑問はQ&A。
次に進む場所はボタン。

文章の役割が決まってから、装飾を付けます。

先に箱を用意して、その中へ文章を押し込むのではありません。

文章が先。
箱はあと。

この順番です。

ステップ4：コーデを選んで全体を整える

記事の内容に合うコーデを選びます。

迷ったら、まずはシンプルなものを選べばいいと思います。

ブルー。
白。
薄いグレー。
少しだけアクセントカラー。

最初から全部を派手にする必要はありません。

コーデを選んで一度全体を着せ替えたら、記事を上から下まで確認します。

「おお、変わった！」

で終わらず、読みやすいかどうかを見ます。

ステップ5：必要なところだけ微調整する

最後に、気になる部分だけ直します。

ボタンの色を変える。
ポイント枠を一つ追加する。
マーカーを減らす。
見出しの強さを調整する。
書体を変える。

全部を触らなくて大丈夫です。

気になるところだけ。

ここで一つずつ細かくしすぎると、またデザインの底なし沼へ戻ります。

完成の基準は、

「もっと装飾できるか」

ではなく、

「この記事を普通に読めるか」

です。

オシャレなブログより、読めるブログを先に作る

ブログの見た目は大切です。

文字が詰まっている。
見出しが分かりにくい。
ボタンが見つからない。
色が多すぎる。
スマホではみ出している。

このような状態なら、直したほうがいいです。

でも、オシャレにすれば読まれるわけではありません。

記事を開いたお客さんが知りたいのは、

自分の悩みが解決するか。
分からなかったことが分かるか。
次に何をすればいいか。
この人の話をもう少し読みたいか。

そこなんですよね。

見出しの角が何ピクセル丸いかではありません。

デザインは文章を助けるものです。

文章より先に出てはいけません。

記事を読んでいて、

「デザインがすごかった」

だけで終わるより、

「これなら自分にもできそう」
「同じことで悩んでいたんだ」
「ちょっと試してみよう」

と思ってもらえるほうがいい。

そのために、見出しや囲み枠、ボタンを使います。

最高の器を用意する。

でも、器を眺めてもらうことが目的ではありません。

その中に、自分の体験や考えを入れる。

そこまでできて、初めて記事になるんだと思います。

テーマ変更と着せ替えは、どちらを選べばいい？

ここまでの話を簡単に分けると、次のようになります。

有料テーマへの変更が向いている人

有料テーマへの変更が向いているのは、ブログ全体を作り直したい人です。

• 使いたい有料テーマが明確に決まっている
• そのテーマにしかない機能が必要
• トップページを含めて全体の構成を変えたい
• 過去記事を確認して修正する時間を取れる
• テスト環境やバックアップを用意できる
• テーマ変更後の設定も覚えるつもりがある

このような場合は、テーマ変更を検討してもいいと思います。

ただし、いきなり本番サイトで有効化するのではなく、バックアップを取り、可能ならテスト環境で確認してから進めたほうが安心です。

Cocoonのまま着せ替える方法が向いている人

今の環境を残したまま、記事の見た目を変えたい人には、着せ替える方法が向いています。

• Cocoonの機能には大きな不満がない
• 見出しや囲み枠などのデザインだけ変えたい
• CSSを書くのが怖い
• 過去記事を大量に修正したくない
• 一つの記事から小さく試したい
• 記事ごとに違うデザインを楽しみたい
• 文章を書く時間を増やしたい

これなら、ブログ全体を引っ越す前に試せます。

使ってみて満足できれば、そのまま続ければいい。

やっぱりサイト全体を変えたいと思ったら、そのときテーマ変更を考えればいい。

どちらか一つが正解ではありません。

今の自分が変えたいのは、

ブログ全体なのか。
記事の見た目なのか。
一部のパーツなのか。

ここを分けると選びやすくなります。

AIちいちゃんクローゼットから好きなコーデを選ぶ

AIちいちゃんパレット Proで使うコーデは、AIちいちゃんクローゼットから探せるようにしています。

難しいCSSはもういらない。
記事を着せ替える新しい楽しさ。

これが、AIちいちゃんクローゼットの考え方です。

クローゼットを開く。
気になるコーデを探す。
パレットへ追加する。
記事へ着せ替える。

服を選ぶように使えます。

コーデは、これから少しずつ増やしていく予定です。

ブルー。
かわいい。
シンプル。
レビュー向け。
販売記事向け。
季節のコーデ。

すべての記事へ同じデザインを使う必要はありません。

今日書いた記事に合う服を選ぶ。

それだけです。

テーマ変更のように、ブログ全体を一度に変えなくてもいい。CSSを何行もコピーして、どこへ貼ったか分からなくなることもありません。

まずは一つの記事で試せます。

僕が欲しかったのは、ものすごく高機能なデザインツールではありませんでした。

記事を書いたあとに、

「今日はどれを着せようかな？」

と選べる道具です。

そのくらい気軽なほうが、ブログは続けやすいんじゃないかと思っています。

まとめ｜有料テーマへ移る前に、今のブログを着せ替えてみよう

Cocoonの見た目に飽きたから、有料テーマへ変更する。

それも一つの方法です。

ただし、テーマを変更しても記事や画像は基本的に残りますが、見出し、ボタン、吹き出し、ショートコード、ウィジェットなどが以前と同じように表示されるとは限りません。

検索順位が必ず落ちるわけでもありませんが、表示速度やスマホの使いやすさ、内部リンク、見出しの構造などが大きく変われば、間接的な影響が出る可能性はあります。

だから、見た目を変えたいだけなら、いきなりブログ全体を引っ越さなくてもいいんです。

Cocoonはそのまま。
記事もそのまま。
必要な記事パーツだけ着せ替える。

記事全体を変えたい日は、コーデセットを選ぶ。
ボタンだけ変えたい日は、ボタンだけ変える。
少し目立たせたい日は、マーカーを一本引く。

それで十分です。

そして、記事を書くときはデザインを忘れる。

まず文章を書く。
最後まで書く。
読み直す。
最後に着せ替える。

装飾は最後にサボっちゃえばいいんです。

AIちいちゃんパレット Proは、CSSの代わりに難しいことを全部やる魔法ではありません。

ブログを書く人が、デザインで迷子になる時間を減らすための着せ替え道具です。

AIちいちゃんクローゼットは、その着せ替え用の洋服を探す場所です。

ブログの見た目を変えたい。

でも、テーマ変更はちょっと怖い。
CSSもよく分からない。
過去記事を全部直すのも大変。

そんなときは、有料テーマを購入する前に、一つの記事から着せ替えてみてください。

家ごと引っ越さなくても、服を変えるだけで雰囲気は変わります。

ブログだって、ずっと同じ服を着ていなくていいんだよね。

Cocoonからテーマ変更すると記事が崩れる？吹き出し移行ツールと、テーマを変えずに見た目を変える方法