トップページの見せ方を指示する
テーマがブログに表示されたら、次はページごとに見せ方を整えていきます。最初は、ブログの顔になるトップページです。
この記事では、ハナさんがトップページで直したいところを言葉にして、Claude Code に直してもらった様子を、実際の画面で紹介します。
記事を入れてから見る
テーマを入れたばかりのブログには、まだ記事が1本もありません。そこでハナさんは、まず書評の記事を3本と、カテゴリを入れてみました。記事が並ぶと、トップページはこうなりました。
ブログの名前の下には、テーマを作ったときに Claude Code が足した「いまの気分から、探す」の欄が出ています。その下に記事が並んでいます。
直したいところを言葉にする
この画面を見て、ハナさんには直したいところが3つありました。ブログの紹介と自己紹介を入れたいこと、デザインが少しさみしいこと、そして「続きを読む」を右寄せのボタンにしたいことです。
ハナさんは、この3つをそのまま言葉にして頼みました。あわせて、公開したブログの URL も知らせています。
ブログを公開しました。URL は https://dor.xsrv.jp/ です。この URL を、ブログ部門の CLAUDE.md に書いておいてください。
そのうえで、トップページを直したいです。いまの表示も見て、確かめながら直してください。
・「いまの気分から、探す」の上に、ブログの紹介と、私の自己紹介を入れてください。紹介の文は固定ページで書いて、あとから自分で直せるようにしたいです。
・少しデザインがさみしいので、タイトルの両脇に、緑色で木々を感じさせる飾りを入れてください。
・記事の「続きを読む」は右寄せにして、ボタンの形にしてください。
URL を知らせておいたので、Claude Code はまず実際のブログを開き、いまのトップページを確かめてから作業を始めました。
CLAUDE.md にも書いてもらったので、次からは URL を伝えなくても済みます。
Claude Code からの報告
報告には、やったことが4つ並んでいました。まず URL を CLAUDE.md に書き足し、「いまの気分から、探す」の上には、選んだ固定ページの本文が出る場所を作ったそうです。
見た目のほうは、タイトルの両脇に緑の針葉樹と丸い木の飾りを入れ、「続きを読む」を右寄せの深い緑のボタンにしてくれました。
紹介の文のたたき台も用意してくれていました。使ったのは、ハナさんが「プロフィールに出してよい」と決めていたことだけです。
報告の最後には、テーマを入れ直し、固定ページを作ってトップに選ぶまでの手順も、一歩ずつ書いてありました。テーマの入れ直し方と管理画面の基本は、それぞれこちらの記事で紹介しています。
関連記事：できたテーマを自分のブログに反映する
関連記事：管理画面を触るのはあなた、WordPress の基本を押さえる
思っていたのと違ったら
ところが、テーマを入れ直し、固定ページを作ってトップに選ぶと、トップページには固定ページの文章がまるごと出てきました。
ハナさんが思い描いていたのは、トップにはリンクを置いて、紹介の文は固定ページで読んでもらう形でした。
けれど頼んだときは「紹介を入れて、文は固定ページで書きたい」と伝えただけで、リンクにしてほしいとは言っていません。
そのため Claude Code は、固定ページの本文をそのままトップに出す作りにしていました。
そこでハナさんは、どこが違うのかを言葉で伝え直しました。
トップに、固定ページの文章がまるごと出てしまいました。私が思っていたのとは違います。
固定ページは「このブログについて」と「プロフィール」の2つに分けました。トップの「いまの気分から、探す」の上には、文章は出さずに、この2つのページへのリンクだけを置いてください。
Claude Code は、もう一度ブログを開いて原因を確かめ、リンクだけを置く形に作り直しました。スマホでは2つのリンクを縦に並べる工夫も、自分で考えて入れてくれました。
思っていたのと違っても、どこが違うかを言葉にして、もう一度頼めば大丈夫です。伝え方のコツは、こちらの記事で紹介しています。
関連記事：口で伝えて直す、伝え方のコツ
直したあとのトップページ
直したテーマを入れ直すと、トップページはこうなりました。
タイトルの両脇には木々の飾りが入り、その下に「このブログについて」と「プロフィール」へのリンクが並んでいます。記事の「続きを読む」は、右寄せの深い緑のボタンになりました。
ハナさんのブログは見本として公開しているので、いまの形を実際に開いて確かめられます。
できたテーマを自分のブログに反映する
カテゴリページの見せ方を指示する
