ブログに吹き出しがついているのを見かけることはありませんか。
かわうそ
こういうやつね
この吹き出しにはこのような効果があります。
オリジナリティをだす
文字ばかりの記事を和らげる
別人格を作ることで、多少言いにくいことも言えてしまう
人間どうしても文字よりもイラストに目がいってしまうもの。
ここで性格付けされたキャラクターに話をさせることで、あなたのブログの印象を深めて、覚えてもらうという作戦です。
さて、では吹き出しはどのようにつければいいでしょうか。
■この記事を読んでもらいたい方：
ブログに吹き出しを付けたい人
※ブログをWordPressで作成しており、テーマに「LionMedia（ライオンメディア）」を利用している人が対象です。
吹き出しを付ける方法
WordPressでブログを作成している方で、
テーマに「LionMedia（ライオンメディア）」を利用している方が対象です。
「LionMedia（ライオンメディア）」は無料の優れたテーマですが、
標準では吹き出しの機能が実装されていません。
そこで、WordPressのプラグイン機能を利用して吹き出しをつけます。
かわうそ
プラグインを使わない方法もあるけど、CSSを編集するなど初心者にはちょっとハードルが高いので、プラグインでやる方法を紹介するよ。
プラグインをインストール
ここで利用するプラグインは「WP-Speech-Balloon」です。
WordPressのプラグイン「WP-Speech-Balloon」 作者：RA’s さん
https://tips4life.me/wp-speech-balloon-install
［Step1］プラグインファイルをダウンロード
WordPressへ「WP-Speech-Balloon」をインストールする際に必要な
「WP-Speech-Balloonのプラグインファイル」をダウンロードします。
以下のURLから「WP-Speech-Balloon」（現在バージョン2.2）をダウンロードして、
デスクトップなどのわかりやすい場所へ保存してください。
［Step2］Wordpressへインストール
ファイルの選択画面になりましたら、
先程保存した「wp-speech-balloon2.2.zip」を選択して「開く」をクリック。
以下のようにの「wp-speech-balloon2.2.zip」が選択されていることを確認して、
今すぐインストールをクリック。
インストールが完了したらプラグインを有効化をクリックして完了です。
会話させたいキャラクターをメディアにアップロード
会話させたいキャラクターをメディアにアップロードします。
↓ここに表示されているキャラクターですね。
かわうそ
わしのこと？
画像表示の仕様
WP-Speech-Balloonで使うアバター画像は縦横70px以上の正方形をおすすめします。
これはWP-Speech-Balloon側で画像の表示を縦横70pxに指定する仕様になっているためです。
また、縦横70px以上で縦横比が異なる画像を使った場合は「画像の中央でトリミング」する仕様になっています。
※出典元：Tips 4 Life 「WP-Speech-Balloon」の使い方 2018年11月11日引用
WP-Speech-Balloonのコード
吹き出しの種類は全部で5種類です。
ここでは、主に利用する４つを紹介します。
一般的な吹き出し
かわうそ
これが普通のバージョン
おもしろくない
かわうそブラック
考え中に使う吹き出し
かわうそ
これを使えば考え事してるみたい
やっぱり面白くない
かわうそブラック
通常吹き出し（左パターン）
サンプル 通常吹き出し（右パターン） ※URLはこのサイトの場合ですので、自分のURLを確認
かわうそ
こんな感じになるんだぞー
画像のURLの確認方法
メディアのライブラリから設定したい画像を選択します。
右に表示されている「ファイルのURL：」の中のURLがそれです。
考え中吹き出し（左パターン）
かわうそ
L1の”1”が通常風、”2”が考え中風という区別なんだねー。
通常吹き出し（右パターン）
サンプル 通常吹き出し（左パターン）
もう飽きた
かわうそブラック
考え中吹き出し（右パターン）
「TinyMCE Templates」を使ってテンプレート化する
吹き出しを使いたいときは、このコードをコピペして必要に応じて編集すればいいのですが、
毎回コピペするのも面倒なので、テンプレート化してしまいましょう。
TinyMCE Templatesをインストールする
このプラグインをインストールして有効化すると、「テンプレート」という項目が追加されます。
① テンプレートで新規追加を選択
② テンプレートの名称を記載
③ テンプレート化するコードを記載
④ 公開をクリック
これで投稿の新規追加画面に、「テンプレートを挿入」というボタンがつきました！
このボタンをクリックすると、さきほど作成したコードが選択できるようになります。
セリフ部分を編集すれば、違うことをしゃべらせることができるというわけです。
かわうそ
めっちゃ便利！！
まとめ
WordPressで吹き出し会話が出来るプラグイン「WP-Speech-Balloon」は「TinyMCE Templates」プラグインとの組み合わせによって「コードテンプレート挿入1回」と「本文」編集するだけで簡単に使えるプラグインです。
ぜひぜひ、これでみなさんも快適な吹き出しライフを味わってください。
以上、WordPressでテーマ「LionMedia（ライオンメディア）」を利用している方向けの吹き出しプラグイン対応についての記事でした。
ご不明点があれば、お問い合わせからご連絡をいただけますと幸いです。
ここまでお付き合いいただきありがとうございました。
かわうそ
もっと仲間できないかなー。
