ブラックリストのキリンです

延滞、自己破産、債務整理でブラックになった人を応援するブログ

 メニュー

はてなブログの吹き出し会話のCSSをLINE風にアレンジしてみた

f:id:oshaberiitboy:20180730081515p:plain

 

「CSSで吹き出し会話ができるけど、あの吹き出しをもっとLINE風にできないかな?」

 

...今回は、はてなブログの吹き出し会話をLINE風にアレンジする方法について書いていきます。

 

今回のCSSコードで表現できる吹き出しはこんな感じです

こっちの吹き出しは黄緑になるよ!

 

もともと当ブログでは、こちらの記事(以下、アレンジ元サイト)のコードを参考にして吹き出し会話でやり取りをしていました。

 

www.notitle-weblog.com

 

なお、吹き出しのノウハウについてはこちらの記事にもまとめてます。

 

この吹き出しはめちゃめちゃ便利ですが、いまの世の中ならLINE風の吹き出しの方がもっと伝わりやすいんじゃない?...と思ったんです。

 

ちなみに今回紹介するコードを実装する場合は、念のため元のデザインCSSのバックアップは必ずしておてくださいね。何か起きてもトラブルは負いかねます。

 

アレンジは自己流なので、レスポンシブデザインあり・なしやパソコンのOSによっては変な表示になるかもしれないから気をつけて!

 

 

 

デザインCSSに以下のコードを追加する

 

まずは下準備でこちらのコードを ダッシュボード → デザイン → カスタマイズ → デザインCSS にコピペします。

 

ただしコード1番下の「クラス名」「画像のURL」は書き換えが必要です。一旦メモ帳などにコピーして、書き換えてからペーストするとミスが減ってオススメです。

 


/* 吹き出しのCSS(アレンジ版) */
.entry-content .l-fuki {
position: relative;
width: 82%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 15px;
border-radius: 6px;
background-color: #80dd80;
z-index: 1;
}
.entry-content .r-fuki {
position: relative;
width: 82%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 15px;
border-radius: 6px;
background-color: #eae8e8;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 18% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 17%;
}
.entry-content .l-fuki::before{
position: absolute;
content: "";
top: 16px;
width: 13px;
height: 13px;
background-color: #80dd80;
z-index: 2;
}
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 13px;
height: 13px;
background-color: #eae8e8;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::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;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -107px;
}
.entry-content .r-fuki::after {
left: -107px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 73%
}
.entry-content .l-fuki {
margin-right: 27%;
}
.entry-content .r-fuki {
margin-left: 27%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 55px;
height: 55px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

 

アレンジ元サイトのコードと比べると、以下の点を大きく変えました。

 

  • 吹き出しの枠線を消した
  • 吹き出しを着色した
  • 吹き出しの横幅を少し広げた
  • アイコンを少し小さくした...etc

 

 これでより一層、LINEに近い吹き出しデザインになると思います。

 

コード1番下の「クラス名」「画像のURL」はアレンジ元サイトに詳しい入力方法が書いてるよ!

 

HTMLで吹き出し会話のコードを入れる

 

準備が終わったら、記事を書くときにこちらのHTMLコードを吹き出しを使いたい所に入れてください。

 

吹き出しの()内はHTMLのカラーコードです。

 

<p class="r-fuki クラス名">テキスト</p>

 

こっちはグレー(#eae8e8)

 

<p class="l-fuki クラス名">テキスト</p>

 

こっちは緑(#80dd80)。メイン人物はこっちの色がいいかな

 

もちろんアイコンは自分の好きな画像を使うことができます。しっくりくる物を選びましょう。

 

おわりに:LINE風吹き出しのデザインが反映されているかチェックしよう!

 

以上、はてなブログで吹き出しをLINE風にアレンジするコードをお伝えしました。

 

やはりLINE風にすると、自分の意見の説得力がアップするような気がします。

 

コード入力の注意事項として、必ずパソコンとスマホの両方から吹き出しがしっかり表示されるか確認してください。

 

ちなみに管理人の作業環境は以下になります。

 

  • macOS
  • ブログテーマ Brooklyn
  • レスポンシブデザイン対応

 

IEや違うブログテーマの場合は、吹き出しがズレて表示されるなどのリスクもあります。再度言いますが、元のデザインのバックアップは必ずしておいてください。

 

本日は、以上です!