サイトメンテナンスをしているので一時的に表示が崩れる場合があります。何卒ご理解頂けますようお願い申し上げます。

【プラグイン公開】WordPressで使える吹き出し会話のプラグインを作ったよ

【プラグイン公開】WordPressで使える吹き出し会話のプラグインを作ったよ

以前「WordPressの記事で使える『吹き出し会話』の簡単なコードを作ってみたよ」という記事で、タイトル通りWordPressの記事で使える簡単なコードを作りました。

この記事が思いの外反響が良く、使って頂いている方の中で「もっと簡単にプラグインで使いたい」というお声も頂きました。

元々、簡単なコードであれば「プラグインではなく直書きの方が良い」という事でプラグインを使わない方法で作って紹介したのですが、前回の記事よりもさらに簡単なプラグイン版の吹き出し会話を作ってみたので紹介です。

※誰でも理解出来るように手順などを可能な限り細かく説明してるので、手順が多く感じられるかもしれませんが実際やってみると非常にシンプルで簡単な内容です。

プラグインを使わない元々の吹き出し会話に付いては以下の記事をご覧ください。

WordPressの記事で使える『吹き出し会話』の簡単なコードを作ってみたよ
プラグイン版「WP-Speech-Balloon」をリリース致しましたので、これからお使いになる方はプラグイン版の「WP-Speech-Balloon」をお使いください。 今後アップデートなどはプラグイン版のみ行う予定で、本記事の

今までよりも超簡単

今回はプラグインを使う方法なので、実際に吹き出し会話を使うまでの準備は超簡単です。

「プラグインのファイルをダウンロード」「プラグインをインストール」「プラグインを有効化」「記事内にショートコードで記述」

たったこれだけで面倒な設定も不要、CSSの記述も不要、funcitions.phpへの記述も不要です。

プラグインだけど重くない

プラグインは汎用性を持たせる為やその他理由から「重くなる」ものが多いのですが、今回のプラグイン版は本当に必要な部分のみの記述で、極めてシンプルなものになってるのでそこまで体感出来るほど重くなるという事は考えにくいです。

ただ、やはりWordPressでプラグインの処理を行う関係上、直書きしたものと比べると若干は重くなるかもしれません。

実際記述している内容は前回の内容とほぼ変わらず、ただ汎用性を考えてプラグイン化したようなものとなってます。

プラグインのファイルをダウンロード

まずはプラグインに追加する「WP-Speech-Balloon」のzipファイルを以下からダウンロードします。

次のプラグインの追加の際に使うので、ご自身でわかる場所であれば保存場所は基本的にどこでもOKです。

デスクトップなどに保存するとわかりやすいですね☆

「WP-Speech-Balloon」のインストールと有効化

それではさっそく、このプラグイン「WP-Speech-Balloon」をインストールして有効化しましょう。

説明するほどでもありませんが一応以下に手順を記載しておきます。

Tipsアイコン[ インストールと有効化の手順 ]

1. 管理画面から「プラグイン」 > 新規追加をクリック

2.プラグインのアップロードをクリック

3.ファイルを選択をクリック ※参照…の場合もあり。

4. 先程ダウンロードした「wp-speech-balloon.zip」を選択

5.今すぐインストールをクリック

6.今すぐ有効化をクリック

以上でプラグイン版の吹き出し会話を使う準備は完了です☆

こうして文章にして書き出してみるとちょっと面倒な感じがするかもしれませんが、実際にやってみると非常に簡単です。

「WP-Speech-Balloon」の使い方

プラグインのインストールから有効化まで完了したら、あとは実際に記事内で使うだけです。

使い方は前回の記事と同じですがここでも使い方を書いておきます。

吹き出し会話に使う画像の用意

吹き出し会話には以下のようなアバター画像が必要です。

RAsプロフ画像

特に人物の画像でなければいけないというわけではないのですが、吹き出し会話なので…(^_^;)

吹き出し会話に使いたいお好きな画像が決まったら、WordPressの管理画面からでも良いのでアップロードして「画像URL」を保存しておきます。
※あとで使うのでメモ帳などにコピペしておくと便利です。

画像表示の仕様

吹き出し会話に使う画像は縦横60px以上の正方形をおすすめします。

これは「WP-Speech-Balloon」側で画像の表示を縦横60pxに指定する仕様になっているためです。

また、縦横60px以上で縦横比が異なる画像を使った場合は「画像の中央でトリミング」する仕様になっています。

