吹き出しプラグイン【Speech Bubble】が楽しい

fukidashi

私、かわいいものが大好きです。

そして面白いものも大好きです。

 

このブログも私の趣味全開で、見た目もピンクピンクしていて女性向け(男性もウェルカムですよ)、そしてカスタマイズしてて楽しいもの、そして訪問者さんにも楽しんで頂けるブログを目指しています(まだ発展途上ですけど^ ^;)。

 

あ、訪問者さんの「ためになる」ブログであることが大前提ですよね。

わかってます。

わかってます、一応。。。

 

今回は、そんな楽しいこと大好きな私好みの「見た目が楽しいプラグイン」を見つけたのでご紹介します。

 

 

吹き出しで会話してるのカワイイ

「ブログは1000文字以上書くこと」ってよく言いますけど、文字だけズラーっと並んでても読んでて眠くなっちゃいますよね。

実は私のブログ記事も全て1000文字以上書いています。

…というか、2000文字クラスも多いです(笑)

 

なので、訪問者さんの目がショボショボしないように、見出しを付けたり文字を少し大きくしたり行間を開けたり工夫はしています^ ^;

 

でも所詮は文字じゃないですか。

活字は眠くなる!という方も多いと思います。

 

で、「なんか見た目かわいくて、目がショボショボしたり飽きたりしないような書き方できないかな~」って考えてて、辿り着いたのが吹き出しで会話するような形式。

ちょうど、LINEみたいな感じです。

 

タグで作ろうと思ってたんですが、毎回そんなんじゃ面倒くさいじゃないですか。

私、HTMLに詳しいわけじゃないですしね。

 

そしたら、あるじゃないですか!

吹き出しを簡単に表示する素敵なプラグインが。

 

かのん
らくちーん♪

 

 

『Speech Bubble』をインストールしよう

それでは、かわいい吹き出しプラグイン『Speech Bubble』をインストールしましょう。

 

ダッシュボードの左メニューにあるプラグインから新規登録をクリックします。

03-04

これはどのプラグインをインストールする時も一緒ですね^ ^

 

次に、右上の検索ボックスに『Speech Bubble』と入力して検索ボタンを押します。

Speech Bubble が表示されたら【今すぐインストール】ボタンをクリック。

1

 

有効化するのを忘れないでくださいね。

2

 

これでおしまいです。

設定等はありません^ ^

 

 

記事上で吹き出しを表示する方法

それでは、実際に記事に吹き出しを表示させてみましょう。

投稿画面で、タグを直接入力画面に打ち込めば表示されます。

 

ビジュアル・テキストモードどちらでもいいので、下記のショートコードを入力します。
(いちいち入力してたら面倒だし間違うかもしれないので、コピペしてみて下さいね)

 

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] ここに表示したいテキストを入力してください [/speech_bubble]

 

 

コピペと文字の入力が終わったら「公開」または「下書きとして保存」をしてプレビューしてみてください。

上と同じアイコンと吹き出し、そして吹き出しの中にご自身で入力されたセリフがちゃんと表示されていればOKです^ ^

 

ちなみに、吹き出しの中の文字色を変えることもできます。

通常の記事の文字色を変えるのと同じ方法なので簡単ですね。

3

 

A さん
 色を変えてみました★

 

 

好きなアイコンに変更してみよう

デフォルトはミステリーマンのようなアイコンです。

これを自分の好きな画像に変えてみましょう。

 

画像をサーバーにアップロードします(WordPress上で完結出来たら楽なのに…)。

アップロードにはFTPソフトを使用してくださいね。

FFFTPでエックスサーバーにファイルをアップロードする方法

 

 

アップロード先のサーバーフォルダはコチラ↓です。

ドメイン > public_html > wp_content > plugins > speech bubble > img

 

上記は、私が使っているエックスサーバーでの「img」フォルダまでのパスです。
他のサーバーだと『public_html』が異なる表記かもしれません。

 

 

サーバーへの画像アップロードが完了したら、投稿画面で吹き出しを表示するショートコードを入力してみましょう^ ^

51

 

すると、こうなります。

かのん
 アイコンが変わったよー^ ^ 

 

 

吹き出しのパターンは全部で9種類

ショートコードの中の”drop”を変えることで、全部で9パターンの吹き出しが作れます。

 

6

 

 

アイコンの位置と吹き出しの向きを変える

デフォルトでは、アイコンが左側になっていますが、右側に変えることが出来ます。

ショートコード内の【subtype=”L1“】を【subtype=”R1“】に変えるだけです^ ^

 

[speech_bubble type="drop" subtype="R1" icon="1.jpg" name="A さん"] 右に変えてみました[/speech_bubble]

 

すると、こうなります↘↘↘

A さん
 右に変えてみました

アイコンが右側になり、吹き出しの向きも変わりました^ ^

 

 

アイコンの名前を変更しよう

この記事の中盤で、アイコンを変えた時にこっそり名前も変えてるんですが(笑)

デフォルトだと、アイコンの下もしくは横に【Aさん】と表示されているのを変えることができます。

A さん
 私はAさんです
かのん
 かのんです♪

 

 

ショートコード内の【name=”A さん“】をお好きな名前に変えるだけです^ ^

 

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] ここに表示したいテキストを入力してください[/speech_bubble]

 

 

いかがでしたでしょうか。

私は何だか楽しくて多用しちゃいそうです(*´艸`*)

ショートコードをいちいち入力するのも面倒なので(←かなりの面倒くさがり)【AddQuickTag】に登録しちゃうのが良さそうですね。

 

PS.
  私、姫宮かのんは
  月150時間の残業から逃げるように会社を辞めて
  今はネットビジネスをしながら
  夢を叶えるために動物系の専門学校に通っています。

 クラスメイトのみんなが
  学校帰りに夜遅くまでバイトをしている間
  私は自宅でテレビを見ながらパソコンに向かっています^ ^

  夢を叶えるための資金と時間を手に入れるために
  副業でのネットビジネスの始め方、取り組み方、考え方を
  メルマガで詳しくお話ししていきます。

  ビジネスや具体的な作業について
  丁寧に解説したテキストやマニュアルもプレゼントしていますので
  「叶えたい夢があるけどお金も時間もない!」状態ならば
  ぜひ、下の画像をクリックしてメルマガ詳細をご確認ください☆

↓↓↓



コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

プロフィール


姫宮かのんと申します。

激務から鬱病を発症した後、月残業150時間から何とか逃れたいとアフィリエイトを始めました。
今は大きな夢を叶えるために、専門学校に通いながらアフィリエイト活動を続けています。

このブログでは、知識も実績も自信もゼロから出発する初心者さんでも確実に稼げるようになるために、わかりやすさをモットーにあなた目線で知識と情報を配信していきます。

もう社会人だから…と諦めている夢はありませんか?
アフィリエイトで十分な資金と自由な時間を手に入れて、私のように夢を叶える一歩を踏み出しませんか?

詳しいプロフィールはこちら

ブログランキング参加中です^ ^
あなたの1クリックが
私の心の支えになってます♪

かのんが自信を持ってオススメ!!

アンリミテッドアフィリエイトNEO


稼ぐために必要な
ノウハウと手法を基礎から学べる
初心者必携の「教科書」です。
キチンと理解し正しく実践すれば
必ず稼げるようになります。

【Twitter】気軽にフォローしてくださいね☆

お世話になっている素材屋さん

Re:vre さま
Re:vre

あんずいろapricot×color さま