コードで画像アイコン付き吹き出しを作りたい

 　Simplicity2で画像付き吹き出しを使いたい。

　「AddQuicktagを使ったら、吹き出し機能がなくても吹き出しが作れるんじゃないだろうか？」と思い付いた。

　意外なところで、うまくかなかったのだが、何とかなったので、お知らせする。

参照元吹き出しを作るコードではうまくいかない

参照元は

https://fantastech.net/kaiwa-text#outline-6

　様

　ただし、デフォルトのコードではSimplicity2ではうまく表示されない。

　なので、元々の参照コードを改造してある。

左側からの吹き出し

<!--左からの吹き出し-->
<div class="huki">
<figure class="huki-image-left">
<img src="画像URL" alt="画像の名称">
<figcaption class="huki-image-description">
名前
</figcaption>
</figure>
<div class="huki-text-right">
<p>
吹き出しの中のテキスト
</p>
</div>
</div><div class=”clear_huki”></div>

右側からの吹き出し

<!--右からの吹き出し-->
<div class="huki">
<figure class="huki-image-right">
<img src="画像URL" alt="画像の名称">
<figcaption class="huki-image-description">
名前
</figcaption>
</figure>
<div class="huki-text-left">
<p>
吹き出しの中のテキスト
</p>
</div>
</div><div class=”clear_huki”></div>

吹き出しのスタイルシート

/*--------------------
吹き出しを作る
--------------------*/
.huki {
margin-bottom: 2em;
position: relative;
}
.huki:before,.huki:after {
clear: both;
content: "";
display: block;
}
.huki figure {
width: 60px;
height: 60px;
}
.huki-image-left {
float: left;
margin-right: 20px;
}
.huki-image-right {
float: right;
margin-left: 20px;
}
.huki figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.huki-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.huki-text-right,.huki-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.huki-text-right {
border-color: #aaa;
}
.huki-text-left {
border-color: #aaa;
}
.huki-text-right {
float: left;
}
.huki-text-left {
float: right;
}
.huki p {
margin: 0 0 20px;
}
.huki p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.huki-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.huki-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.huki-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.huki-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}

なぜ参照元コードがSimplicity2でうまく表示されなのか

　参照元のコード、Simplicity2ではうまく表示されない。

　なぜなら、Simplicity2には、元々吹き出しの機能があるから。

　cssフォルダにある〔extension.css〕の中に、ライン風吹き出しというスタイルシートが入っている。

　このスタイルシートの中で、「balloon」の指定がある。

　このせいで、参照元のコードがうまく機能しない。

　なので、「balloon」を「huki」に変換した。

　Simplicity2テーマのcssフォルダにある〔extension.css〕の中のライン風スタイルシートの部分をコメントアウトしてしまう。

　というのも、ひとつの手だと思う。

画像アイコン付きの吹き出しを設定するまとめ

　画像アイコン付きの吹き出しを設定する時には、

　どこかで、同じclass名が使われていると、うまくいかない。

　Simplicity2で画像アイコン付きの吹き出しを設定するには

又は