Youtubeなどの動画コンテンツから情報収集を行う時代が到来してきている中、依然としてブログなどの文字コンテンツには一定の需要があり、毎日たくさんの人が利用しています。
しかしながら現代の人は大量の文字で埋め尽くされている新聞のような記事を読むのに抵抗があり、同じ文章を伝えるにしてもデザイン等を工夫するだけでちゃんと読んでもらえる記事を作ることができるでしょう。
その対策の一つとして多くのブロガーに採用されているのが「吹き出し風テキストの挿入」です。
今回は、WordPressでプラグインなしで簡単に、見やすい吹き出し風テキストを投稿内に挿入する方法を紹介します。
投稿内における吹き出しの効果
吹き出しによる視覚的効果の例
そもそも、投稿内に吹き出しを挿入することで読み手側としてはイメージがどのように変わるのでしょうか?
実際に私がBableTechのために作ったものを元に比較してみたいと思います。


ぱっと見どうでしょうか。もちろん好みはあると思いますが、個人的には適当なタイミングで吹き出しが入っている方が目が休めるし、読みやすいなと思います。
ただよくブログに採用されている吹き出しとして、アイコンと名前がついていてキャラクタがしゃべっている風のものがありますが、正直あれは好きじゃないですね。そのサイトを始めてみたときに「誰やねんこいつ」ってなるし、なんか気持ち悪いので却下です。
別に吹き出しをつけるからと言ってキャラクタまで付ける必要はなく、吹き出しの部分があるだけでだいぶ視覚的な効果は得られると思います。
吹き出しとSEO
先ほどのように、文字で埋め尽くされている記事の中にたった一つでも吹き出し風の話し言葉風のテキストを挿入することでなんとなく目が受け付けてくれるような投稿を作ることができました。
しかし個人的に心配なのはSEO対策についてです。
基本的に私が見てきたブログの中にある吹き出しテキストの内容と言ったら、だいたいかなり緩い話し言葉で構成されていて文法も不完全だったり変な感嘆符が使われていたり変なキャラクターの名前が使われていたりして冷静に考えると記事内にふさわしくない文章な気がします。
閲覧者(人)はこのテキストが吹き出しの中身であり、人間がユルくしゃべっているだけと理解することができるのですが、それをGoogle等の検索エンジンのクローラーが読み取ってくれるとは限りません。 吹き出しのテキストが文章全体に占める割合はごく僅かかもしれませんが、乱れた文章だと判断されてしまうとSEO的にあまり良くないかもしれないと私は判断しています。
ただ、30分くらいかけてそれらしきことを調べてみても特に問題は挙げられてなかったのでそこまで影響はないかもしれませんが…
(最近自然言語処理の勉強をしていてちょっと気にしすぎてしまっているのかもしれませんが)
ということで、この記事では吹き出しの内容はAIからは読み取れないようにしたいと思います。
プラグインなしで簡単に導入する方法
さて、早速導入していきたいと思います。吹き出しをいとも簡単に投稿内に挿入することができるプラグインもあったりはするのですが、基本的にプラグインを導入するとサイトの動作が重くなってしまったりするのでなるべく避けたいところです。
その上、同じような機能をJavaScriptで実現してしまえば、ページ表示速度にほとんど影響が出ないためメリットしか無かったりします。 なおJavaScriptを無効にしている場合に機能を利用できなくなってしまいますが、別に吹き出しの中身のテキストはそこまで重要じゃないと思うので、そこの対策をする必要はないかと思います。
それでは導入していきましょう。
ショートコードを作る
投稿内でこのような定型HTMLコードを挿入する方法はいくつかありますが、ここでは最も簡単なショートコードで挿入する方法を紹介します。
//吹き出しショートコード
if (!function_exists('insert_speech_bubble')){
function insert_speech_bubble($atts) {
extract(shortcode_atts(array('text'=>''),$atts));
$DOM = "<div class='speech_bubble' data-id='{$text}'></div>";
return $DOM;
}
add_shortcode('speech_bubble', 'insert_speech_bubble');
}
テーマファイルの「function.php」等に上のような記述をしましょう。これで【speech_bubble text=”ここに吹き出しの中のテキストを入れる”】のようにしてショートコードを使うことができるようになります。
なお、HTML出力する時点では要素内のテキストは空になっており、要素の属性値にテキストの内容が与えられている感じになっています。
ちなみにショートコードではなくブロック化することでさらに編集しやすくなるので、興味のある方はぜひ以下の記事を参考にして作ってみてください。
【脱Rinker】Amazonの検索結果を投稿に表示する機能を作る【アフィリエイト】
CSSを作る
ここでスタイルを調整します。デザインは好みに応じて調整してください。
div.speech_bubble {
background-color: #fef6e3;
margin: 40px 20px 30px 20px;
display: block;
padding: 20px;
border-radius: 20px;
position: relative;
filter: drop-shadow(2px 2px 10px #f1edf2);
}
div.speech_bubble:before {
width: 50px;
content: "";
height: 30px;
background-color: #fef6e3;
position: absolute;
top: -30px;
left: 30px;
box-shadow: 2px -3px 3px #f1ede3;
clip-path: polygon(0% 0%,100% 100%,0% 100%);
}
div要素本体でテキストを表示するフィールドを作成し、beforeを付けた疑似要素で吹き出しのとんがっている部分を作り出しています。

とてもシンプルですね。
スクリプトを作る
ここからが本番です。あらかじめ登録されてあるテキストを吹き出し内に挿入するスクリプトを作っていきます。 とその前に、投稿のテンプレートファイルに以下のような要素を挿入しておきましょう。
<!-- JavaScrip用の追加スタイルシート -->
<style id="css_for_js"></style>
今回CSSの疑似要素をいじる形になり、JavaScriptから直接スタイルを変更することはできないので、スタイルシートを事前に作ってそこにJSで追加していき、間接的にスタイルを操作します。
そして、投稿ページと共に読み込まれるJavaScriptファイルを用意して(テンプレート内で読み込めば良い) その中に以下のような記述をします。
jQuery(function(){ //ページの読み込みが終わった後
//投稿中の吹き出しを展開していく
const speech_bubble_list = jQuery("div.speech_bubble"); //吹き出しのリストを本文中から取得
const css_for_js = jQuery("#css_for_js"); //スタイルシート
speech_bubble_list.each(function(index){
jQuery(this).attr("id","speech_" + String(index)); //この吹き出しに一時的にIDを付与
const text = jQuery(this).data("text");//この吹き出しのテキストを取得
css_for_js.html(css_for_js.html() + "#speech_" + String(index) + ":after{content:'"+ text +"';}"); //スタイルシートに追加
});
});
かなり独特な方法で実装していますが、確認してみたらしっかりと出力されていることがわかりました。
ここでさらに、その吹き出し付近までたどり着いたら中のテキストが表示されるようにしたいと思います。
jQuery(function(){
//投稿中の吹き出しを展開していく
const speech_bubble_list = jQuery("div.speech_bubble");
const css_for_js = jQuery("#css_for_js");
jQuery(window).scroll(function () {//スクロールした時
const current_y = jQuery(this).scrollTop();//現在のスクロール座標
const vh = jQuery(this).height();//ビューポートの高さ
//現在の段落の見出しを表示する
const standard_y = current_y + vh / 2;//画面の真ん中の位置を基準にする
//吹き出しを表示させる
var current_bubble_index = -1;
speech_bubble_list.each(function(index){
if(!css_for_js.html().includes("#speech_" + String(index) + ":after") && standard_y > jQuery(this).offset().top){
current_bubble_index = index;
}
});
if(current_bubble_index > -1){
this_speech = speech_bubble_list.eq(current_bubble_index);
this_speech.attr("id","speech_" + String(current_bubble_index));
const text = this_speech.data("text");
css_for_js.html(css_for_js.html() + "#speech_" + String(current_bubble_index) + ":after{content:'"+ text +"';}");
setTimeout(function(){css_for_js.html(css_for_js.html() + "#speech_" + String(current_bubble_index) + ":after{opacity:1;}");},100);
}
});
});
スクロール連動関数にここまでぶち込んでしまうと重くなりそうで怖いですが、案外大丈夫です。この例では画面の半分くらいのところに吹き出しが近づいたら表示するようにしています。疑似要素だと直接的にjQueryでスタイルが操作できないのでめちゃくちゃ複雑な処理になってしまっていますね。
また、フェードイン表示できるようにしました。
div.speech_bubble:after{
opacity:0;
transition:.5s;
}
この記述を事前にCSSでやっておくことで、フェードインの実現ができます。
これらの方法ではページを完全に読み込んだ後に表示処理を行っているので、ページ表示速度にほとんど影響せず、サイトの高速化に貢献することができています。
その分ページを読んでいるときに負担がかかるわけですが、これくらいの処理であればたとえスマートフォンだとしても快適に閲覧することができるでしょう。
これの10倍くらい複雑な処理をスクロールと連動してやらせようとしたら初めてカクついてくるくらいだと思います。
また、CSSの疑似要素のテキストはHTMLのテキストとしては認識されないので(おそらく)Googleから取得されることはないです。 そのため、この吹き出しの中に何を書いてもSEO的には問題なさそうです。
イメージ的には、テキストが文字というよりは絵の一部として描かれているだけみたいな、そんな感じでしょう。
BableTechではこのように、サイトのカスタマイズの方法についてもたくさん発信していく予定ですので、どうぞよろしくお願いします。