SWELLに吹き出しブロックを挿入する方法と、著者アイコンをどう決めたか

公開済みの記事に、キャラクター「めんどくん」の吹き出し（SWELLのwp:loos/balloonブロック）を3箇所追加しました。その途中で、サイドバーの共通プロフィールに「めんどくん」名義でサイトのミッション文が入っていたことに気づき、著者（Unmendo中の人）とマスコット（めんどくん）の役割分担をあらためて整理することになりました。

この記事では、吹き出しブロックをコードエディターで安全に挿入する方法と、著者アイコンをどう決めたかの2つを記録します。

結論

吹き出しブロックは、記事全体を一括で書き換える方法だと反映されないことがあります。空の段落を狙って小さく入力するか、文末で改行してから入力する方法が安定します。また、著者アイコンとマスコットキャラクターは役割が違うので、同じ見た目にするかどうかは分けて判断する必要があります。

今回の環境

• 端末・OS：Mac（バージョン未記録）
• アプリ・サービス：WordPress（テーマ：SWELL）、Claude（Cowork、ブラウザ操作でwp-adminを直接編集）
• 前提：ブランドカラー（紺 #0F172A、ティール #14B8A6、ミント #A7F3D0）

困っていたこと

• 記事本文が事実説明中心で単調になりやすく、めんどくんの相槌を要所に挟んで読みやすくしたかった。
• サイドバー共通プロフィールウィジェットに、もともと「めんどくん」名義でサイトのミッション文が入っており、著者（Unmendo中の人）とマスコット（めんどくん）の役割が曖昧になっていた。
• 記事下の「この記事を書いた人」ボックスが、名前だけでアイコン・自己紹介ともに空欄のままだった。

実際に行った手順

1. 投稿編集画面のコードエディターで、公開済み記事の該当箇所にwp:loos/balloonブロックを3箇所挿入した（「文章が苦手でも大丈夫〜」「そこは僕にまかせて〜」「よし、はじめよう〜」）。
2. ビジュアルエディターに戻り、3箇所とも吹き出し（アバター＋名前つき）で正しく表示されることを確認して保存した。
3. 記事下の著者ボックスとウィジェット（外観 > ウィジェット > 共通サイドバー > [SWELL]プロフィール）を確認し、プロフィールウィジェットの名前が「めんどくん」名義になっていたことを発見した。
4. 中の人とめんどくんの役割分担を整理した。中の人＝実在の書き手としての信頼の裏付け（著者ボックス・サイドバー）、めんどくん＝本文中の相棒キャラ（吹き出しのみ）とした。
5. サイドバーの[SWELL]プロフィールウィジェットの名前を「Unmendo中の人」に変更し、プロフィール文を作成、反映・保存した。
6. 著者アイコン用に、顔出しなしで使える候補を4パターン（シルエット、シンプルな顔、Uモノグラム、作業ログのピクトグラム）SVGで作成し、PNG化して提示した。
7. サイドバーの[SWELL]プロフィールとサイトアイコンの両方に、既存のブランドマーク（紺地にティール〜ミントのグラデーションU）を採用した。4候補からは選ばず、ブランドマーク流用という結論になった。
8. 記事下の著者ボックスはWordPress標準のGravatar依存で、サイドバーのアイコン変更が反映されないことを確認した。
9. プラグイン一覧を確認し、ローカルアバター用プラグインが入っていないことを確認した。

うまくいかなかった点と対処法

• コードエディターで記事全体を選択して一括で書き換える方法だと、成功したように見えて実際は反映されない現象が発生した（ツールの応答は成功扱いなのに、実際の画面では変更が反映されていない）。原因は特定できなかった。
• 対策として、空の段落間を正確に狙って小さくテキストを入力する方法、および文末（ドキュメント末尾）で改行してから入力する方法に切り替えたところ、両方とも安定して反映された。
• コードエディター終了後や保存ボタンのクリックで、ブラウザ操作がタイムアウトすることが複数回発生した。数秒待ってから状態を確認し直す、または保存のショートカットキーに切り替えることで解決した。

実際の結果

• 3箇所の吹き出しはすべて公開記事に反映・保存された（リビジョンが4→6に増加したことで保存を確認）。
• サイドバー共通プロフィールの名前・プロフィール文は、Unmendo中の人向けに整理できた。
• 著者アイコンの方針は、「4候補から選ぶ」ではなく「サイトアイコンと同じブランドマークを流用する」という決定になった。

試して分かったこと

サイトアイコンと著者アイコンを同一にする判断は、中の人を「個人」として立てるより「ブランドの声」として運用する方針だと考えています。ブランド認知の一貫性は上がる一方、この時点では記事下の著者ボックス（信頼性の裏付けの場）にはまだGravatarの設定が反映されておらず、サイドバーとは表示が食い違ったままでした。実際のサイトで確認したところ、現在は著者ボックス・サイドバーとも同じブランドマークで統一されています。

注意点

SWELLのコードエディターで長文を一括貼り付け・全選択置換すると、見た目上は成功しても実際には反映されないことがあります。反映確認は必ずスクリーンショットなどで目視してください。ブラウザ操作がタイムアウトしても、実際には処理が完了している場合があります。数秒待ってから状態を再確認するとよいです。

まとめ

SWELLに吹き出しブロックを追加するときは、一括置換ではなく、狙った位置への小さな入力を積み重ねる方が安定して反映できます。また、キャラクターと運営者アイコンの役割が曖昧になっている場合は、「誰が信頼の裏付けを担うか」「誰が本文中の相棒として振る舞うか」を分けて考えると、サイト全体の見せ方を整理しやすくなります。

運営者のひとこと

めんどくんというキャラクターがすでにいるのに、そこでさらに自分の顔や新しいキャラクターを作るのは違うかなと思いました。AIに相談したところ、ブランドマークを流用する案に賛成してもらえたので、この方向で決めました。