吹き出しプラグイン Speech Bubble を使っていましたが、画像を大きくできず挫折。@web_shufuです。
いっそのこと、プラグインを卒業して、自前でコードをゴリゴリ書くことにしました。
まずまず上首尾だと思うので、ノウハウをシェアしたいと思います。
こんな吹き出しができました
こんな感じの自作ショートコードでを作って吹き出しを表現できます。
[[bubble speaker="【発言者】" imgurl="【キャラ画像URL】" type="【吹き出しパターン】"]【セリフ】[/bubble]]
口に出したセリフを表現する吹き出し
typeを空欄にして表現します。
[[bubble speaker="ウェブシュフ" imgurl="/img/me.png" type=""]プラグインは便利だけど[/bubble]]
[[bubble speaker="ウェブシュフ妻" imgurl="/img/wife.png" type=""]カスタマイズが大変なのよね。[/bubble]]
[bubble speaker=”ウェブシュフ” imgurl=”/img/me.png” type=””]プラグインは便利だけど[/bubble][bubble speaker=”ウェブシュフ妻” imgurl=”/img/wife.png” type=””]カスタマイズが大変なのよね。[/bubble]
心の声を表現する吹き出し
心の声は、typeに「心」を入力して表現します。
[[bubble speaker="ウェブシュフ" imgurl="/img/me.png" type="心"]なんか今のセリフ「知ったか」じゃない?[/bubble]]
[[bubble speaker="ウェブシュフ妻" imgurl="/img/wife.png" type="心"]ブログなんかより家事やんなさいよ。フッ。ホコリが積もってるじゃない…まったく…[/bubble]]
[bubble speaker=”ウェブシュフ” imgurl=”/img/me.png” type=”心”]なんか今のセリフ「知ったか」じゃない?[/bubble][bubble speaker=”ウェブシュフ妻” imgurl=”/img/wife.png” type=”心”]ブログなんかより家事やんなさいよ。フッ。ホコリが積もってるじゃない…まったく…[/bubble]
ショートコードでセリフを書くための準備
ショートコードを使うには準備が必要。テーマファイルの編集やキャラ画像の準備などが必要です。
function.php
function.phpには下記コードをコピペしましょう。
function bubble_left_img($atts, $content = null )
{
extract(shortcode_atts(array(
'speaker' =>'',
'imgurl' =>'',
'type' =>'',
), $atts));
if($type=='心'){$style='bubble-right2';}
else{$style='bubble-right';}
$hyouji='<div class="bubble">
<div class="buble-img-left"><img src="'.$imgurl.'">'.$speaker.'</div>
<div class="'.$style.'">
'.$content.'
</div>
</div>
<div style="clear:both;"></div>
';
return $hyouji;
}
add_shortcode('bubble', 'bubble_left_img');
style.css
吹き出しを表現するためのCSSは以下の通りです。お使いのWordPressテーマのstyle.cssにコピペしましょう。
/*******吹き出しここから*******/
.bubble-right,
.bubble-right2{
position: relative;
background: #f4f2f2;
border: 1px solid #f4f2f2;
padding: 10px;
border-radius: 10px;
margin-top:0px;
margin-bottom:5px;
font-size:18px;
line-height:1.5;
}
.bubble-right{
width: calc(100%-125px);
width : -webkit-calc(100%-125px);
margin-left: 105px;
}
.bubble-right:after,
.bubble-right:before{
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
right: 100%;
}
.bubble-right:after{
border-width: 7px;
margin-top: -7px;
border-right-color: #f4f2f2;
}
.bubble-right:before{
border-width: 9px;
margin-top: -9px;
border-right-color: #f4f2f2;
}
.bubble-right2{
width: calc(100%-137px);
width : -webkit-calc(100%-137px);
margin-left: 137px;
}
.bubble-right2:before{
top: 15px;
border: solid transparent;
width: 35px;
position: absolute;
pointer-events: none;
right: 99%;
content: "。oO";
color:#777;
}
.buble-img-left{
width: 100px;
font-size:12px;
text-align:center;
margin-bottom:5px;
float:left;
}
/*******吹き出しここまで*******/
キャラ画像を用意
セリフ横のキャラ画像は100×100で表現されるので、正方形の画像を用意していください。
大きさはなるべく100×100に近い方がいいですね。
私はキャラ画像用のフォルダーを作ってキャラ画像をまとめていますが、普通にメディアとしてアップロードしてもいいです。
キャラ画像のURLは間違えないように。
ショートコードを1ボタン入力する準備もしたほうがいい
セリフを表現するたびに、いちいちショートコードを手入力するのは大変です。
投稿画面のボタンをカスタマイズして、ボタンを一回押すだけでセリフ入力用のショートコードが入力できるようにしましょう。
下記エントリが参考になります。
[img-link url=”https://webshufu.com/edit-quicktags/” title=”WordPress投稿画面のボタンの使い方、ボタンを追加・削除してカスタマイズする方法|Web Shufu”]
私はセリフ入力用に4つのボタンを作っています。
投稿画面で「キャラにしゃべらせるセリフ」を選択して「自分吹出」ボタンを押すと、
[[bubble speaker="ウェブシュフ" imgurl="/img/me.png" type=""]キャラにしゃべらせるセリフ[/bubble]]
と入力されます。
いちいちショートコードを手入力するのに比べたら圧倒的に便利ですよね。
カスタマイズしないならプラグインのほうが手軽です
私の場合は、プラグイン Speech Bubbleを使ったところ、以下のカスタマイズでつまずきました。
- 最新バージョンにアップデートしたら自作画像が吹っ飛んだ
- 画像の大きさの変え方がよくわからなかった
それで自分でコードをがりがり書く道を選びました。
しかしカスタマイズしないのならプラグインのほうが手軽です。
Speech Bubble の使い方は「WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる! :: JUNICHI’s BLOG」が最高にわかりやすいです。(私もこれを見てSpeech Bubble を使い始めました。)
プラグインで満足ならそのほうが効率的ですね。
お世話になりました。
私の作った吹き出しは、寝ログさんのエントリ「WordPressにCSSをコピペし「LINEぽい吹き出し」を作って会話を入力する方法」にある吹き出しを、位置を変えてキャラ絵をつけただけです。大変お世話になりました。
また、ヨッセンスさんの記事「[CSS] 擬似要素「before」「after」の基本から使い方までを徹底紹介!! 」に出会わなければ、心の声を表す吹き出しは上手くできなかったかもしれません。感謝です。