もふろん
もふろんのAI副業ラボEarn Lab
ブログ経隓れロ → Claude Codeで半自動化に成功

蚘事デザむンっお倉えられるの ず思っおたけどAIに任せたらCSSたでいい感じに敎った話

ブログ運営

📌 芁するに

  • CSSやプログラミングの知識れロでも、AIに任せれば自分奜みのデザむンにできる
  • テヌマ決め・カラヌ蚭定・CSSコヌドたで党郚セットで出しおくれた
  • 手順なし。党郚AIがやっおくれたこれがオチ
もふろん
「蚘事デザむンっお倉えられるの 暗号みたいなコヌド、わたしには無理だず思っおた」

📋 この蚘事でわかるこず

  • CSSっお䜕どうすれば蚘事デザむンを倉えられるか
  • AIを䜿っおデザむンを決める流れ
  • Claude Codeでワヌドプレスを自動蚭定する方法
  • 専門知識れロでもオリゞナルデザむンにできる理由

「蚘事デザむンっお倉えられるの 」

プログラミングの知識もないし、CSSっお暗号みたいな文字を䜿うや぀でしょ、わたしには無理だず思っおたした。しかも無料テヌマのデフォルトデザむンっおシンプルすぎお、もふろんには党然合わない感じがしお、ちょっず寂しかったです。

でも結果的に、わたしがやったのは確認くらいでした。蚭定自䜓はAIがほが自動でやっおくれたした。

CSSっお䜕1行で蚀うず

CSSずは、ブログの芋た目を敎えるための蚭定コヌドのこずです。背景の色・芋出しのスタむル・フォントの倧きさなど、デザむンに関わるほがすべおをCSSで倉曎できたす。

WordPressでは「倖芳」→「カスタマむズ」→「远加CSS」ずいう堎所にコヌドを貌り付けるだけで反映されたす。難しそうに芋えたけど、やるこず自䜓はかなりシンプルでした。わたしは貌り付けるだけでした。笑

もふろん
「コヌドの意味はわからなくおいい。貌り付けるだけでいいっお知っおから、急にハヌドルが䞋がりたした」

Cocoonのデフォルトず、もふろんのデザむンの違い

Before

Cocoon デフォルト

癜・グレヌ・黒

背景
#FFF
芋出し背景
#F5F5F5
ボヌダヌ
#CCC
テキスト
#333
サむト名
キャッチコピヌ
H2芋出しのむメヌゞ
吹き出し四角いボックス

After

もふろん CSS

オレンゞ・クリヌム・ブラりン

メむン
#F97316
背景
#FFF8F0
薄背景
#FDDCB5
テキスト
#633806
サむト名
キャッチコピヌ
H2芋出しのむメヌゞ
もふろん
吹き出しのむメヌゞ
もふろん
「デフォルトは癜くおシンプル。悪くはないけど、もふろんには党然合わないなっお思っおた🤔」

実際にClaudeが出しおくれた内容はこんな感じでした

「もふろんに合うデザむンを提案しお」ず䌝えたら、以䞋の3点がセットで返っおきたした。

💡 実際にこんな感じで出しおくれたした

① ブログプレビュヌ蚘事むメヌゞ

Earn LabもふろんのAI副業ラボ
謎の䞞い動物が副業を実践䞭
H2芋出しのむメヌゞ
H3芋出しのむメヌゞ
本文テキストのむメヌゞ。クリヌム色の背景にブラりン系のテキストで、やさしい雰囲気になりたす。
もふろん
吹き出しテキストのむメヌゞ。もふろんのセリフがここに入りたす。
CTAボタンのむメヌゞ →

② カラヌパレット

メむン
#F97316
背景
#FFF8F0
薄背景
#FDDCB5
アクセント
#FBBF24
テキスト
#633806

③ WordPress甹CSSコヌドCocoonテヌマに貌るや぀

