吹き出し会話を表示させる専用プラグインにオリジナルのアイコンを適用する方法

元祖吹き出しプラグインといえば「Speech Bubble」。ただ、もうSpeech Bubbleはダウンロードできません。現在は代用プラグインとして「Word Balloon」が多くの方に利用されています。状況によっては「Speech bubble」を継続利用しつづけている人もいるので吹き出しプラグインのカスタマイズ方法をご紹介いたします。

吹き出し会話を表示させる専用プラグインに独自アイコンを適用する方法

Speech Bubbleの開発は終了済み

では「Speech Bubble」に独自のアイコンを表示させる手順をご紹介していきます。すごく昔に開発されたプラグインなので下記の通り現在はダウンロードもできない状態。以下に「ガイドライン違反」との記載がありますがおそらく「自動アップデート機能」を実装したのが原因です。WordPressの公式ディレクトリへ登録したプラグインに自動アップデート機能を内蔵するとルール違反になるのは有名ですね。

同じ名前のプラグインもあります

なお、現在は「プラグイン > 新規追加」画面のキーワード検索で「Speech Bubble」と入力すると以下の同名プラグインがヒットしますが、まったく別物なのでその点はご注意くださいませ。

今はWord Balloonが便利です

ちなみに「Speech Bubble」のような吹き出し会話を表示させるには「Word Balloon」というプラグインが便利です。また「Word Balloon」は「Speech Bubble」とは違って、吹き出しに使いたいアイコンを管理画面内で登録できる機能があるので「Speech Bubble」より使いやすく多機能に仕上がっています。

Speech Bubbleでアイコンを変更する

本日はあえて今も「Speech Bubble」を使っているあなたに向けた記事です。なお、Speech Bubbleでは指定されているショートコードでタグを差し込むと以下のアイコンと吹き出しが表示されます。

差し込むアイコン画像について

人影では「考えている雰囲気」や「悩んでいる姿」が伝えられないので少し物足りないですよね。やはり吹き出しの内容に合った自然な印象を与えられる下記のような画像アイコンを差し込みたくなります。

独自ドメインのフォルダにFTP接続

もちろん「Speech Bubble」でも独自アイコンは差し込めますがアイコンのアップロードが必要となります。FTPでサーバーに接続して「プラグインの指定ディレクトリに画像を上げておけばOK」です。下記はFileZillaで「wp-labo.com」に接続した例です。まずは「wp-content」を開きましょう。

そして「plugins」を開いてください。

するとなかに「speech-bubble」というディレクトリがあるので開いてください。

次に「img」を開きましょう。

このなかでアイコンが管理されています。ちなみに「1.jpg」が青色の人影アイコンですね。v01〜v05は元々は入っていません。追加したいアイコンがあったら好きな名前をつけてアップするルールです。

アイコン画像をアップロードする

今回はさきほどの「パソコン入力する考えるサラリーマン」をアップロードしていきます。下記がデスクトップに「icon」というディレクトリ（フォルダ）を作って「Administrator.png」を準備した画面。

では「1.jpg」と同じ階層にアップロードしていきましょう。

無事アップロードが完了しました。

差し込みショートコードの画像パスを変更する

次に吹き出しを表示していた記事の「1.jpg」を置き換えます。下記が現在の差し込みコードです。

入力を間違えないよう「Administrator.png」をコピーしていきます。まずは「名前の変更」をクリック。

文字が選択できる状態になったら右クリックで「コピー」しました。

そして差し込みコードの「1.jpg」を選択してから右クリックで「ペースト」。

無事入れ替わりましたね。

記事を更新したら反映完了

入力に間違いがなければ「更新」をクリック。

ページ側を確認するとアップロードした画像アイコンが表示されました。

過去の記事分も一括で置き換える場合

もしすでに複数の記事を書いてしまっている場合は一括作業が楽です。以下では当サイトではおなじみの「Search Regex」を使います。念のため「Search Regex」プラグイン記事は最下部に貼っておきます。

Search patternに「icon=”1.jpg”」と入れて「Search」を実行。該当箇所がショートコードのみになっていることをしっかりと確認したら一括の入れ替えを実行していきましょう。

Replace patternに「icon=”Administrator.png”」と入力。英文字は半角でないといけないので入力作業は慎重に行いましょう。関係ない部分が置き換わると戻す作業が手間なのでしっかり確認してください。

置き換えの実行は「Replace & Save」をクリック。

入れ替えが完了したら以下のメッセージが表示されます。さきほど検索結果に出てきていた７箇所が入れ替わったので「７箇所」が置き換わったとメッセージが表示されていますね。

以上で作業は完了となります。過去記事を含めた一括入れ替え用プラグイン「Search Regex」については下記にリンクを貼っておきますのでもし必要であればぜひ併せてチェックしてくださいませ。

ワードプレスでサイト名を変更後に文章中に残っている変更前の文字を全部まとめて置き換える方法

まとめ

本日は元祖吹き出し系プラグインの「Speech Bubble」でアイコンをカスタムする方法をご紹介いたしました。先述した通り今はダウンロードができないプラグインなので今から吹き出し会話表示を導入したい方は「Word Balloon」をお試しいただければ幸いです。使いやすくて完成度の高いプラグインです。

今回は何か条件があって「Speech Bubble」を使いつづけている方に絞って「Speech Bubble」でアイコンをカスタマイズするための手順を詳しくご紹介させていただきました。ちなみに「Word Balloon」は吹き出しが動く仕様なので運営者さんによってはどっちを選ぶかの好みは分かれそうです。

もし「Speech Bubble」をどうしても使いたいという方がいればご連絡をいただければ当チームで管理している最新データならお渡しできますのでもしご入用であればお気軽にご相談くださいませ。