WordPressでプラグインなしでアイコン画像と会話風の吹き出しを利用する方法

吹き出しが出るように設定してみた。

参考にしたサイト

私が参考にしたのは、次のふたつのサイトです。良い情報を掲載していただき、感謝感謝。

どちらもプラグインなしで吹き出しを実現していて、大きなアイコン画像が使えるので、自由にデザインできるから良いですよね。

CSSだけで作るふきだし会話を、WordPressショートコード化して簡単に表示させる方法 | アフィリエイト研究所「アフィけん」

affi-ken.com

ページが見つかりませんでした – FPウェブシュフ

webshufu.com

カスタマイズ

functions.phpとstyle.cssは、どちらも管理画面で編集が可能です。ダッシュボードの「外観」「テーマの編集」を選択して、該当するファイルを選択して編集します。

参考サイトの情報を元に、次のような記述をfunctions.phpとstyle.cssに追記しました。

//function.php 吹き出し用ショートコード
function fukidashi_func($atts) {
extract(
shortcode_atts(
array(
'speaker' =>'',
'txt' => 'テキストを入れてね',
'img' => 'imgurl',
'fuki' => 'right'
),
$arts
)
);
$hyouji= "<div class='balloon $fuki-box'><div class='balloonbox'><div id='balloon-$fuki'><p class='txt'>$txt</p><!-- /balloon-right --></div><!-- /balloonbox --></div><p class='img'><img src='$img' alt='人物アイコン'/>$speaker</p><!-- /balloon --></div>";
return $hyouji;
}
add_shortcode('fukidashi', 'fukidashi_func');

/* 吹き出し表示用 css */
.balloon p {
margin:0;
padding:0;
}
.balloon {
margin-bottom:20px;
position:relative;
}
.balloon.right-box {
padding-right:140px;
}
.balloon.left-box {
padding-left:110px;
}
.balloon .balloonbox {
width:100%;
}
.balloon .balloonbox .txt {
font-size:1.2em;
line-height:1.5em;
padding:10px 0;
}
.balloon .balloonbox #balloon-right,
.balloon .balloonbox #balloon-left {
position: relative;
display: inline-block;
padding: 0 15px;
width: 100%;
color: #000;
text-align: center;
background: #fff;
z-index: 0;
box-shadow: 3px 1px 3px rgba(255, 255, 255, 0.2) inset, 3px 1px 2px rgba(0, 0, 0, 0.05);
border:1px solid #D8D8D8;
text-align:left;
border-radius:10px;
min-height:100px;
}
.balloon .balloonbox #balloon-left {
width:80%;
}
.balloon .balloonbox #balloon-right:before {
content: "";
position: absolute;
top: 50px;
right: -8px;
margin-top: -9px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 9px 0 9px 9px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
.balloon .balloonbox #balloon-right:after {
content: "";
position: absolute;
top: 50px;
right: -9px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 0 9px 9px;
border-color: transparent transparent transparent #D8D8D8;
z-index: -1;
}
.balloon .balloonbox #balloon-left:before {
 content: "";
 position: absolute;
 top: 40px; left: -8px;
 margin-top: -9px;
 display: block;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 9px 9px 9px 0;
 border-color: transparent #fff transparent transparent;
 z-index: 0;
 }
 .balloon .balloonbox #balloon-left:after {
 content: "";
 position: absolute;
 top: 40px; left: -9px;
 margin-top: -10px;
 display: block;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 10px 9px 9px 0;
 border-color: transparent #D8D8D8 transparent transparent;
 z-index: -1;
 }
 /*アイコン*/
 .balloon.right-box .img {
 width:100px;
 top:0px;
 right:0;
 position:absolute;
 text-align:center;
 font-size:12px;
 line-height:12px;
 }
 .balloon.left-box .img {
 width:100px;
 top:0px;
 left:0;
 position:absolute;
 text-align:center;
 font-size:12px;
 line-height:12px;
 }
 .balloon .img img {
 border-radius:50%;
 box-shadow: 3px 1px 3px rgba(255, 255, 255, 0.2) inset, 3px 1px 2px rgba(0, 0, 0, 0.05);
 border:1px solid #D8D8D8;
 width:100%;
 }

設定が終わったら、あとは記事作成のビジュアル編集画面で、次のようなショートコードを挿入します。

[fukidashi speaker="" txt="吹き出し内のテキスト" img="アイコン画像URL" fuki="left"]

speakerのところに画像のキャプションを入れます。txtは台詞ですね。アイコン画像URLは、その名のとおりアイコン画像があるURLを記述するんですけど、普通にアップロードするととっても長ったらしいURLになるので、私の場合は、別途サーバーにアイコン用のディレクトリを作成して、そこにあらかじめFTPで画像をアップして利用しています。

画像は、100×100pxのpngファイルが良いですね。準備が出来たら、さあ使いましょう。

そして、こんな風に記述すると・・・

[fukidashi speaker="まりん" txt="サイト管理人のまりんです。こんな風に吹き出しを表示することが出来るようになったんですよ。" img="/images/icon/marine-bup_icon.png" fuki="left"]

こんな風に表示されるんですよ。

まとめ

いかがでしょうか？ 吹き出しが利用できると、漫画風になるので、柔らかで読みやすい雰囲気が出せるようになりましたよね。