記事内に広告が含まれています。

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

吹き出しできたよ wordpressでブログを作ろう
吹き出しできたよ

  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名が使われていないか確認しよう(今回の場合は「balloon」)

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

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

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

又は

「balloon」をすべて、別の単語に置き換える

 

コメント

タイトルとURLをコピーしました