ブログの吹き出しの作り方と貼り方
このページは、ブログ記事に会話風の吹き出しを入れるためのHTMLを無料で作るツールです。登場人物とセリフを入力すると、アイコン付きの吹き出しがその場でプレビューされ、できたコードを記事に貼るだけで使えます。WordPressのテーマに吹き出し機能がない場合や、はてなブログで会話形式の記事を書きたいときに便利です。
3ステップで会話の吹き出しを作る
- 登場人物を登録する：名前・アイコン・色・左右の位置を決めます。アイコンはサンプル（ネコ・男性・女性・先生・ロボット・イヌ）から選ぶか、自分の画像のURLを入力します。
- セリフを入力する：話す人を選んでセリフを入れます。「＋ セリフを追加」を押すと、話す人が交互に切り替わります。
- デザインを選んでコピーする：スタンダード、塗りつぶし、LINE風、影付き、考え中、フラットの6種類から選び、アイコンの形や大きさを調整して「コピー」を押します。
会話をまとめて入力する
「会話をまとめて入力する」を開き、1行に「名前：セリフ」の形で書いて「読み込む」を押すと、複数のセリフを一度に吹き出しにできます。台本やメモからそのまま貼り付けられるので、会話の多い記事でも手早く作れます。登録にない名前は、新しい登場人物として自動で追加されます。
セリフの中で「**太字**」と書くと太字に、「==マーカー==」と書くと黄色いマーカーを引いた文字になります。
アイコン画像の用意のしかた
自分のキャラクターや似顔絵を使いたい場合は、画像をブログにアップロードしてURLを入力します。
- WordPress：「メディア」→「ライブラリ」で画像を開き、「URLをクリップボードにコピー」を押します。
- はてなブログ：記事の編集画面で画像を貼り付け、HTML編集に表示される画像のURLをコピーします。
正方形の画像を使うと、丸や角丸に切り抜いたときにきれいに表示されます。
「インライン」と「CSSクラス」の違い
インラインは、見た目の指定をHTMLの中に直接書き込む形式です。コードは長くなりますが、どのブログにもそのまま貼れて、テーマの影響も受けにくくなります。
CSSクラスは、見た目の指定をCSSとして分ける形式です。CSSをサイトに1回登録すれば、記事に貼るHTMLが短くなり、あとからデザインを変えたいときもCSSを1か所直すだけで済みます。吹き出しをたくさんの記事で使う人に向いています。
ブログへの貼り方
- WordPress：ブロックエディタで「＋」から「カスタムHTML」ブロックを追加して貼り付けます。CSSクラス形式の場合は、CSSを「外観」→「カスタマイズ」→「追加CSS」に貼ります。
- はてなブログ：記事の編集画面で「HTML編集」タブに切り替えて貼り付けます。CSSクラス形式の場合は、CSSを「デザイン」→「カスタマイズ」→「デザインCSS」に貼ります。
読みやすい会話記事にするコツ
- 1つの吹き出しには2〜3行までを目安にし、長い説明は普通の文章で書きます。
- 登場人物ごとに色と左右の位置を固定すると、誰の発言かがひと目で分かります。
- 質問役と説明役を決めておくと、読者の疑問に答える流れが自然に作れます。
よくある質問
- 無料で使えますか？
- はい、すべての機能を無料で使えます。会員登録も必要ありません。
- サンプルのアイコンはブログで使ってもいいですか？
- はい、このツールで作った吹き出しにそのまま使えます。
- 入力した内容は保存されますか？
- このブラウザの中にだけ自動で保存され、次に開いたときに続きから作れます。サーバーには送信されません。「入力内容をリセット」で消せます。
- スマホでも崩れませんか？
- 吹き出しの幅は画面に合わせて自動で縮みます。プレビューの「スマホ」ボタンで表示を確認できます。