【プラグイン不要】WordPressでアイコン付きのふきだしが使えるCSS

前々からずっと使ってみたかった「アイコン付きのふきだし」を実装しました。

「アイコン付きのふきだし」とは、こんな感じのものです。

アイコンは左右どちらでも表示させることができます。

WordPressでCSSを使って出しているので、プラグイン不要で使うことができます。・・・というわけで、実装方法です。

会話形式もOK！アイコン付きのふきだし
1. アイコン付きのふきだしのCSS
2. HTML
まとめ

会話形式もOK！アイコン付きのふきだし

「アイコン付きのふきだし」実装はCSSを使います。

実装の手順は２つだけです。

まずCSSのコードをコピーして、スタイルシート（style.css）に貼りつけます
記事内のふきだしを使いたいところにHTMLタグを挿入します

これで、アイコンとふきだしが表示されます。

では、まずはCSSのコードです。

アイコン付きのふきだしのCSS

コピーしてスタイルシート（style.css）に貼りつけます。Simpliciyの場合は、子テーマの（style.css）でOKです。

ソースコード

/*****ここから会話のCSS*****/
.talk-wrap{
 display: block;
 clear: both;
 margin:0 auto 3px auto;
 }
.talk-wrap p{
 margin:0;
 }
 .left-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: no-repeat;
 background-size: cover;
 background-position: center;
 float:left;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
 border: 3px solid #fff; /*左のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-left{
 float:right;
 position: relative;
 background: #fff; /*左の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
 margin-bottom: 10px;
 }
.talk-left:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-right-color: #666;
 position: absolute;
 left: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-left:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-right-color: #fff;
 position: absolute;
 left: -16px;
 top: 25%;
 margin-top: -8px;
}
 .right-icon{
 width: 100px;
 height: 100px;
 border-radius: 50%;
 -webkit-border-radius:50%;
 background: no-repeat;
 background-size: cover;
 background-position: center;
 float:right;
 display:inline-block;
 box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
 border: 3px solid #FFF; /*右のアイコンの枠の設定*/
 margin-bottom: 10px;
 }
 .talk-right{
 float:left;
 position: relative;
 background: #fff; /*右の会話の背景色*/
 border: 2px solid #666;
 padding: 3%;
 border-radius: 10px;
 width: 70%;
 margin-top:10px;
 box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
 margin-bottom:10px;
 }
 .talk-right:before {
 content: "";
 display: inline-block;
 border: 10px solid transparent;
 border-left-color: #666;
 position: absolute;
 right: -20px;
 top: 25%;
 margin-top: -9px;
}
.talk-right:after {
 content: "";
 display: inline-block;
 border: 9px solid transparent;
 border-left-color: #fff;
 position: absolute;
 right: -16px;
 top: 25%;
 margin-top: -8px;
}
.talk-end{
 clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
 .left-icon{
 width: 100px;
 height: 100px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 80px;
 height: 80px;
 }
 .talk-right{
 width: 65%; 
 }
 }
 @media screen and (max-width: 380px){
 .left-icon{
 width: 60px;
 height: 60px;
 }
 .talk-left{
 width: 65%; 
 }
 .right-icon{
 width: 60px;
 height: 60px;
 }
 .talk-right{
 width: 65%; 
 }
 }

つづいて、HTMLです。

HTML

HTMLは、記事内でふきだしを使いたいところに挿入します。WordPressでしたら、テキストモードにして挿入します。

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください</p>
</div>
</div>
<!--左はここまで-->
<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください');"></div>
<div class="talk-right">
<p>会話内容をここに記述してください</p>
</div>
</div>
<!--右はここまで-->
<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>

これでアイコンとふきだしが表示されます。