ブログ記事にLINE風吹き出しをかんたんに載せる方法（はてなブログ）
＊当ページのリンクには広告が含まれています。
こんにちは、ヨシタカです！みなさん、ブログ楽しんでますか？
いろいろなブログをみてると、何やらLINE風の吹き出し形式でおしゃべりして楽しそうなブログがありました。
これはやってみたい！！と思い、わたしもためしてみたので手順などレポートします。
かんたんな手順は以下のとおりです。
LINE風吹き出しかんたん手順
でも、けっこう難しそうなんだけど・・・
いえいえ、かんたんに出来ましたよ。
では、さっそくやってみましょう٩(ˊᗜˋ*)و
- まずはメモ帳にCSSをコピペ
- クラス名と画像URLを記載
- はてなブログのデザインCSSにコピペ
- 実際に記事で使ってみる
- お好みでアレンジ
- モバイルでの確認
- まとめ
- 参考サイト
- はてなブログのカスタマイズ集
まずはメモ帳にCSSをコピペ
まずは下記CSSをメモ帳にコピペしてください。
/* LINE風吹き出し */ .entry-content .me, .entry-content .you { position: relative; width: 82%; box-sizing: border-box; -webkit-box-sizing: border-box; padding: 15px; border-radius: 6px; z-index: 1; } .entry-content .me { background-color: #abf18c; margin: 20px 18% 40px 0; } .entry-content .you { background-color: #dfdce3; margin: 20px 0 40px 17%; } .entry-content .me::before, .entry-content .you::before { position: absolute; content: ""; top: 16px; width: 13px; height: 13px; z-index: 2; } .entry-content .me::before { border-right: 2px solid #abf18c; border-bottom: 2px solid #abf18c; background-color: #abf18c; right: -7px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .entry-content .you::before { border-right: 2px solid #dfdce3; border-bottom: 2px solid #dfdce3; background-color: #dfdce3; left: -7px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .entry-content .me::after, .entry-content .you::after { position: absolute; content: ""; width: 65px; height: 65px; top: -10px; border-radius: 40px; border: 3px solid #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; } .entry-content .me::after { right: -107px; } .entry-content .you::after { left: -107px; } @media screen and (max-width: 620px) { .entry-content .me, .entry-content .you { width: 73% } .entry-content .me { margin-right: 27%; } .entry-content .you { margin-left: 27%; } } @media screen and (max-width: 478px) { .entry-content .me::after, .entry-content .you::after { width: 55px; height: 55px; border-radius: 30px; } .entry-content .me::after { right: -84px; } .entry-content .you::after { left: -84px; } } .クラス名::after {background-image:url(画像のURL);} .クラス名::after {background-image:url(画像のURL);}
余白など調整できますので、興味のある方はいじってみると良いかと思います。幅や色などを調整できます。
ちなみに、#abf18cはグリーン、#dfdce3はグレーです。
meが自分（右）、youが相手（左）としています。
該当箇所を変更すれば、好きな色に変えることが出来ます。
カラーコードはWEB色見本 原色大辞典 - HTMLカラーコードを参考にしてください。
特にいじらずそのままでも大丈夫です^^
クラス名と画像URLを記載
次に、さきほどコピペしたCSSの一番下の部分を変更します。クラス名と画像のURLの2点です。
.クラス名::after {background-image:url(画像のURL);}
たとえば、クラス名を「yoshitaka」、「hatena」として、それぞれに対応する画像URLを記載します。
画像のURLは「＋写真を投稿」でアップロードした写真を「記事編集画面に貼り付ける」で貼り付けてHTML編集タブに切り替えて表示すると下記のようなファイル（https://cdn-ak.f.st-hatena.com/images/・・・）が記載されているので、その部分をコピペすればかんたんにできます。
こんな感じです。
.yoshitaka::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190127/20190127174449.png);} .hatena::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190131/20190131231719.png);}
はてなブログのデザインCSSにコピペ
では、さっそくブログに組み込んでいきましょう！
さきほど作成したCSSをはてなブログ管理画面「デザイン」⇒「カスタマイズ」にある「デザインCSS」の一番下にコピペします。
既に何かしらの記載がある場合は、念の為バックアップをとっておいてくださいね。現状のCSSをメモ帳にコピペして別ファイルで保存しておくといいですね。
実際に記事で使ってみる
さぁ、実際に記事に書いてみましょう。
見たままモードのHTML記述でもいいですし、Markdownならそのまま記述できます。
<p class="me クラス名">テキスト入力</p> <p class="you クラス名">テキスト入力</p>
で吹き出しが出来ます。
たとえば、
<p class="me yoshitaka">けっこうかんたんだったでしょう？</p> <p class="you hatena">ええ、案外かんたんでした！</p>
けっこうかんたんだったでしょう？
ええ、案外かんたんでした！
ってな感じです。
プレビューで確認してみてください。
逆もできます。
<p class="you yoshitaka">けっこうかんたんだったでしょう？</p> <p class="me hatena">ええ、案外かんたんでした！</p>
けっこうかんたんだったでしょう？
ええ、案外かんたんでした！
ってな感じです。
なんか楽しいですね♪
お好みでアレンジ
あくまで「LINE風」なのでアレンジしてみると楽しいです。
吹き出しの色の変更
me（自分）のグリーンをもっとLINEっぽく濃いめにしてみたのですが、文字が読みにくかったので薄めの緑にしてます。you（相手）の吹き出しのグレーをピンクやオレンジにするとかわいくなっていいかも。お好みで色々と試してみてください(^^)
たとえばデザインCSSの「you」に記載していたグレー#dfdce3をピンク#ffc0cbに変更してみると、こんな感じになります。
色を変えると雰囲気が変わりますね。
ええ、けっこう変わります！
アイコン（クラス名）の追加
今回はクラス名2つでのご紹介でしたが、デザインCSSの最後の行のクラス名と対応する画像URLを増やせばパターンが増やせます。3人以上での会話など、にぎやかになりますね。
たとえば、デザインCSSの一番下の部分のクラス名「hatena2」とそれに対応する画像URLを追加してみます。
さきほどの「ハテナくん」に「ハテナさん」（←勝手に命名）が追加で参加しています。
.yoshitaka::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190127/20190127174449.png);} .hatena::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190131/20190131231719.png);} .hatena2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190202/20190202085437.png);}
これを実際に記事に書いてみると、、、
<p class="me yoshitaka">こんにちは٩(ˊᗜˋ*)و</p> <p class="you hatena">こんにちは！</p> <p class="you hatena2">こんにちは♪</p>
こんにちは٩(ˊᗜˋ*)و
こんにちは！
こんにちは♪
ってな感じで３人になりました^^
LINEのグループトークみたいですね。
吹き出し色の追加
さらにmeやyouの記載にならって別の吹き出しパターンを増やしてもいいかもしれません。少し手間ですが、「you」の記載にならって、たとえば「you2」を追加すると吹き出しの色のパターンが増やせます。
<p class="me yoshitaka">けっこうかんたんだったでしょう？</p> <p class="you hatena">そうですね、かんたんでした！</p> <p class="you2 hatena2">ええ、そこそこかんたんでした♪</p>
けっこうかんたんだったでしょう？
そうですね、かんたんでした！
ええ、そこそこかんたんでした♪
こんな感じになります。
モバイルでの確認
最後に、モバイルでも表示が崩れてないか確認してみてくださいね。
使っているブログテーマによっては崩れたり、モバイルとしてもCSSを書かないとちゃんと表示されなかったりするみたいです。
まとめ
けっこうかんたんにLINE風吹き出しができました。
登場人物をもっと増やしたりと色々とカスタムできそうです。会話形式だとブログ記事が賑やかになりますよね。
ぜひ、みなさんもLINE風吹き出しを試してみてくださいね。
ブログがよりいっそう楽しくなりますよ(^^)v
それでは、また٩(ˊᗜˋ*)و
参考サイト
参考にさせていただいたサイトです。
【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG
LINE風の吹き出し会話が簡単にできるCSSを作ってみた（はてなブログ） - 夜中に前へ
はてなブログでLINE風の会話形式の吹き出しを使ってみた！ - ヨリミチ
また、会話のアイコンは「いらすとや」さんのイラストを使わせていただきました。
はてなブログのカスタマイズ集
はてなブログのカスタマイズ記事、まとめてみました。
最後まで読んでいただきありがとうございます！
ぜひ読者になっていただけると更新の励みになります^^
