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

コメントを残す

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