吹き出しのバリエーションを増やしてみました。

前回までのお話し

前回は、アイコン画像と会話風の吹き出しが出るようにしました。 記事作成画面でショートコードを入力するだけで、簡単に出るようになったんですよね。

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

Wordpressをカスタマイズして、記事内に可愛いアイコン画像と会話風の吹き出しが表示出来るように設定してみました。プラグインは不要。functions.phpとstyle.cssに記述を追加するだけなんですよ！

web.no-koto.net

そして、今回は1種類だけじゃなくて、人物や向きを変えたりと、バリエーションを増やしてみましたよ。

吹き出しのバリエーション

吹き出し用のショートコード

[fukidashi txt="これは、imgとかを指定したもの。" img="/images/icon/marine-bup_icon.png" fuki="left" speaker="まりん"]

吹き出し用のショートコード

[fukidashi txt="これは、fukidashi。 "]

吹き出し用のショートコード

[fukidashi-marine-center txt="fukidashi-marine-center"]

吹き出し用のショートコード

[fukidashi-marine-left txt="fukidashi-marine-left"]

吹き出し用のショートコード

[fukidashi-marine-right txt="fukidashi-marine-right"]

吹き出し用のショートコード

[fukidashi-aya-center txt="fukidashi-aya-center"]

吹き出し用のショートコード

[fukidashi-aya-left txt="fukidashi-aya-left"]

吹き出し用のショートコード

[fukidashi-aya-right txt="fukidashi-aya-right"]

吹き出し用のショートコード

[fukidashi-kasumi-center txt="fukidashi-kasumi-center"]

吹き出し用のショートコード

[fukidashi-kasumi-left txt="fukidashi-kasumi-left"]

吹き出し用のショートコード

[fukidashi-kasumi-right txt="fukidashi-kasumi-right"]

[fukidashi-rino-center txt="fukidashi-rino-center"]

吹き出し用のショートコード

[fukidashi-rino-left txt="fukidashi-rino-left"]

吹き出し用のショートコード

[fukidashi-rino-right txt="fukidashi-rino-right"]

[fukidashi-yui-center txt="fukidashi-yui-center"]

吹き出し用のショートコード

[fukidashi-yui-left txt="fukidashi-yui-left"]

吹き出し用のショートコード

[fukidashi-yui-right txt="fukidashi-yui-right"]

functions.phpの記述

functions.phpの記述を変更します。画像のアドレス（url）を指定しておくと、ショートコードに画像のパスを入れずに短い記述で済むので便利です。 もちろん、先にfunctions.phpをバックアップしてから作業することをお忘れなく。

//吹き出し用ショートコード
function fukidashi_func($atts) {
extract(
shortcode_atts(
array(
'speaker' =>'',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/marine-bup_icon.png',
'fuki' => 'left',
'speaker'=>'まりん'
),
$atts
)
);
$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');

//吹き出し用ショートコード まりんcenter
function fukidashi_marine_center_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'まりん',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/marine-icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-marine-center', 'fukidashi_marine_center_func');

//吹き出し用ショートコード まりんleft
function fukidashi_marine_left_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'まりん',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/marine-left_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-marine-left', 'fukidashi_marine_left_func');

//吹き出し用ショートコード まりんright
function fukidashi_marine_right_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'まりん',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/marine-right_icon.png',
'fuki' => 'right'
),
$atts
)
);
$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-marine-right', 'fukidashi_marine_right_func');

//吹き出し用ショートコード あやcenter
function fukidashi_aya_center_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'あや',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/aya_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-aya-center', 'fukidashi_aya_center_func');

//吹き出し用ショートコード あやleft
function fukidashi_aya_left_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'あや',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/aya-left_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-aya-left', 'fukidashi_aya_left_func');

//吹き出し用ショートコード あやright
function fukidashi_aya_right_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'あや',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/aya-right_icon.png',
'fuki' => 'right'
),
$atts
)
);
$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-aya-right', 'fukidashi_aya_right_func');
//吹き出し用ショートコード かすみcenter
function fukidashi_kasumi_center_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'かすみ',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/kasumi_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-kasumi-center', 'fukidashi_kasumi_center_func');

//吹き出し用ショートコード かすみleft
function fukidashi_kasumi_left_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'かすみ',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/kasumi-left_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-kasumi-left', 'fukidashi_kasumi_left_func');

//吹き出し用ショートコード かすみright
function fukidashi_kasumi_right_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'かすみ',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/kasumi-right_icon.png',
'fuki' => 'right'
),
$atts
)
);
$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-kasumi-right', 'fukidashi_kasumi_right_func');

//吹き出し用ショートコード りのcenter
function fukidashi_rino_center_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'りの',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/rino_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-rino-center', 'fukidashi_rino_center_func');

//吹き出し用ショートコード りのleft
function fukidashi_rino_left_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'りの',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/rino-left_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-rino-left', 'fukidashi_rino_left_func');

//吹き出し用ショートコード りのright
function fukidashi_rino_right_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'りの',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/rino-right_icon.png',
'fuki' => 'right'
),
$atts
)
);
$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-rino-right', 'fukidashi_rino_right_func');
//吹き出し用ショートコード ゆいcenter
function fukidashi_yui_center_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'ゆい',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/yui_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-yui-center', 'fukidashi_yui_center_func');

//吹き出し用ショートコード ゆいleft
function fukidashi_yui_left_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'ゆい',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/yui-left_icon.png',
'fuki' => 'left'
),
$atts
)
);
$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-yui-left', 'fukidashi_yui_left_func');

//吹き出し用ショートコード ゆいright
function fukidashi_yui_right_func($atts) {
extract(
shortcode_atts(
array(
'speaker'=>'ゆい',
'txt' => 'テキストを入れてね',
'img' => '/images/icon/yui-right_icon.png',
'fuki' => 'right'
),
$atts
)
);
$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-yui-right', 'fukidashi_yui_right_func');