はてなブログで『LINE風吹き出し』を使ってみたい！
吹き出し
どもども。しよです。
アイコンが変わってから、アイコンと記事の内容とのギャップがはげしく、マジメなことが書きにくくなってきております。
けど、もう元のアイコンには戻したくない！！
アイコンに寄せていきたいんだ！！！！！
そこで考えました。
もっとくだけた感じにしようと。
で！先日からいろんな人のブログを拝見させてもらっているのですが
くだけた感じにするには吹き出しが１番！という結論に至りました。
ということで、今回は『吹き出し表示に挑戦！の巻』です。
吹き出しを実際にやってみよう！
吹き出しを記事の中に入れてしまおう！！思い立ったら吉日。
さっそく取り掛かります。
参考ブログ探し
まずは参考になるブログを探しまーす。
はてなブログの中から。
いいのあるわ～～。LINE風？いいやん。いいやん。
こちらのブログを参考にさせていただくことにします！
デザインCSSの追加
ほうほう。デザインCSSの追加をするんだな。
/* 吹き出しの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: #49e810;
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: #49e810;
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);}
詳細についてはアレンジ前のブログを参考に！ということで、こちらのブログも拝見させてもらいます。
まず、さっきのCSSをメモ帳で編集ね。
ふむふむ。
下の『クラス名』と『画像のURL』を変更するということね。
クラス名はアルファベットで始める半角英数字か。
あとは画像のURLね。
はてなフォトライフ（ http://f.hatena.ne.jp/my/）の画像を使うので、使いたい画像をクリックして個別画面で開く。
画像の上で『右クリック』⇒『画像アドレスをコピー』
で、そのアドレスを『画像のURL』へ。
キャラが２つだけじゃなくてもいいみたいなので５つ追加してみます！
で。それをCSSに追加するのね。
『デザイン』⇒『カスタマイズ』⇒『デザインCSS』を開いてコピペ。
これで設定は完了。
吹き出しスタート～～(´⊙ω⊙`)
設定が完了したので実際にやってみます。
記事を書く際に次のHTMLコードを記載するということ。
“l-fuki”のｌは縦棒ではなく小文字の “l”（エル）でアイコンが右で吹き出しが左。
<p class="l-fuki shokupan">テストテスト。吹き出しテスト～～</p>
<p class="r-fuki ojisan1">返事返事。吹き出し返事～～(´⊙ω⊙`)</p>
プレビューで見てみる…
ちゃんとなってる！
すごい。
『見たままモード』でChromeの拡張機能を使うと簡単にできるみたいです。
それを参考に拡張機能も使ってみることにしました。
詳細については上にある2つ目のブログに書いてありました。
拡張機能を使ってみたい人はどうぞ！
注意点
吹き出しの中ではEnterキー使っての改行ではなくShift+Enterなんだって。
試しにEnter押してみたらそこで吹き出しが分かれちゃいました。
もっと簡単な方法あるのかな？？(´⊙ω⊙`)
ということでご活用くださいませ～～
