はてなブログをライン風会話形式吹き出しにしてみよう。
この記事は、はてなブログ初心者のごまたまごが、自分のブログをカスタマイズする経過を載せた記事です。 ごまたまごと同じような、はてなブログ初心者の参考になれば幸いです。
今日は、はてなブログに下記のようなライン風な会話形式吹き出しを作成します。
にゃ〜
アイコンを用意・設定
まず、吹き出しにしたい画像を選定します（以下、アイコンと言います。）
なんでもいいです。イラストでも写真でも。
それをまず自分のはてなブログ内にアップロードする作業です。
アイコンが決まったら画像を参考にして設定をしてみましょう。
記事画面の右上の「Hatena」をクリック。
次は「フォトライフ」をクリック。
アップロード画面の右上「アップロード」をクリックするか、ファイルをドラックする。
アップロードした写真が表示される
アップロードした写真をクリックすると、大きな画像になります。その右上「🔗リンク」をクリックし、<img src="~.png"の「"url"」をコピー。このurlは、後で使うのでメモ帳などに貼りましょう。
ライン風会話形式吹き出しのコードをコピー
コードはまるっとCSSにコピーしましょう。
/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .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;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .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;
}
.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: 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;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.クラス名1::after {background-image:url(画像のURL);}
クラス１は、アイコンの名前です。
画像のURLは、先ほどメモ帳に貼り付けた、それぞれのアイコンのURLです。
ちなみに、先ほどのアイコンのねこの場合は、下記の通りです。
.クラス名1::after {background-image:url(画像のURL);}
→.neko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/sa0saa442/20200615/20200615213555.png);}
HTMLへの書き方
さて、これでCSSの設定が終わりました。今度は記事を書く際のHTMLへの書き方です。
HTMLのコードは、下記の通りです。
<p class="l-fuki クラス名">テキスト</p>
先ほどのねこの場合は、下記の通りです。
<p class="l-fuki neko">にゃ〜</p>
にゃ〜
"l-fuki neko"は、右側に表示させるコードになります。
そのため、左側に表示させたい時には、
"r-fuki neko"となります。
にゃ〜
これでできました！
参考にしたサイト
以上のことは、下記のサイトを参考にさせていただきました。ありがとうございます！
