以前「WordPressの記事で使える『吹き出し会話』の簡単なコードを作ってみたよ」という記事で、タイトル通りWordPressの記事で使える簡単なコードを作りました。
この記事が思いの外反響が良く、使って頂いている方の中で「もっと簡単にプラグインで使いたい」というお声も頂きました。
元々、簡単なコードであれば「プラグインではなく直書きの方が良い」という事でプラグインを使わない方法で作って紹介したのですが、前回の記事よりもさらに簡単な「プラグイン版の吹き出し会話」を作ってみたので紹介です。
※誰でも理解出来るように手順などを可能な限り細かく説明してるので、手順が多く感じられるかもしれませんが実際やってみると非常にシンプルで簡単な内容です。
プラグインを使わない元々の吹き出し会話に付いては以下の記事をご覧ください。
[ 2017年10月23日追記 ]
「WP-Speech-Ballon_2.0」をリリースしました。
※新バージョンリリースに伴い、本記事内のダウンロードリンクを削除致しました。
はじめてお使いになる方は、以下の記事より「WP-Speech-Ballon_2.0」をお使い頂けますようお願い致します。
Contents
今までよりも超簡単
今回はプラグインを使う方法なので、実際に吹き出し会話を使うまでの準備は超簡単です。
「プラグインのファイルをダウンロード」→「プラグインをインストール」→「プラグインを有効化」→「記事内にショートコードで記述」
たったこれだけで面倒な設定も不要、CSSの記述も不要、funcitions.phpへの記述も不要です。
プラグインだけど重くない
プラグインは汎用性を持たせる為やその他理由から「重くなる」ものが多いのですが、今回のプラグイン版は本当に必要な部分のみの記述で、極めてシンプルなものになってるのでそこまで体感出来るほど重くなるという事は考えにくいです。
ただ、やはりWordPressでプラグインの処理を行う関係上、直書きしたものと比べると若干は重くなるかもしれません。
実際記述している内容は前回の内容とほぼ変わらず、ただ汎用性を考えてプラグイン化したようなものとなってます。
プラグインのファイルをダウンロード
まずはプラグインに追加する「WP-Speech-Balloon」のzipファイルを以下からダウンロードします。
※新バージョンリリースに伴い、本記事内のダウンロードリンクを削除致しました。
次のプラグインの追加の際に使うので、ご自身でわかる場所であれば保存場所は基本的にどこでもOKです。
デスクトップなどに保存するとわかりやすいですね☆
「WP-Speech-Balloon」のインストールと有効化
それではさっそく、このプラグイン「WP-Speech-Balloon」をインストールして有効化しましょう。
説明するほどでもありませんが一応以下に手順を記載しておきます。
[ インストールと有効化の手順 ]
1. 管理画面から「プラグイン」 > 新規追加をクリック
2.プラグインのアップロードをクリック
3.ファイルを選択をクリック ※参照…の場合もあり。
4. 先程ダウンロードした「wp-speech-balloon.zip」を選択
5.今すぐインストールをクリック
6.今すぐ有効化をクリック
以上でプラグイン版の吹き出し会話を使う準備は完了です☆
こうして文章にして書き出してみるとちょっと面倒な感じがするかもしれませんが、実際にやってみると非常に簡単です。
「WP-Speech-Balloon」の使い方
プラグインのインストールから有効化まで完了したら、あとは実際に記事内で使うだけです。
使い方は前回の記事と同じですがここでも使い方を書いておきます。
吹き出し会話に使う画像の用意
吹き出し会話には以下のようなアバター画像が必要です。
特に人物の画像でなければいけないというわけではないのですが、吹き出し会話なので…(^_^;)
吹き出し会話に使いたいお好きな画像が決まったら、WordPressの管理画面からでも良いのでアップロードして「画像URL」を保存しておきます。
※あとで使うのでメモ帳などにコピペしておくと便利です。
画像表示の仕様
吹き出し会話に使う画像は縦横60px以上の正方形をおすすめします。
これは「WP-Speech-Balloon」側で画像の表示を縦横60pxに指定する仕様になっているためです。
また、縦横60px以上で縦横比が異なる画像を使った場合は「画像の中央でトリミング」する仕様になっています。
わかりやすい例を挙げると、全身が写っている縦長の画像を使った場合はお腹の部分が表示されるイメージです。（わかりにくいかな…）
これは汎用性を考えてこういう仕様にしているので、もし縦横比率が違う画像を使われる場合は「表示したい部分を正方形で切り抜いた画像」を使うようにしてください。
※ファイルの編集はされても結構ですので、変更されたい場合はお好きなように編集してください。
吹き出し会話に使うショートコード
このプラグイン「WP-Speech-Balloon」は便利なショートコードを使って記事内で使います。
前回の記事ではfunctions.phpにショートコードを使えるようにコードをコピペする手間がありましたが、今回はプラグインを有効化したらショートコードも自動的に使えるようにしてあります。
「WP-Speech-Balloon」を有効化中に有効化されるショートコードは以下の8個になります。
※吹き出しのパターンは2種類（通常とぽわぽわ）×左右のパターンになります。
※以下のショートコードはセットで書かないと使えません（例えば[bal_L2]だけなどはNG）。
詳しくは次項の「具体的な使い方」をご確認ください。
[ 「WP-Speech-Balloon」のショートコード一覧 ]
[bal_L1]、[bal_L2]、[bal_L3]
[bal_R1]、[bal_R2]、[bal_R3]
[bal2_L1]
[bal2_R1]
具体的な使い方
ちょっと前置きが長くなってしまいましたが、吹き出し会話に使う「画像の準備」と「記事で使うショートコード」がわかったところで具体的な使い方を説明です。
通常パターンとぽわぽわパターンをそれぞれサンプルをつけて説明しますので参考にしてみてください。
※ショートコードは3つセットで使います。
※お使いの際は、記事の中にそれぞれ以下の赤文字の部分を書き換えて書けばOKです。
[ 追記 ]
［2017年09月26日追記］
以下に記載していたコードに誤りがありましたので修正致しました。大変失礼致しました。
また、TwitterのDMにてご指摘頂きましたクリエモンさんに心より感謝申し上げます。
通常パターン（左）
サンプルイメージ
通常パターン（左）だよ～
コード
[bal_L1]画像URL[bal_L2]会話の内容[bal_L3]
通常パターン（右）
サンプルイメージ
通常パターン（右）だよ～
コード
[bal_R1]会話の内容[bal_R2]画像URL[bal_R3]
ぽわぽわパターン（左）
サンプルイメージ
ぽわぽわパターン（左）だよ～
コード
[bal2_L1]画像URL[bal_L2]会話の内容[bal_L3]
ぽわぽわパターン（右）
サンプルイメージ
ぽわぽわパターン（右）だよ～
コード
[bal2_R1]会話の内容[bal_R2]画像URL[bal_R3]
非常に簡単ですね☆
通常パターンとぽわぽわパターンとの違いも最初のショートコードに「2」が入るか入らないかの違いだけです。
なのでお使いのPCの「ユーザー辞書」に[bal_L1][bal_L2][bal_L3]と[bal_R1][bal_R2][bal_R3]を「バルーン」などと登録しておくと非常に効率的に使う事が出来るようになるのでおすすめです(^^)
あと、注意点というほどでもないのですが「画像URL」の部分は「http～」から始まる画像のURLです。
純粋に画像のURLのみを書けばOKなので、「<img～から始まるimgタグなどは含めないでください。
注意点
WP-Speech-Balloonは無料で自由にお使い頂けます。
また、ファイルのコードなどもご自由に編集して頂いて結構ですがあくまで自己責任でお願い致します。
個人で使うために作ったプラグインなのでその辺はご理解ください。
以前の記事で導入された方は、今回のプラグイン版を導入する場合必ずstyle.cssとfunctions.phpにコピペした内容を削除してからお使いください。
WP-Speech-BalloonのAMP対応について
WP-Speech-Balloonは一応AMPに対応させてます。
プラグインを有効にしてもAMPエラーは出ないようにしてありますが、そもそも「プラグイン側でAMP対応させる」というのは基本的に難しいのでかなり力技でAMP対応させてます。
なので「ちゃんと表示はされるけどAMPページだと若干重くなる」という可能性はあります。
ただ、そもそもこのプラグインの内容が極めてシンプルなので恐らく体感できる程重くなる事はないと思います。
また、お使いのテーマなどによってAMPの対応方法が違ったりするのでテーマによってはAMPページでうまく表示されない可能性はあります。
検証環境について
一応以下の環境では検証済みです。
WordPress（v4.8.2）
ほぼ素の「Twenty Fifteen（v1.8）」、「Twenty Sixteen（v1.3）」、「Twenty Seventeen（v1.3）」、「Simplicity2」、「Luxeritas」が検証済みのテーマです。
「Twenty Fifteen（v1.8）」、「Twenty Sixteen（v1.3）」、「Twenty Seventeen（v1.3）」は現時点でテーマ側でAMP対応が出来ないので通常ページのみ検証してあります。
「Simplicity2（～v2.6.0）+Simplicity-child（～v20161002）」、「Luxeritas（～v2.2.1.1）+Luxeritas Child Theme（～v2.00）」に関してはAMP対応テーマなので、かなり力技ではありますが一応AMP対応させてあります。
上記以外は検証しておりませんので、WordPressのバージョン違いやその他テーマ、上記テーマのバージョン違いなどではうまく動かない可能性はあります。
また、他に使っているプラグインによる干渉などによってはうまく動かない場合などもありますので、うまく動かない場合はまず他のプラグインを停止して確認してみてください。
まとめ
今回は以前紹介したものをプラグイン化したものを紹介致しました。
前回のものと比べはるかに簡単に導入出来るようになったので、「functions.phpをいじるのはちょっと…」と思っている方や、「設定が面倒だからもっと簡単に使いたい」と思っている方はこちらのプラグイン版をお使いになられると良いと思います。
ご使用も編集もご自由にやって頂いて結構ですので、ブログのアクセントに是非使ってみてください☆
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
はじめましてこんにちは。
こちらのプラグインを使っているaimiと申します。
speech_bubbleのように話している人の名前を入れたいのですが[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん”] のAさんのような感じでアレンジがきくようなコードがあったらお教えいただきたいです。よろしくお願いします。
aimiさんこんばんわ。
現状WP-Speech-Balloonにその機能はありません。
ただ、私自身speech_bubbleというプラグインを使った事がないので正確にはわかりませんが、今少し検索して見たところaimiさんがイメージされている事（私の勝手な想像ですが）は、WP-Speech-Balloonでも出来ると思います。
ご自身で自由に編集されても結構ですし、私も機能的にあった方が便利だと思うので、本業との兼ね合いで時間はかかるかもしれませんがアップデートか何かで対応しようかとも思っています。
本日「WP-Speech-Balloon_2.0」をリリース致しましたのでご報告です。
取り急ぎ名前の表示が出来るようになっただけですが、注意点などありますので詳細は【WP-Speech-Balloon_2.0】をリリース！名前を表示出来るようになったよ☆をご確認ください。
不明点など御座いましたらお手数ですが再度コメント欄かTwitterからご連絡くださいませ。
以上、宜しくお願い致します。
はじめましてこんにちは。
こちらのプラグインを使っているegakayと申します。
ブログを作成しているのですが、ある記事を書き終わった後、
このspeech balloonのショートコードから下が、
なぜか縦書きに表示されました。
ショートコードを削除すれば、横書きに戻りました。
ほかの記事では問題なく使えるのに、
どうしてそのようなことが起きるのか、
RA’sさんはおわかりになりますでしょうか？
とても便利で楽しいプラグインなので、ぜひ使い続けたいと思うのですが…
よろしくお願いいたします。
egakay さんこんばんわ。
WP-Speech-Balloon が崩れているページを拝見させて頂けますと少し具体的なお話が出来るかもしれないのですが、現状ですとあくまで予想でのお話になってしまいます事、どうかご了承ください（＞＜）
まず、「他の記事では問題なく表示されている」という事から、プラグイン自体に問題がある可能性は低いのかなと思います。
この場合パッと思い浮かぶ原因は以下になりますので、まず確認してみてください
——————————
・問題のページに書いている「WP-Speech-Balloon の記述方法」
→コピペミスなどでカッコが抜けていたり、2個続けていたり、全角になっていないか、スペルは間違っていないか、など。
・連続改行を使っている
→これはバージョン2.2（現在の最新版）で対応済みですが、これよりも前のバージョンを使われている場合連続改行すると崩れてしまいます。
・他のプラグインとの競合
→WP-Speech-Balloon 自体シンプルに作ってあるので基本的に競合する事はないとは思いますが、上記で治らなかった場合は念の為他のプラグインを停止してみてください。
——————————
WP-Speech-Balloon は可能であれば最新版をお使い頂く事を強くおすすめしてます。
ただ、現在お使いのバージョンが 2.x 以降であれば最新版へアップデートしても問題ないのですが、
1.x を使われている場合はコードを 2.x の書き方へ直す必要があります。
【WP-Speech-Balloon 2.1】
https://tips4life.me/wp-speech-balloon_2_1
以上、参考になれば幸いです☆