WordPressの吹き出しプラグイン「Speech Bubble」がAMPページに対応していなかったため、プラグインなしで吹き出しを実現するために作成しました。
通常の吹き出しは「Speech Bubble」の「ln-flat」、胸の内の吹き出しは「think」に似た外見になります。
style.cssで吹き出しのスタイルを指定、functions.phpに吹き出し呼び出し用のショートコードを作成しています。
style.css
吹き出しのスタイルを指定するために、以下の内容をstyle.cssに記入します。
/*--------------------
吹き出し
--------------------*/
/* 全体のスタイル */
.speech {
margin-bottom: 40px;
}
/* 左画像 */
.speech-img-left {
margin: 0;
float: left;
width: 60px;
height: 60px;
}
/* 右画像 */
.speech-img-right {
margin: 0;
float: right;
width: 60px;
height: 60px;
}
.speech figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
/* 画像の下のテキスト */
.speech-img-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
/* LINE風の吹き出し */
/* 左からの吹き出しテキスト */
.speech-text-left {
position: relative;
z-index: 2;
padding: 10px 12px;
background-color: #EEEEEE;
border-style: solid;
border-width: 1px;
border-color: #bbb;
color: #333333;
border-radius: 0 15px 15px 15px;
top: 27px;
float: left;
left: 15px;
max-width: 67%;
}
/* 右からの吹き出しテキスト */
.speech-text-right {
position: relative;
padding: 10px 12px;
z-index: 2;
border-style: solid;
border-width: 1px;
color: #333333;
background-color: #77DD66;
border-color: #77DD66;
border-radius: 15px 0 15px 15px;
top: 27px;
float: right;
right: 15px;
max-width: 67%;
}
p.speech-text {
margin: 0 0 20px;
}
p.speech-text:last-child {
margin-bottom: 0;
}
/* 左のしっぽ */
.speech-text-left:before {
position: absolute;
top: -1px;
left: -8px;
z-index: 1;
height: 0;
width: 0;
border-style: solid none none solid;
border-width: 8px;
border-color: #bbb transparent;
content: "";
}
.speech-text-left:after {
position: absolute;
top: 0px;
left: -5px;
z-index: 3;
height: 0;
width: 0;
border-style: solid none none solid;
border-width: 8px;
border-color: #EEEEEE transparent;
content: "";
}
/* 右のしっぽ */
.speech-text-right:before {
position: absolute;
top: -1px;
right: -8px;
z-index: 1;
height: 0;
width: 0;
border-style: solid solid none none;
border-width: 8px;
border-color: #77DD66 transparent;
content: "";
}
.speech-text-right:after {
position: absolute;
top: 0px;
right: -6px;
z-index: 3;
height: 0;
width: 0;
border-style: solid solid none none;
border-width: 8px;
border-color: #77DD66 transparent;
content: "";
}
/* 胸の内の吹き出し */
/* 左からの吹き出しテキスト */
.speech-text-think-left {
position: relative;
padding: 10px 12px;
margin-bottom: 20px;
background: #D9E5FF;
border-radius: 15px;
top: 7px;
right: -30px;
float: left;
max-width: 64%;
}
/* 右からの吹き出しテキスト */
.speech-text-think-right {
position: relative;
padding: 10px 12px;
margin-bottom: 20px;
background: #D9E5FF;
border-radius: 15px;
top: 7px;
left: -30px;
float: right;
max-width: 64%;
}
/* 左の胸の内のしっぽ */
.speech-text-think-left:before {
position: absolute;
top: 24px;
left: -17px;
height: 15px;
width: 15px;
background: #D9E5FF;
border-radius: 10px;
content: "";
}
.speech-text-think-left:after {
position: absolute;
top: 20px;
left: -28px;
height: 10px;
width: 10px;
background: #D9E5FF;
border-radius: 5px;
content: "";
}
/* 右の胸の内のしっぽ */
.speech-text-think-right:before {
position: absolute;
top: 24px;
right: -17px;
height: 15px;
width: 15px;
background: #D9E5FF;
border-radius: 10px;
content: "";
}
.speech-text-think-right:after {
position: absolute;
top: 20px;
right: -28px;
height: 10px;
width: 10px;
background: #D9E5FF;
border-radius: 5px;
content: "";
}
/* 回り込み解除 */
.speech:after,.speech:before {
clear: both;
content: "";
display: block;
}
functions.php
以下の内容をfunctions.phpに記入して、投稿本文から各タイプの吹き出し呼び出すためのショートコードを設定します。
///////////////////////////////////////////////
// 吹き出し設定のショートコード
///////////////////////////////////////////////
function Speech_Balloon($atts, $content = null) {
extract(shortcode_atts(array(
'icon' => '',
'name' => '',
'type' => '',
), $atts));
str_replace('/\<br \/\>/', '', $content);
// コメント内のショートコードを実行
$str = do_shortcode($content);
// iconからalt用のファイル名を取得
$tmp = explode("/", $icon);
$File_Name = end($tmp);
// typeから画像の左右と吹き出しタイプを設定
if ($type === "ln") {
$Image_Position = "left";
$Balloon_Type = "";
}elseif ($type === "rn") {
$Image_Position = "right";
$Balloon_Type = "";
}elseif ($type === "lt") {
$Image_Position = "left";
$Balloon_Type = "think-";
}elseif ($type === "rt") {
$Image_Position = "right";
$Balloon_Type = "think-";
}else{
// typeが正しくない場合は終了する
return;
}
// 吹き出しの要素をつなぎ合わせる
$Balloon = '<div class="speech"><figure class="speech-img-'.$Image_Position.'"><img src="'.$icon.'" alt="'.$File_Name.'"><figcaption class="speech-img-description">'.$name.'</figcaption></figure><div class="speech-text-'.$Balloon_Type.$Image_Position.'"><p class="speech-text'.$Balloon_Type.'">'.$str.'</p></div></div>';
//指定した吹き出しを返す
return $Balloon;
}
// [speech icon="/xxx/xxx.png" name="名前" type="吹き出しタイプ"]コメント[/speech] でショートコードを呼び出す
add_shortcode('speech', 'Speech_Balloon');
説明
投稿本文に以下のような形で記載すると吹き出しとして装飾されて表示されます。
[speech icon=”/xxx/xxx.png” name=”名前” type=”吹き出しタイプ”]コメント[/speech]
[speech][/speech]
吹き出しの呼び出し用に設定したショートコードです。
開始タグと終了タグの間にコメントを入れることでコメント部分が吹き出し内にテキストで表示されます。
開始タグ内に属性を指定することで全体的なスタイルを変更します。
icon=”/xxx/xxx.png”
話者のアイコン画像を指定します。
「/xxx/xxx.png」部分を変更して、画像ファイルへのパスを記載してください。。
ファイル形式は特に制限は無いと思います。
name=”名前”
話者の名前欄です。
「名前」部分を変更してください。
話者アイコンの下に表示されます。
type=”吹き出しタイプ”
吹き出しのタイプの指定箇所です。
「吹き出しタイプ」部分を変更してください。
設定値は以下を参考にしてください。
| 設定値 | 説明 |
|---|---|
| “ln” | 話者のアイコンが左に表示されるLINE風の通常吹き出し(グレー)を表示します。 |
| “rn” | 話者のアイコンが右に表示されるLINE風の通常吹き出し(グリーン)を表示します。 |
| “lt” | 話者のアイコンが左に表示される胸の内の吹き出しを表示します。 |
| “rt” | 話者のアイコンが右に表示される胸の内の吹き出しを表示します。 |