スポンサーリンク

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

Wordpress
スポンサーリンク
スポンサーリンク

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

サイト管理人のまりんです。こんな風に会話風の吹き出しを表示することが出来るようになったんですよ。

人物アイコンまりん

ねえみんな!聞いてる?

人物アイコンまりん

は〜い。楽しくなりましたよね。あやです。よろしくね。

人物アイコンあや

かすみだよ。これからちょくちょく出てくるから、よろしくです〜

人物アイコンかすみ

りのです。私のこともよろしくね〜

人物アイコンりの

ゆいです。私は控えめに・・・出来るかな? でも、これってどんな風に設定したの? 教えて。。。

人物アイコンゆい

 

そうですね。いろんな所を参考にカスタマイズしてみたので、ちょっと説明してみますね。

人物アイコンまりん

 

参考にしたサイト

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

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

CSSだけで作るふきだし会話を、WordPressショートコード化して簡単に表示させる方法 | アフィリエイト研究所「アフィけん」
WordPressでプラグインを使わずにセリフを吹き出しで描く方法 – HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

 

カスタマイズ

functions.phpを修正・加筆する前に、必ずFTPでバックアップを取るようにしてください。
functions.phpを修正する作業は、プログラムを弄ることになるので、間違えて反映させると真っ白画面になって、どうしようもなくなることがあるので、慎重にお願いします。
おすすめは、子テーマを編集する方法です。テーマそのものを編集するより、子テーマを編集した方がより安全です。 Simplicity2も子テーマがありますので、先に子テーマを導入しておいてくださいね。
参考https://wp-simplicity.com/simplicity-child-theme/

 

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"]

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

サイト管理人のまりんです。こんな風に吹き出しを表示することが出来るようになったんですよ。

人物アイコンまりん

 

ちなみに、上のようにWordpressのショートコードを参照記述するには、ショートコードの頭の [ と末尾の ] を &#91;と &#93; (いずれも半角)に置き換えると良いそうですよ。

 

まとめ

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

 

コメント