WordPressでふきだし表示をしたい

WordPressでふきだし表示をしたい

みなさんのブログでよく見るLINEのようなフキダシのパターンがいいなぁと思い検索しました。

WordPressの吹き出しプラグインSpeech Bubbleで会話形式のブログコンテンツが作れる!

上記のページを参考にフキダシ表現に挑戦。

と言っても、参考にしたページに書いてある通り『Speech Bubble』というWordPressのプラグインをインストールして有効化し、同じく紹介されていたサンプルコードを貼ったら

A さん
おっす!

B さん
なんだちみは!?

↑あっさりこんな風にできました。

また、インストールしたプラグインの中の画像フォルダに自分で作った画像をFTPソフトでアップロードしてあげて、その名前を指定すれば、オリジナルのフキダシパターンができるわけです。

ヒデトモA
標準パターンの顔パターン
ライン風のフキダシです。

ヒデトモB
こっちはおとぼけ顔です。

これでちょっと気の利いた感じのブログになりそうです!

【追記】勝手にAMP対応してみました。

Google SearchConsole様から

「AMPエラーがあるよ」

と指摘されたので確認してみたところ、このフキダシのアイコン部分に高さ指定がないからエラーだよってことらしいです。
Speech BubbleがAMP対応してるのか調べてみたところ、どうも対応してないらしいのです。

いまさら吹き出しを使ってるのを直したくないなと思い考えました。

「高さ」の指定を入れればいいんじゃね!

ということで、プラグインを手直ししました。

/wp-content/plugins/speech-bubble/classes

にアップロードされていた

SnbSpeechBubble.php

をダウンロードして確認したところ

131行目に「<img src=”%s” class=”sb-icon”>」という記述を発見

こいつに高さと幅を設定してあげました。

<img class=”sb-icon” src=”%s” width=”60″ height=”60″ />

と「高さ」と「幅」を追加して同じディレクトリにアップロードしなおしたところ、AMPエラーがなくなりました。
やったね!

自己責任で修正してみてください。

WordPressカテゴリの最新記事