【はてなブログ】cssを使って会話形式の吹き出しの作り方

ブログの記事を見ているとよくLINEの会話形式のような場面を見ることってありますよね？

筋トレするぜ！

ちょっと休憩中～。

会話形式を使うと、記事全体がポップにかわいらしくなり文字に色を使ったりマーカーを引くのとはまた違った、強調の仕方ができるのでとてもいいですよね！

今回は、CSSの設定だけで簡単に会話形式の吹き出しの設定方法をご紹介したいと思います。

会話形式の吹き出しの作り方

画像の準備

まずは使用したい画像の設定をする必要があります。
設定方法は以前の記事にやり方を書いてあるので、そちらを参考にしてみてください！

一緒に読みたい

• 【はてなブログ】プロフィールをCSSを使って自分好みに作成する方法

設定が完了したら、使用する画像のURLを取得する必要があるので、取得します。 取得方法はいろいろありますが、一つの例として下記の画像を参考にしてみてください。 上記画像のように、取得したい画像の上で右クリック＞画像アドレスをコピー（C）を選択することで取得できます。

CSS記述内容

/*--------------------------------------
   会話形式の吹き出し
--------------------------------------*/
/* 吹き出しのCSS*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 2.5%;
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:70px;
height:70px;
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;
}

}
.クラス名::after {background-image:url(画像URL);}
.クラス名::after {background-image:url(画像URL);}

下から二行の「.クラス名::after {background-image:url(画像URL);}」の記述は自分で編集する必要があります。

クラス名は自分の好きな名前を、半角の英数字でつけてください。
そして、"()"の中に取得した画像のURLを記述しましょう。

HTML記述内容

記述するうえ吹き出しを左右どちらに表示させる必要があるので、下記の内容を覚えてください。

• 吹き出しが左に来るようにする→l-fuki
• 吹き出しが右に来るようにする→r-fuki

HTMLでの記述は下記のような記述内容になります。

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

【スポンサーリンク】

プレビュー

実際に表示される以下のようになります。

わーい！

……。

最後に

会話形式にすると、掛け合いのような表現や急な話題変更の時でも、自然に表現ができるため適切に使用するととても便利です！

うまく使えば、自分のブログの独自性やキャラ性を持たせることができるので、是非参考にしてみてください！

一緒に読みたい

• 【はてなブログ】CSSでボックスデザイン(囲い枠)の作成方法
• 【はてなブログ】記事一覧をCSSの設定だけでタイル表示にする方法