わかりやすい例を挙げると、全身が写っている縦長の画像を使った場合はお腹の部分が表示されるイメージです。(わかりにくいかな…)

これは汎用性を考えてこういう仕様にしているので、もし縦横比率が違う画像を使われる場合は「表示したい部分を正方形で切り抜いた画像」を使うようにしてください。

※ファイルの編集はされても結構ですので、変更されたい場合はお好きなように編集してください。

吹き出し会話に使うショートコード

このプラグイン「WP-Speech-Balloon」は便利なショートコードを使って記事内で使います。

前回の記事ではfunctions.phpにショートコードを使えるようにコードをコピペする手間がありましたが、今回はプラグインを有効化したらショートコードも自動的に使えるようにしてあります。

「WP-Speech-Balloon」を有効化中に有効化されるショートコードは以下の8個になります。
※吹き出しのパターンは2種類(通常とぽわぽわ)×左右のパターンになります。

※以下のショートコードはセットで書かないと使えません(例えば[bal_L2]だけなどはNG)。
詳しくは次項の「具体的な使い方」をご確認ください。

Tipsアイコン[ 「WP-Speech-Balloon」のショートコード一覧 ]

[bal_L1][bal_L2][bal_L3]

[bal_R1][bal_R2][bal_R3]

[bal2_L1]

[bal2_R1]

具体的な使い方

ちょっと前置きが長くなってしまいましたが、吹き出し会話に使う「画像の準備」と「記事で使うショートコード」がわかったところで具体的な使い方を説明です。

通常パターンとぽわぽわパターンをそれぞれサンプルをつけて説明しますので参考にしてみてください。

※ショートコードは3つセットで使います。

※お使いの際は、記事の中にそれぞれ以下の赤文字の部分を書き換えて書けばOKです。

Tipsアイコン[ 追記 ]

[2017年09月26日追記]

以下に記載していたコードに誤りがありましたので修正致しました。大変失礼致しました。

また、TwitterのDMにてご指摘頂きましたクリエモンさんに心より感謝申し上げます。

通常パターン(左)

サンプルイメージ

avatar

通常パターン(左)だよ~


コード

[bal_L1]画像URL[bal_L2]会話の内容[bal_L3]

通常パターン(右)

サンプルイメージ

通常パターン(右)だよ~

avatar


コード

[bal_R1]会話の内容[bal_R2]画像URL[bal_R3]

ぽわぽわパターン(左)

サンプルイメージ

avatar

ぽわぽわパターン(左)だよ~


コード

[bal2_L1]画像URL[bal_L2]会話の内容[bal_L3]

ぽわぽわパターン(右)

サンプルイメージ

ぽわぽわパターン(右)だよ~

avatar


コード

[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をいじるのはちょっと…」と思っている方や、「設定が面倒だからもっと簡単に使いたい」と思っている方はこちらのプラグイン版をお使いになられると良いと思います。

ご使用も編集もご自由にやって頂いて結構ですので、ブログのアクセントに是非使ってみてください☆

シェアして頂けると喜びます☆

この記事が気に入ったら
いいね ! しよう

ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆

  1. aimi より:

    はじめましてこんにちは。
    こちらのプラグインを使っているaimiと申します。
    speech_bubbleのように話している人の名前を入れたいのですが[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん”] のAさんのような感じでアレンジがきくようなコードがあったらお教えいただきたいです。よろしくお願いします。

    • RA's(らす)@Tips4Life より:

      aimiさんこんばんわ。

      現状WP-Speech-Balloonにその機能はありません。
      ただ、私自身speech_bubbleというプラグインを使った事がないので正確にはわかりませんが、今少し検索して見たところaimiさんがイメージされている事(私の勝手な想像ですが)は、WP-Speech-Balloonでも出来ると思います。

      ご自身で自由に編集されても結構ですし、私も機能的にあった方が便利だと思うので、本業との兼ね合いで時間はかかるかもしれませんがアップデートか何かで対応しようかとも思っています。

    • RA's(らす)@Tips4Life より:

      本日「WP-Speech-Balloon_2.0」をリリース致しましたのでご報告です。
      取り急ぎ名前の表示が出来るようになっただけですが、注意点などありますので詳細は【WP-Speech-Balloon_2.0】をリリース!名前を表示出来るようになったよ☆をご確認ください。
      不明点など御座いましたらお手数ですが再度コメント欄かTwitterからご連絡くださいませ。
      以上、宜しくお願い致します。

Top