【はてなブログ】【コピペOK】”FLATBOX”のテーマで吹き出しを作る方法

f:id:chi_monluv:20200503223152j:plain

こんにちはー。雰囲気オシャレを大事にするアラサー女子＠chi-sha-です。

先日やっと吹き出し成功しました！！

ブログを始めて１か月超、やっぱり吹き出しのやつやりたい！てことで

やり方を検索していました。

ネットには『はてなブログ　吹き出し』で検索するだけで

コピペするだけ簡単！みたいな記事が出てくると思うんですけど、

そのHTMLとCSSでは成功せず。

何故かアイコンが出ず、吹き出し枠にもならない状態・・下記参照（😢）

f:id:chi_monluv:20200503191356j:plain

この記事ではその失敗理由と解決法（吹き出し作り方）を書いていきます。

吹き出しが作れなかった理由
吹き出しの作り方
CSSの設定方法（デザインCSSへ貼り付け）
使う吹き出しアイコンを設定する（HTML編集）
- アイコン画像設定方法
吹き出し記事を書く（HTMLを使う）
まとめ

吹き出しが作れなかった理由

まず吹き出し失敗理由ですがおそらく・・

『このブログテーマ「FLATBOX」のテーマCSSと吹き出しをつくるCSSで被っている

コード？があるから』

※テーマCSSが優先されて吹き出し CSSが回らなかった・・と推測

この推測に至ったのは、

テーマを『FLATBOX』から変更するとキチンと吹き出しが出来る事を確認できたから。

知識がある方ならここでテーマCSSをちょちょちょいと変更すれば出来るんでしょうが

私はズブのズブの素人。もうお手上げ状態。

というところで、このブログテーマ『FLATBOX』を作成された方の

ブログへ訪問して解決法を見つけました。

吹き出しの作り方

このブログテーマを作成された方は”FOXISM"というブログをされている方です。

本当にすごいです（😢）尊敬・・。”FOXISM"の記事の中の１つですが、

この記事を参考にさせて頂きました。

この記事で作成された『HTML』と『CSS』をコピペで吹き出し成功したので

そのままご紹介しようと思います。

この場をお借りしてお礼申し上げます。ありがとうございました‥。

CSSの設定方法（デザインCSSへ貼り付け）

まずはCSSを設定しましょう。

ちょっと長いですが、下記CSSをデザインCSSへ貼り付けてください

.fuki{
display: -webkit-flex;
display: flex;
margin: 0 0 1.5em 0;
}
.fukiR{
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.fukimg{
width: 64px;
height: auto;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.fukitxt{
padding: 1em;
border: 3px solid #333;
border-radius: 6px;
position: relative;
}
.fukiL .fukitxt{
margin: 0 0 0 15px;
}
.fukiR .fukitxt{
margin: 0 15px 0;
}
.fukitxt::before,.fukitxt::after{
content: '';
position: absolute;
top: 19px;
font-size: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.fukiL .fukitxt::before{
left: -16px;
border-right: 16px solid #333;
}
.fukiL .fukitxt::after{
left: -12px;
border-right: 16px solid #fff;
}
.fukiR .fukitxt::before{
right: -16px;
border-left: 16px solid #333;
}
.fukiR .fukitxt::after{
right: -12px;
border-left: 16px solid #fff;
}