WordPressテーマを「LionMedia」から「The THOR」に変更しました!

ブログに吹き出しを付ける LionMedia(ライオンメディア)はプラグインで解決!

ブログに吹き出しがついているのを見かけることはありませんか。

 

avatar

かわうそ

こういうやつね

 

この吹き出しにはこのような効果があります。

 

オリジナリティをだす

文字ばかりの記事を和らげる

別人格を作ることで、多少言いにくいことも言えてしまう

 

人間どうしても文字よりもイラストに目がいってしまうもの。

ここで性格付けされたキャラクターに話をさせることで、あなたのブログの印象を深めて、覚えてもらうという作戦です。

さて、では吹き出しはどのようにつければいいでしょうか。

 

 

■この記事を読んでもらいたい方:

ブログに吹き出しを付けたい人

※ブログをWordPressで作成しており、テーマに「LionMedia(ライオンメディア)」を利用している人が対象です。

 

 

広告

吹き出しを付ける方法

 

WordPressでブログを作成している方で、

テーマに「LionMedia(ライオンメディア)」を利用している方が対象です。

「LionMedia(ライオンメディア)」は無料の優れたテーマですが、

標準では吹き出しの機能が実装されていません。

そこで、WordPressのプラグイン機能を利用して吹き出しをつけます。

 

avatar

かわうそ

プラグインを使わない方法もあるけど、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)をダウンロードして、

デスクトップなどのわかりやすい場所へ保存してください。

 

スピーチバルーンDLファイル

 

[Step2]Wordpressへインストール

アップロード画面

 

ファイルの選択画面になりましたら、

先程保存した「wp-speech-balloon2.2.zip」を選択して「開く」をクリック。

以下のようにの「wp-speech-balloon2.2.zip」が選択されていることを確認して、

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

インストールが完了したらプラグインを有効化をクリックして完了です。

 

 

会話させたいキャラクターをメディアにアップロード

会話させたいキャラクターをメディアにアップロードします。

 

↓ここに表示されているキャラクターですね。

avatar

かわうそ

わしのこと?

 

 

画像表示の仕様

WP-Speech-Balloonで使うアバター画像は縦横70px以上の正方形をおすすめします。

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

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

※出典元:Tips 4 Life 「WP-Speech-Balloon」の使い方 2018年11月11日引用

 

WP-Speech-Balloonのコード

吹き出しの種類は全部で5種類です。

ここでは、主に利用する4つを紹介します。

一般的な吹き出し

avatar

かわうそ

これが普通のバージョン

おもしろくない

avatar

かわうそブラック

 

考え中に使う吹き出し

avatar

かわうそ

これを使えば考え事してるみたい

やっぱり面白くない

avatar

かわうそブラック

 

通常吹き出し(左パターン)

[L1_wsbStart][L_wsbAvatar]ここに画像のURLを貼り付け[L_wsbName]名前を入力[L_wsbText]セリフを入力[L_wsbEnd]

 

サンプル 通常吹き出し(右パターン) ※URLはこのサイトの場合ですので、自分のURLを確認

[L1_wsbStart][L_wsbAvatar]https://yuyujiteki.site/wp-content/uploads/2018/10/kawausoicon4.jpg[L_wsbName]かわうそ[L_wsbText]こんな感じになるんだぞー[L_wsbEnd]

 

avatar

かわうそ

こんな感じになるんだぞー

 

画像のURLの確認方法

メディアのライブラリから設定したい画像を選択します。

右に表示されている「ファイルのURL:」の中のURLがそれです。

メディアURL

 

考え中吹き出し(左パターン)

[L2_wsbStart][L_wsbAvatar]ここに画像のURLを貼り付け[L_wsbName]名前を入力[L_wsbText]セリフを入力[L_wsbEnd]

 

avatar

かわうそ

L1の”1”が通常風、”2”が考え中風という区別なんだねー。

 

通常吹き出し(右パターン)

[R1_wsbStart][R_wsbText]セリフ[R_wsbAvatar]ここに画像のURLを貼り付け[R_wsbName]名前を入力[R_wsbEnd]

 

サンプル 通常吹き出し(左パターン)

[R1_wsbStart][R_wsbText]もう飽きた[R_wsbAvatar]https://yuyujiteki.site/wp-content/uploads/2018/10/kawausoicon4.jpg[R_wsbName]かわうそブラック[R_wsbEnd]

 

もう飽きた

avatar

かわうそブラック

 

考え中吹き出し(右パターン)

[R2_wsbStart][R_wsbText]もう飽きた[R_wsbAvatar]https://yuyujiteki.site/wp-content/uploads/2018/10/kawausoicon4.jpg[R_wsbName]かわうそブラック[R_wsbEnd]

 

 

 

TinyMCE Templates」を使ってテンプレート化する

吹き出しを使いたいときは、このコードをコピペして必要に応じて編集すればいいのですが、

毎回コピペするのも面倒なので、テンプレート化してしまいましょう。

 

TinyMCE Templatesをインストールする

tinymceインストール画面

このプラグインをインストールして有効化すると、「テンプレート」という項目が追加されます。

テンプレート化

① テンプレートで新規追加を選択

② テンプレートの名称を記載

③ テンプレート化するコードを記載

④ 公開をクリック

これで投稿の新規追加画面に、「テンプレートを挿入」というボタンがつきました!

テンプレート化成功

このボタンをクリックすると、さきほど作成したコードが選択できるようになります。

セリフ部分を編集すれば、違うことをしゃべらせることができるというわけです。

 

avatar

かわうそ

めっちゃ便利!!

 

 

まとめ

WordPressで吹き出し会話が出来るプラグイン「WP-Speech-Balloon」は「TinyMCE Templates」プラグインとの組み合わせによってコードテンプレート挿入1回」と「本文」編集するだけで簡単に使えるプラグインです。

ぜひぜひ、これでみなさんも快適な吹き出しライフを味わってください。

 

以上、WordPressでテーマ「LionMedia(ライオンメディア)」を利用している方向けの吹き出しプラグイン対応についての記事でした。

ご不明点があれば、お問い合わせからご連絡をいただけますと幸いです。

ここまでお付き合いいただきありがとうございました。

 

 

avatar

かわうそ

もっと仲間できないかなー。

ブログで吹き出しを作る
最新情報をチェックしよう!
広告