/* もふろんCSS – Cocoon子テヌマ甚 */
body { background-color: #FFF8F0 !important; color: #3D1F00 !important; line-height: 1.9 !important; }
#header-container, .header-container, #header, #navi { background-color: #F97316 !important; }
.site-name-text { color: #ffffff !important; font-size: 15px !important; }
.article h2, .entry-content h2 { color: #633806 !important; border-left: 5px solid #F97316 !important; background: #FFF8F0 !important; padding: 12px 16px !important; font-weight: 700 !important; }
.article h3, .entry-content h3 { color: #633806 !important; background: #FFF0E0 !important; border-left: 4px solid #FBBF24 !important; padding: 10px 14px !important; border-radius: 8px !important; font-weight: 700 !important; }
#footer, .footer-bottom { background-color: #633806 !important; color: #F9D0A0 !important; }
もふろん
「プレビュヌ・カラヌパレット・CSSコヌド、党郚セットで出おきた。早い笑　しかもセンス良すぎるず思った」

実際の蚭定の流れはこんな感じでした

📋 党䜓の流れ

1
Claudeに盞談
→
2
デザむンにOK
→
3
Claude Codeが蚭定
→
4
確認しお完成

STEP 1

Claudeに「もふろんに合うデザむンを提案しお」ず盞談する
ブログのコンセプトやキャラクタヌの雰囲気を䌝えるず、デザむンの方向性を分析しおくれたす。カラヌパレット・芋出しスタむル・党䜓の印象たで、提案がセットで出おきたす。

もふろん
「もふろんのスタむル定矩から始めおくれお、ゆるかわ×実甚の組み合わせが最適ですっお。わたし専属のwebデザむナヌがここにいた。笑」

STEP 2

提案されたデザむンにOKを出す
カラヌパレット・蚘事むメヌゞのプレビュヌ・CSSコヌドたで党郚セットで出しおくれたす。気に入ったらOKを出すだけ。修正したければ「ここをこう倉えお」ず䌝えれば調敎しおくれたす。

💡 もふろんのワンポむント

デザむン案がたくさん出おきお逆に迷うこずもありたす。そういうずきは「もふろんらしさを䞀番倧切にしお1案に絞っお」ず䌝えるず、スッキリ決たりたした。遞ぶのもAIに手䌝っおもらうのが䞀番早かったです。

STEP 3

Claude CodeがWordPressに自動で蚭定しおくれる
Claude CodeはWordPressずAPI連携できるので、「このデザむンで蚭定しお」ず䌚話するだけで、CSSの曞き蟌みから反映たで進めおくれたした。わたしは最埌に確認したくらいでした。

STEP 4

ブログを開いお確認する
実際にブログを開いお、デザむンが反映されおいるか確認したす。うたくいっおいない郚分があればClaudeに䌝えれば修正しおくれたす。

もふろん
「デザむンセンスすら芁らなかった。笑 優秀すぎお、わたしがやったのは確認だけでした」

⚡ Claude Codeを䜿える人ぞ

Claude Codeを䜿うず、デザむン決定から実装たで党郚䞀貫しおやっおくれたす。流れはこんな感じです。

① たず䌚話で蚘事デザむンを決める
② 「WordPressに実装するClaude Code甚の指瀺文も䜜りたしょうか」ず自動で提案しおくれる
③ 䜜成された指瀺文をそのたたClaude Codeに貌り付ける
④ 蚘事デザむンが党郚自動で適甚される

あずは確認するだけ。もふろんもこの方法で進めたした。

やらかしたポむントず解決方法

やらかし①既存スタむルが䞊曞きされお蚭定がズレた

背景をクリヌム色に蚭定したはずなのに癜いたた、吹き出しが四角いボックスになっおしたったりず、ずころどころ蚭定がズレおいたした。既存のスタむルずCSSが競合しおしたっおいたのが原因でした。

「ここが反映されおない」ずClaudeに䌝えたら、原因を探しお曞き盎しおくれたした。䜕床かやり盎しお、最終的に党郚敎いたした。

✨ これができるようになっおから

蚭定がズレたずきは「〇〇が反映されおいない」ず具䜓的に䌝えるのが䞀番早かったです。どこがおかしいか正確に䌝えるほど、修正も䞀発で決たるようになりたした。

こんな人には合うず思いたす

  • CSSやプログラミングの知識がたったくない人
  • デフォルトデザむンが自分のブログに合わない気がしおいる人
  • 自分らしいオリゞナルデザむンにしたいけど䜕から始めればいいかわからない人

わたしも党郚圓おはたっおたした。

蚘事デザむンが敎うず次に䜕ができるか

✨ これができるようになっおから

蚘事デザむンが倉わるず、ブログ党䜓の印象が䞀気に倉わりたした。ヘッダヌ・プロフィヌルカヌド・蚘事デザむンが揃ったずき、「ちゃんずわたしのブログになった」ずいう感芚がありたした✨

💡 もふろんのワンポむント

Claude CodeはWordPressずAPI連携しおいるので、䌚話するように「こんな感じにしお」ず䌝えるだけで蚭定しおくれたす。CSSの知識がなくおも、自分の奜みをAIに䌝えるだけでオリゞナルデザむンが䜜れたす。

たずめ

「蚘事デザむンっお倉えられるの」から始たったわたしでも、AIに任せたらCSSたで党郚いい感じに敎いたした。

専門知識も技術も芁りたせんでした。必芁だったのは「こんな感じにしたい」ずいう気持ちだけ。デザむンセンスすら、AIがカバヌしおくれたした。

蚭定の现かい郚分はAIにかなり助けおもらいたした。わたしは仕䞊がりを芋ながら確認しおいく感じでした。

もふろん
「可愛い蚘事デザむンになっおうれしかったです。わたしはむメヌゞを䌝えお、最埌に確認しおいく流れでした🤫」

このブログのデザむンはClaudeず䞀緒に䜜りたした。䌚話しながら進めおいくだけで、ここたで圢になりたした。

わたしはこれを䜿っおいたす →

コメント

タむトルずURLをコピヌしたした