ライブドアブログでもこのようなフキダシ入りのセリフをブログ記事内に挿入することができます。
やり方を解説します。スマホ版でも反映されますよ！
まず正方形の顔のイラストを必要な数だけ用意します。
自分で描くか、フリー素材を使用しましょう。
こういうアイコンが、
吹き出しにおさめるとこのように縮小され円形になります。
アイコンのサイズは任意でOKですが、縮小された時の見栄えを考えて制作されるといいと思います。アイコンをアップロードし、「編集」でわかりやすい名前（半角英数字）をつけます。
アイコンの名前は「編集」→「タイトル」で変更できます。
名前をつけてからアップロードしてもOKです。
外部CSS（スタイルシート）ファイルを用意します。
まず、これ↓をメモ帳にコピーします。
/* 吹き出しのCSS */
.article-body .l-fuki,
.article-body .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.article-body .l-fuki {
margin: 20px 20% 40px 0;
}
.article-body .r-fuki {
margin: 20px 0 40px 19%;
}
.article-body .l-fuki::before,
.article-body .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.article-body .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.article-body .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.article-body .l-fuki::after,
.article-body .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.article-body .l-fuki::after {
right: -110px;
}
.article-body .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.article-body .l-fuki,
.article-body .r-fuki {
width: 70%
}
.article-body .l-fuki {
margin-right: 30%;
}
.article-body .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.article-body .l-fuki::after,
.article-body .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.article-body .l-fuki::after {
right: -84px;
}
.article-body .r-fuki::after {
left: -84px;
}
}
.アイコンの名前::after {background-image:url(画像URL/〇〇/〇〇.jpg);}
.アイコンの名前::after {background-image:url(画像URL/〇〇/〇〇.jpg);}
.アイコンの名前::after {background-image:url(画像URL/〇〇/〇〇.jpg);}
の部分を行数＝用意したアイコンの数に増やし、「アイコンの名前」を自分でつけた名前に（行頭のドットを消さないように）、「画像URL/〇〇/〇〇.jpg」をアップロードした画像のURLに書き換えます（カッコは消しません）。JPGでもPNGでもOK。画像のURLは、アップロードした画像の名前を右クリックして「リンクのアドレスをコピー」でクリップボードにコピーできます。
拡張子を.cssにして自分のPCに保存します。
私は「kao.css」にしています。
cssファイルをライブドアブログにアップロードします。
「画像/ファイル」→「ファイル管理」→「アップロード」。
cssタグを用意します。
下の一文をメモ帳にコピーしてください。
<link href="http://〇〇/〇〇.css" type="text/css" rel="stylesheet" />
「ファイル管理」画面でcssファイル名（上の場合は「kao.css」）を右クリックして「リンクのアドレスをコピー」でURLを取得できます。
書き換えたCSSタグを「定型文」に登録しておきます（私の場合は<link href="https://cofffeee.net/kao.css" type="text/css" rel="stylesheet" />この赤字の部分を登録）。
ラベル（定型文の名前）は自分がわかればOK（「吹き出し用css」など）。
そして以下の２文も赤字部分をそのまま定型文に登録しましょう。フキダシ用タグです。
右側にフキダシ（アイコンの位置は左）
<p class="r-fuki �．▲ぅ灰鵑量樵�">ここにセリフを記入</p>
左側にフキダシ（アイコンの位置は右）
<p class="l-fuki �．▲ぅ灰鵑量樵�">ここにセリフを記入</p>
これで準備は終わりです！
あとは記事を書く時に、冒頭にcssタグを定型文から貼ります。
これ↓はタグが見えるように「htmlタグ編集」画面で貼ったもの。
※cssタグを定型文から貼る時はHTML編集画面にしなくても大丈夫です（その場合、貼ったタグは見えません）が、フキダシはHTML編集画面でアイコンの名前を書き換える必要があります。
cssタグの下に記事を書いていきます。
フキダシを入れたい部分には定型文から右または左フキダシタグを挿入し、HTMLタグ編集画面を開きます。
「�．▲ぅ灰鵑量樵亜廚鮖箸い燭ぅ▲ぅ灰鵑量樵阿法福�fuki」の後の半角スペースを消さないよう注意）、「ここにセリフを記入」を任意のセリフに書き換えます。
右吹き出しはこうなります。
左吹き出しはこうなります。吹き出しの中に画像を入れることもできます。
※吹き出し前後の改行は、通常編集画面だとうまく行かないので、HTMLタグ編集画面を開いて改行タグ<br />の追加・削除で手動調整しましょう。
※やりがちな失敗
フキダシの中身を編集していると</p>を消してしまったり、ライブドアブログが自動挿入してくる<div></div>をどっちか消してしまったりして表示が崩れがちです。
フキダシタグの</p>は消さない・ずらさないこと（この位置までがフキダシ内に収まるセリフになるという区切りです）、divを消す時は<div></div>をセットで消すこと、これらを気をつけましょう。
フキダシで会話形式にすると長文も読みやすくなりますよね。
同じ外部スタイルシートに書けば、スマホ版でも見出しや枠など気に入ったデザインを反映させることができますよ。
cssファイルを修正してアップロードし直した場合、古いファイルのキャッシュが読み込まれてしまい変更が反映されないことがあります。
「ファイル管理」画面でアップロードしたcssファイルをクリックして開き、修正した部分が変更後のものかどうか確認してみてください。
古いファイルが表示されている場合は、そのままリロードしてみてください。
最新のファイルに更新されれば、キャッシュが置き換わっていますので、以後は正しく表示されるはずです。
動画を貼る方法やAmazonアソシエイトに申請否認された話など、ライブドアブログ制作についての小ネタやブログ運営日記をこちらにまとめています。
こちらの記事もいかがですか？
△クリックいただけると嬉しいです△
タグ
コメント
承認後に表示されますコメント一覧 (5)
最近ライブドアブログを始めて、こちらのブログ参考にさせていただいております!
CSSの知識がなく恐縮なのですが、吹き出しの幅を、文字数に合わせることは可能でしょうか？
他のサイトを見てCSSを色々いじってみたのですが、上手く行かず…
教えていただけると大変助かります。
よろしくお願いいたします！
コメントありがとうございます。
吹き出しの幅、同じことを考えて独学でCSSをいじってみたことがありますが、うまくいきませんでした。お役に立てず申し訳ないです。
お返事ありがとうございます!
そうなんですね、やはり難しいのですね。。
HTMLが一番シンプルでとても使いやすいので、このまま使わせていただきます(*^^*)
ありがとうございました☆
吹き出しとコメントは表示されますが、アイコンのみ表示されません。
何か考えられる間違いはありますでしょうか？
https://ruuuchannel.blog.jp/archives/15668671.html
コメントありがとうございます。
ふきだしタグ間違い（アイコン名大文字小文字、半角スペースや""が消えてるなど）がないとしたら、もしもcssファイルを一度アップした後、修正して上書きアップロードされた場合は、一度「ファイル管理」からcssファイル名をクリックして開き、アイコンの名前やURLなどが最新のものになってるかどうかご確認ください。
修正前のものが出てくるとしたら、F5や更新ボタンを押してみてください。
それで修正後のものが出てくれば大丈夫だと思います。
改善しない場合は原因が想像つかず申し訳ないです。