医-ラーニング

医-ラーニング

医療事務や医療情報系のお勉強とその他イロイロ

はてなブログで『LINE風吹き出し』を使ってみたい!

吹き出し

どもども。しよです。

アイコンが変わってから、アイコンと記事の内容とのギャップがはげしく、マジメなことが書きにくくなってきております。

けど、もう元のアイコンには戻したくない!!

アイコンに寄せていきたいんだ!!!!!

 

そこで考えました。

もっとくだけた感じにしようと。

で!先日からいろんな人のブログを拝見させてもらっているのですが

くだけた感じにするには吹き出しが1番!という結論に至りました。

ということで、今回は『吹き出し表示に挑戦!の巻』です。

 

吹き出しを実際にやってみよう!

吹き出しを記事の中に入れてしまおう!!思い立ったら吉日。

さっそく取り掛かります。

 

参考ブログ探し

まずは参考になるブログを探しまーす。

はてなブログの中から。

いいのあるわ~~。LINE風?いいやん。いいやん。

oshaberiitboy.hatenablog.com

こちらのブログを参考にさせていただくことにします!

 

デザイン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);}

 

詳細についてはアレンジ前のブログを参考に!ということで、こちらのブログも拝見させてもらいます。

www.notitle-weblog.com

 

まず、さっきのCSSをメモ帳で編集ね。

ふむふむ。

下の『クラス名』と『画像のURL』を変更するということね。

クラス名はアルファベットで始める半角英数字か。

 

あとは画像のURLね。

はてなフォトライフ http://f.hatena.ne.jp/my/)の画像を使うので、使いたい画像をクリックして個別画面で開く。

画像の上で『右クリック』⇒『画像アドレスをコピー』

で、そのアドレスを『画像のURL』へ。

キャラが2つだけじゃなくてもいいみたいなので5つ追加してみます!

 

で。それをCSSに追加するのね。

『デザイン』⇒『カスタマイズ』⇒『デザインCSS』を開いてコピペ。

これで設定は完了。

f:id:sho-sh:20180805185418p:plain

 

吹き出しスタート~~(´⊙ω⊙`)

設定が完了したので実際にやってみます。

記事を書く際に次のHTMLコードを記載するということ。 

 

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

“l-fuki”のlは縦棒ではなく小文字の “l”(エル)でアイコンが右で吹き出しが左。

“r-fuki”はアイコンが左で吹き出しが右。

 

<p class="l-fuki shokupan">テストテスト。吹き出しテスト~~</p>
<p class="r-fuki ojisan1">返事返事。吹き出し返事~~(´⊙ω⊙`)</p>

 

プレビューで見てみる…

f:id:sho-sh:20180805182800j:plain

ちゃんとなってる!

すごい。 

 

『見たままモード』でChrome拡張機能を使うと簡単にできるみたいです。

それを参考に拡張機能も使ってみることにしました。

詳細については上にある2つ目のブログに書いてありました。

拡張機能を使ってみたい人はどうぞ!

 

注意点

吹き出しの中ではEnterキー使っての改行ではなくShift+Enterなんだって。 

試しにEnter押してみたらそこで吹き出しが分かれちゃいました。

 

もっと簡単な方法あるのかな??(´⊙ω⊙`)

 

ということでご活用くださいませ~~

 

ブログランキング・にほんブログ村へ
ポチっとお願いします