吹き出し画像を使ってブログをオシャレにしませんか？はてなブログ『Minimalism』

こんにちは、ジブリッシュマンブログのエイジです。

今回は、ブログの内容を会話型式で面白くできる？自分で記事を書いている時に少し楽しい？と思える吹き出しの画像について、ブログへの設置方法を紹介していきたいと思います。

はてなブログデザインでデザインＮｏ．１の『Minimalism』がシンプルで使いやすいので、こちらで設定出来る方法を説明していきたいと思います。

ちなみに吹き出しとは、こんな感じのやつです（笑）

いままでは私一人だけだったけど、最近は仲間が出来ました！！！

ブヒィ〜（笑）

私のペットのブタちゃんです！！！

私が他の人のブログの吹き出しを見た時に『俺も使いたい』と思って、いろいろと調べて使えるようになりました。

なので、どうですか？使いたいと思いませんか？

自分の似顔絵画像を作りたい人はココナラで安くてクオリティーの高い絵を作ってもらいましょう。

写真を送って出来上がったら、修正して満足の似顔絵をゲットしてみましょう（笑）

詳しうはこちらの記事を参考にしてください。

www.eijilife.com

ただココナラで似顔絵にお金をかけなくても、私のペットのように写真を吹き出しにすることも出来ます。

無料で作りたい人は写真を取って使いましょう。

後ほど紹介します。

この記事でわかること

吹き出し画像をブログに載せる方法
写真を取った画像を吹き出しとして使う
拡張機能を使って、簡単に吹き出しをする
ココナラで作成した画像を吹き出しにする

さらに私のブログで他に必要な絶対入れたほうがいいカスタマイズ１８選を下記の記事で紹介しています。

www.eijilife.com

吹き出し画像を使ってブログをオシャレにしませんか？はてなブログ『Minimalism』

吹き出し画像を使ってブログをオシャレにしませんか？はてなブログ『Minimalism』

吹き出し画像を使ってブログをオシャレにしませんか？はてなブログ『Minimalism』

まずはコピペ作業から終わらせてしまいましょう！！！

『デザイン』➡『カスタマイズ（レンチマーク）』➡『デザインCSS』にいき下のコード

/* 吹き出しのCSS　*/

.balloon{
display: flex;
margin: 0 0 1.5em 0;
}
.balloonR{
flex-direction: row-reverse;
}
.balloon-img{
width: 80px;
height: auto;
flex-shrink: 0;
}
.balloon-text{
padding: 1em;
border-radius: 6px;
position: relative;
display: flex;
}
.balloon-text-inner{
margin: auto;
}
.balloon-text::before,.balloon-text::after{
content: ”;
position: absolute;
top: 19px;
font-size: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.balloonL .balloon-text{
margin: 0 0 0 15px;
background: #fff;
}
.balloonR .balloon-text{
margin: 0 15px 0;
background: #fff;
}
.balloonL .balloon-text::before{
left: -16px;
border-right: 16px solid #fff;
}
.balloonR .balloon-text::before{
right: -16px;
border-left: 16px solid #fff;
}

.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: calc(100% – 82px);
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
order: 2px solid #ddd;
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
background-color: #fff0c6;
z-index: 1;
box-sizing: border-box;
}
.entry-content .l-fuki {
margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
margin: 20px 0 36px auto;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: “”;
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #ddd;
border-bottom: 2px solid #ddd;
background-color: #fff0c6;
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: 60px;
height: 60px;
top: -6px;
border-radius: 50%;

background-size: cover;
background-position: center center;
background-repeat: no-repeat;

box-sizing: border-box;
}
.entry-content .l-fuki::after {
right: -82px;
}
.entry-content .r-fuki::after {
left: -82px;
}
@media screen and (min-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 100px;
height: 100px;
}
.entry-content.l-fuki,
.entry-content .r-fuki {
width: calc(100% – 106px);
}
.entry-content .l-fuki::after {
right: -106px;
}
.entry-content .r-fuki::after {
left: -106px;
}
}
.eijiki::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mynameiseiji/20201122/20201122065148.png);}
.eijiore::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mynameiseiji/20201122/20201122065209.png);}
.eijipig::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/mynameiseiji/20211030/20211030044311.png);}
/* 吹き出しここまで */