Livedoorブログ(ライブドアブログ)を利用していますが
他の方のブログで、よく見る「吹き出し会話」が出来ないのか?

無料のLivedoorブログでも吹き出し会話ができます!

WordPressの利用者が「LIQUID SPEECH BALLOON」を
利用されている方が多いと思いますが
無料のLivedoorブログでも出来ますよ!

CSSの準備と言ったら、小難しいと思う方も多いと思いますが
コピペで簡単にできますので、以下の順で
「吹き出し会話」が出来るようになります。
 ①画像の準備
 ②CSSの準備
 ③ブログ記事の編集

では、このブログ記事で順に、「吹き出し会話」を入れて見ましょう!

  • 画像の準備
①まずは、貼り付ける顔などの画像を準備します。
Face
イラストなどのフリー素材で困ったら?
こちらのアイコンは、イラストACを利用しています

②画像は、いつものとおりアップロードするだけです。
無題
画像のURLを控えてください。
画像の上にカーソルを合わせて「編集」で確認できます。
無題
  • CSSの準備
①次の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;
}
}
.AAAAA::after {background-image:url(https://livedoor/11111.jpg);}
.BBBBB::after {background-image:url(https://livedoor/22222.jpg);}
  黄色の部分:画像の名前を入れます。
  緑色の部分:画像のURLを入れます。
  ※この例は2つの画像登録ですが、1つでも大丈夫です

②拡張子をcssにして保存します。
無題
③保存したCSSファイルをアップロードします。
「画像/ファイル」→「ファイル管理」→「アップロード」で
ファイルをアップロードすることができます。
無題
CSSのURLを控えてください。
アップロードしたファイルをクリックするとブラウザで表示されますので
URLが確認できます。
無題
  • ブログ記事の編集
①記事内に以下の1行を追加します。
「HTMLタグ編集」ボタンをおすとHTML編集画面に切り替わります。
<link href="http://xxxxxx/AAAAAA.css" type="text/css" rel="stylesheet" />
       赤文字:CSSのURLを記載します。(緑色:CSSファイル名

②吹き出し会話の入力です。
<p class="r-fuki AAAAA">左からの吹き出し会話です。</p>
<p class="l-fuki AAAAA">右からの吹き出し会話です。</p>
  r-fuki:右からの吹き出し会話の時に指定
  l-fuki:左からの吹き出し会話の時に指定
  AAAAA:CSSでしたアイコン名を指定

③編集画面に戻すと、下図のように表示されています。
もう一度、「HTMLタグ編集」ボタンを押すといつもの編集画面に戻ります。
無題
④大丈夫です。「プレビュー」で確認すると吹き出し会話の完成です!
無題
⑤今後は、「プログ記事の編集」で利用可能です。

ライブドアブログは無料ですが、少し手を加えることで
ここまで出来ます!


にほんブログ村 小遣いブログ ANAマイル・SFC修行へ