{background-image:url(画像のURL);}このコードはクラス名が重複しなければ、いくら増やしてもOKです。今後使いそうな人物やキャラをどんどん追加しておきましょう。新しく画像をアップロードして、画像のURLを取得するところまで説明します。はてなフォトライフに行き、「アップロード」をクリック画像を点線の枠の中にドラッグします。待つと画像が表示されるので、右クリック→「画像アドレスをコピー」で画像のURLをコピーできます。スマホでの表示方法スマホでの使い方が分からないという声があったので、こちらも説明しておきます。スマホで適用する場合(レスポンシブに設定していない場合)は、デザイン→スマートフォン→ヘッダー→タイトル下にCSSを記述します。<style>この中にCSS</style>で囲ってその間にCSSを記述して下さい。デザイン→スマートフォン→記事→記事下でも大丈夫です。<style>この中にCSS</style>レスポンシブにしている場合は、この設定は不要です。初期設定が完了したら、実際に編集画面で記事を編集していきます。見たままモードでChrome拡張機能を使ってみよう上の設定が完了したら、後は簡単です。吹き出しにしたい文章を選択します。選択したら、ブラウザの右上にあるChrome拡張のボタンをクリックしてポップアップを出します。Class」をクリック(EnterキーでもOK)します。「l-fuki」と「クラス名」の間には半角スペースを空けて下さい。l←これ縦棒じゃなくてエルね。筋肉は全てを解決する。Class」をクリック(EnterキーでもOK)します。350gを徹底する事が全ての基本。クラス名というのは、CSSで付けた任意のクラス名です。表示する画像と紐づいています。表示したい画像のクラス名を入力して下さい。見たままモードの編集画面では変化しているように見えませんが、プレビュー画面で見るとちゃんと吹き出しがついて会話形式になっているのが分かります。最後に少し注意事項があるので必ず読んでください。Chrome拡張機能を使わない方法Chrome拡張を使った方が多分楽ですが、HTMLを直接編集してもOKです。pタグにクラスを入れて下さい。「l-fuki」「r-fuki」と「クラス名」の間は半角スペース。「Markdown」や「はてな記法」でも下のタグを使えばいけるはず(多分)。クラス名">テキスト</p>ニート・ホームレス・ブロガーは社会の三大底辺。クラス名">テキスト</p>オキシトシン点鼻薬を試してみてはどうか。見たままモードの編集画面上では吹き出しになっているのが確認できません。プレビュー画面で表示を確認しつつ、執筆して下さい。吹き出しの中で改行する場合、「Enter」キーをクリックして改行しないで下さい。吹き出し内で改行する際は、「Shift」+「Enter」で改行して下さい。再度言いますが、一度吹き出しにした文章内で「Enter」キーで改行は厳禁なので気をつけて下さい。どんなことになるかは試してみてプレビュー画面をみれば分ります。全文書いた後の仕上げに使うのがオススメです。間違えて吹き出しにしてしまった場合、該当する文を選択し拡張のポップアップを出して「書式を初期化」をクリックすると通常の文に戻ります。この記事書くために少し試しましたが、一度設定してしまえばめっちゃ楽。余談(技術的なあれこれ)通常、会話形式のHTMLのp要素とimg要素をdivタグで囲むのが一般的なのですが、頑張ってp要素(+疑似要素)だけで実装してみました。吹き出しの表現は疑似要素のbeforeとafterを両方使うのですが、画像表示のためにafterを使う必要があったので、beforeだけで吹き出しの三角を表現する必要がありました。四角の2辺に色付けてtransformで45度・135度回転させたら「<」「>」←こんな形に見える!という発見をしました。これは我ながらファインプレーだと思います。いうことでいつものアッピールww欲しいものリスト私も会話形式で書きたいという願望はあるのですが、普段あんまり人と会話してない気がする。他にもこんな記事書いてます。最近お小遣い増えてきたので、ブログでお小遣い稼ぎする方法を公開。SHIROMAGWEB制作やブログのカスタマイズを学びたい人には、この記事がおすすめ。超初心者のためのHTML・CSS入門講座HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ当ブログではたくさんのカスタマイズ記事を書いています。PMご教授ありがとうございました。PMこちらの記事を参考に実装してみました。説明も解りやすく、特に迷うこともなく無事実装できました。1つ質問なのですが、この吹き出しを本文内でなく、ヘッダタイトル下に表示させる場合、CSSのタイトル下部分の記述に追記が必要かと思いますが、具体的にどのような追記が必要でしょうか?よろしかったらご教授下さい。(id:topbm7nono)さん上記CSSを以下のように書き換えて追加して下さい。すればヘッダー下にも利用できます。PMシロマティさん早速のご回答に感謝です。クラス名とかで迷うことが多くて参考にしてるはてなブログのカスタマイズ本を読んでいても、こういった躓きをたまにしちゃうんですよね^^;早速、試してみますね。ありがとうございます。600px;など最大の横幅を指定しておくと良いかもしれません。(id:shiromatakumi)さん先日はありがとうございました。当方のブログは、諸事情でライブドアブログに移転して続けていますが、せっかく参考にして実現した会話形式記事で当初苦戦しましたが、この度、無事実装に漕ぎ着けました。実現にあたり、この記事で紹介されているCSSをベースにさせて頂きました。詳細は、下記の記事に書いてありますので一応、ご確認下さい。(特に問題はないと思いますが...)http://www.allaa.jp/entry/20170319-blog_To_customize改めて、ご教授頂き感謝致します。ありがとうございました。いつもブログ閲覧させていただいています。AMはじめまして!今回吹き出し作成方法を参考にさせていただきました。PM今日この記事の通り試しました。吹き出しは出るのですが画像がURLを記事通りにしたのですが何度やっても反映されませんでした。すれば反映されるのでしょうか?アドバイスの方よろしくお願いします。さんCSSの、.クラス名::JUNこれを.JUN::afterに直して下さい。いつもカスタマイズ記事参考にさせていただいています!自分はレスポンシブ設定を使用しているのですが、スマホだと吹き出しが表示されません。AMめちゃくちゃ参考にさせていただきます!とてもわかりやすいです。AMCSSに明るくない私でもすごくわかりやすく、簡単に扱えました!ありがとうございます。この記事のおかげて、吹き出しでの会話が楽に行えています!ずっと、気になっていることがあるのですがイメージの下に名前を追加することはできるのでしょうか?ワードプレスのかたをみると、名前を記入している方が多いので、シロマ様が紹介してくれた方法でも、できるのかな?と思いまして。