WordPressでプラグインを使わずにセリフを吹き出しで描く方法

更新

2016-01-14_2240吹き出しプラグイン 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]

ウェブシュフ
プラグインは便利だけど
ウェブシュフ妻
カスタマイズが大変なのよね。

心の声を表現する吹き出し

心の声は、typeに「心」を入力して表現します。

[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ボタン入力する準備もしたほうがいい

セリフを表現するたびに、いちいちショートコードを手入力するのは大変です。

投稿画面のボタンをカスタマイズして、ボタンを一回押すだけでセリフ入力用のショートコードが入力できるようにしましょう。

下記エントリが参考になります。

私はセリフ入力用に4つのボタンを作っています。

2016-01-13_1739

投稿画面で「キャラにしゃべらせるセリフ」を選択して「自分吹出」ボタンを押すと、

[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」の基本から使い方までを徹底紹介!! 」に出会わなければ、心の声を表す吹き出しは上手くできなかったかもしれません。感謝です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です