Tanweb.net

PC・デジモノ・旅行など好きなことだけ語るブログ

ブログにLINEトークのような吹き出し記事が書けるWordPressプラグイン

ブログにLINEトークのような吹き出し記事が書けるWordPressプラグイン

Sponsor link
  • このエントリーをはてなブックマークに追加
  • follow us in feedly
  • LINEで送る

      2016/12/06
 Wordpress

更新日:2016/12/06   Wordpress

midashi-wordpress

ブログでLINEトークのような吹き出し記事が書けるWordpressプラグイン「Speech Bubble」の設定方法や使い方を紹介します!

Speech Bubbleは思った以上に便利なプラグインです。これを入れれば憧れの吹き出しコンテンツがアナタのブログにも!!

Sponsor link
Sponsor link

まずは「Speech Bubble」をインストール

まずは、お使いのWordpressに「Speech Bubble」をインストールしなければいけません。インストール方法は以下。

hukidashi01

1.プラグイン「新規追加」を選択して、フォームに「Speech Bubble」をコピペして、Enter(MacはReturn)を押します。

hukidashi02

2.検索結果で「Speech Bubble」が表示されますので「今すぐインストール」を選択します。画像ではすでにインストールがしてある状態なので、インストール済みとなっています。

3.インストールが完了しましたら「このプラグインを有効化」を選択してSpeech Bubbleを使えるようにします。

これで「Speech Bubble」がお使いのWordpressで利用できるようになります。

Speech Bubble の使い方

キタムラ
それでは実際に「Speech Bubble」吹き出し機能を使いながら解説していきたいと思いますよっ!
たま子
皆さんこんにちは!アシスタントを務めさせていただきます「たま子」ですっ!!よろしくお願いしますね♪
キタムラ
はい、たま子ちゃんヨロシクね!それじゃあ、さっそく「Speech Bubble」を使うにはどうしたら良いか教えてください。
たま子
Speech Bubble を使って記事内に吹き出しを表示するには、Wordpressの本文内の任意の場所に起動コードを入力する必要があるんです。
たま子
起動コードは、ビジュアルエディタでもテキスト(HTML)エディタでもどちらでも大丈夫なのよ。多くの方はビジュアルエディタだと思いますので安心でですね!起動コードは以下に添付しますね。

 

Speech Bubble 吹き出し起動コード

↑↑のコードをコピペして使ってください。

コードを詳しく解説

type=”drop” この drop の部分を差し替えることによって、吹き出しのデザインを変更することができます。デザインは後述します。
subtype=”L1″ この L1 を R1 に差し替えることによって吹き出しが右向きになります。L1が左向き、R1が右向きです。
icon=”1.jpg” この 1.jpg を差し替えることによって、吹き出しに任意のアイコン画像を使うことができます。上のキタムラやたま子みたいなやつです。
name=”なまえ” この部分が吹き出し上に表示されている名前になります。上でいう「たま子」みたいなやつです。
○○○ この部分が、吹き出しの中のテキストになります。

実際に上の起動コードを記事に添付してみると・・・

なまえ
〇〇〇

 

となります。

Ads by - Admax

吹き出しデザインの変更方法

キタムラ
吹き出しを使うための起動コードはコピペするだけだし、とっても簡単だね!
たま子
そうねっ!次は吹き出しデザインの変更方法を解説しますね。
たま子
吹き出しのデザイン変更は上で紹介した「type=”drop”」の「dorp」の部分に使いたい吹き出しデザインのコードを入力するだけなのよ。吹き出しの種類は全部で9種。以下から順番に紹介していくわね。

 

デザインコード「drop」

キタムラ
これがデフォルトの吹き出しデザインなんだね。
たま子
可もなく不可もなく。迷ったらこれが良いんじゃないかしら?

 

このデザインを使うには「type=” ”」に「drop」と入力してください。

デザインコード「std」

キタムラ
これはだいぶシンプルだねぇ。
たま子
そうね。あまりゴチャゴチャしたものは要らないっていうオーナーさんには良いかもしれませんね。

 

このデザインを使うには「type=” ”」に「std」と入力してください。

デザインコード「Pink」

キタムラ
なかなかピンクいね。うちのブログにはちょっと使えないかな・・・
たま子
わたしは好きですよ!乙女ですから♥ ・・・ォホン まぁ、ガーリーなブログとか美容関連など女子力が必要なブログに使えそうね。

 

このデザインを使うには「type=” ”」に「pink」と入力してください。

デザインコード「rtail」

キタムラ
これもなかなか実用的だね。
たま子
どんなブログにも使えそうな気がするわね。でも赤系が基調のブログに使うとハレーションを起こしてしまうかもしれないから注意が必要ね。

 

このデザインを使うには「type=” ”」に「rtail」と入力してください。

デザインコード「fb」

キタムラ
懐かしい感じだ!以前のFacebookメッセージ的なデザインだね。
たま子
デザインコード「fb」はやっぱり Facebook の略なんでしょうね。

 

このデザインを使うには「type=” ”」に「fb」と入力してください。

デザインコード「fb-flat」

キタムラ
これこれ、今のFacebookってこのデザインよね。
たま子
スマートフォンのFacebookメッセージでお馴染みのデザインよね。

 

このデザインを使うには「type=” ”」に「fb-flat」と入力してください。

デザインコード「ln」

キタムラ
今回の記事はこのデザインをメインに使っているんだよね。
たま子
そうそう、以前のLINEトークに似たデザインなのよね。ln は LINEの略ね。「l」を大文字の「i」と間違うケースがあるみたいだけど小文字の「エル」よ。

 

このデザインを使うには「type=” ”」に「ln」と入力してください。

デザインコード「ln-flat」

キタムラ
こっちが今のLINEタイプだね。最近はなんでもフラットにするんだよね~。
たま子
あら、ワタシはフラットデザイン好きよ♥

 

このデザインを使うには「type=” ”」に「ln-flat」と入力してください。

デザインコード「think」

キタムラ
ぶっちゃけたま子っていくつなんだろう?嫁に変な勘違いされないといいなぁ・・・
たま子
キタムラさん最近結婚したんだけど、奥さんとうまくいっているのかしら?・・・こんな風に考え事などに使う吹き出しデザインよ。

 

このデザインを使うには「type=” ”」に「think」と入力してください。

吹き出し画像の変更方法

キタムラ
デザインが豊富でブログを書くのが楽しくなること間違いないねっ!!
たま子
そうねっ!ワタシは断然ピンクよ!!・・・次は吹き出し画像の変更方法を解説するわね。初心者さんには少し難しいかもしれないけど、そこはチャレンジあるのみよ!

FTPソフトを使います

吹き出しの画像を変更するには「FTPソフト」を使って「プラグイン」のフォルダへ直接アクセスし画像をアップロードします。

手順を解説

hukidashi03

1.FTPソフトでWordpressを入れているフォルダを展開して「wp-content」を選択します。

hukidashi04

2.「plugins」フォルダを選択します。

hukidashi05

3.沢山あるプラグインフォルダの中から「speech-bubble」フォルダを選択します。

hukidashi06

4.「speech-bubble」フォルダの中に「img」フォルダがあるのでそれを選択します。

hukidashi07

5.この「img」フォルダの中に、吹き出しに使いたいアイコン画像をアップロードしていきます。

たま子
画像のサイズは適当じゃダメよ。「100×100」くらいの正方形にしてからアップロードするのが無難よ。

画像をアップロード後、起動コードの「icon=” ”」に画像のタイトルを入れればそれが吹き出しアイコン画像として表示されます。上の画像を参照すると「icon=” ”」に「tamako.jpg」と入力すると、たま子ちゃんのアイコン画像が表示される感じです。

ad link

まとめ

キタムラ
ちょっと画像のアップロードは難しいかもしれないね。
たま子
そうよね。でも、Wordpressでブログを立ち上げることができたユーザーさんなら大丈夫!!きっと出来るわ!!
キタムラ
そうだね。Wordpressを立ち上げるほうがよっぽど難易度高いからねぇ。今回は、ブログに吹き出しを使って記事を書くことができるプラグイン「Speech Bubble」を紹介しましたがいかがでしたでしょうか?
たま子
とても素敵なプラグインよね!開発してくれた方には感謝してもしきれないわ。もし、わからないことがあったらコメントかコンタクトから質問していただくと管理人のキタムラが疑問にお応えいたします。ただ、キタムラさんは思いの外スペックが低めなので、わからないこともあると思うの・・・その時は許してあげてくださね。
キタムラ
たま子ちゃん・・・最後の最後に結構キツイね・・・とっとにかくっ「Speech Bubble」を利用して楽しいブログライフを送ってくださいね~!!それではまたっ!!
たま子
ご清聴ありがとうございました~♪アシスタントは「たま子」が務めさせていただきました。またどこかでお会いしましょう!