WORDPRESSのふきだしプラグイン活用術【speech bubble】

目安時間:約 25分

あなたはブログアフィリエイトをどのような媒体で行っていますか?

無料ブログ?HTMLサイト?ワードプレス?

ぜひワードプレスを使っている人も使っていない人も参考にしてください。

ワードプレスはプラグインが大事

アフィ太郎くん
僕もWORDPRESSに変えたよ♪

アフィリ塩田
それはいいですね!きちんと使いこなせてますか?

アフィ太郎くん
もうバッチリだよ!無料ブログと変わらない使い方してるよ!

アフィリ塩田
ワードプレスにはもっといろんな機能がありますよ?

アフィ太郎くん
そうなんだ・・・。

 

ワードプレスのメリットは「プラグイン」

 

プラグインとは=ワードプレス内で使用できる機能拡張オプションの事。

 

ワードプレスには様々なプラグインがあります。

スパムコメントを制御したり、目次を作成したり、短縮ボタンを増やしたりと様々です。

 

 

このプラグインの多さがワードプレスの最大の魅力と言ってもいいでしょう。

 

 

ただ、あまり不要なプラグインを入れるとサイト自体が重くなったりセキュリティーが脆弱になったりするので要注意です。

今日はそのプラグインの中でアフィリ塩田が愛用しているプラグインをご紹介します。

 

アフィリ塩田愛用のスピーチバブル【speech bubble】

アフィリ塩田
とうとうこの日がきたか・・・。

アフィ太郎くん
僕たちの仕組みがばらされちゃうんだね!

アフィリ塩田
まぁ、調べればすぐわかるんですけどね。

アフィ太郎くん
そうだよね・・・。

 

アフィリ塩田とアフィ太郎くんの会話

 

上記の漫画風の会話はワードプレスの【speech bubble】というプラグインを使用しています。

 

ブログを作成するときに画像というのはすごく大切ですよね?

画像がない記事ってものすごく味気ないし読者も離れてしまいます。

 

でも毎回毎回写真を集めるのって結構大変だったりするんですよね。

おまけに著作権が絡んできたりとめんどくさいこともあります。

 

 

そこでおすすめなのが【speech bubble】

 

 

わざわざ写真を毎回貼り付けなくてもキャラクターを会話させるだけで見ごたえがでてきます。

アフィリ塩田はかなりこのプラグインに助けられています^^

 

 

【speech bubble】は最初の設定が必要

 

このプラグインは最初の設定が必要になってきます。

最初の設定のままではキャラクターがただの人型なんです。

 

 

 

 

 

 

 

このまま使いたいって人はこのまま使用すればいいと思います。

ただ自分の好みのキャラクターにしたいですよね?

 

アフィリ塩田
一度設定すればいいだけです。

アフィ太郎くん
設定は手順通りやれば簡単だよ♪

 

それでは設定方法を解説していきますね。

 

Speech Bubbleの設定方法

 

まずはプラグイン追加

これは説明不要だと思いますが念のために・・・。

【Speech Bubble】で検索すればすぐに出てきます。

「今すぐインストール」というボタンを押してインストールしてください。

 

 

 

プラグインの有効化

 

インストールしたらプラグインを有効化しなければ意味がありません。

 

インストール済みプラグイン一覧で確認します。

有効化と書いてあるところを押しましょう。

すでに有効化になっている場合は「停止」ボタンが出ています。

 

ここまではどんなプラグインでも操作方法は同じです。

 

 

 

 

試しにコードを入れてみる

 

[☆speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

[☆speech_bubble type="std" subtype="b" icon="2.jpg" name="B san" ]ここまでは順調ですね。[/speech_bubble]

[☆speech_bubble type="std" subtype="c" icon="1.jpg" name="A san" ]設定はあと少し!! [/speech_bubble]

[☆speech_bubble type="std" subtype="d" icon="2.jpg" name="A san" ]頑張ろう♪[/speech_bubble]

 

※コード内の☆を必ず削除して使用してください

 

 

上記のコードをコピーして記事作成してみてください。

これで表示できればひとまずOKです。

 

 

ちなみにプレビュー画面にしないと確認はできません。

 

 

 

 

 

 

キャラクター設定

 

自分の好みのキャラクターを表示できるように設定します。

ここから少しややこしく感じるかもしれませんが落ち着いてひとつずつ進めていきましょう。

 

まずはFTPソフトを開きWORDPRESSをインストールしたファイルを見つけます。

 

例えば当サイトならnetbussiness.infoのファイルになるわけですね。

 

 

 

 

 

そこから順に

 

「public_html」

 

↓↓↓↓↓↓↓↓↓↓↓↓

 

「wp-content」

 

↓↓↓↓↓↓↓↓↓↓↓↓

 

「plugins」

 

↓↓↓↓↓↓↓↓↓↓↓↓

 

「speech bubble」

 

↓↓↓↓↓↓↓↓↓↓↓↓

 

「img」

 

 

とファイルを開けていきましょう。

そこにあるファイルが先ほどの人型Aと人型Bの画像です。

 

 

 

あとはここに好きな画像をアップロードしていくだけですね。

例えばこのロボットをアイコンに使うとします。

 

 

この「robot1.png」ファイルを先ほどの「img」ファイルの中にアップロードします。

 

 

 

これで無事に画像はアップロードされました。

 

あとはコードを少し作り変える必要があります。

 

[speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

このコードを

 

[☆speech_bubble type="std" subtype="a" icon="robot1.png" name="A san" ]表示成功!![/speech_bubble]

 

に変えます。

 

この赤文字の部分が画像ファイルを指定するコードです。

なのであなたがアップロードしたファイル名をそのままいれてください。

 

そしてプレビューで確認すると・・・。

 

 

 

 

 

この方法であとは使いたいだけ画像を増やしていけば表示ができるようになります。

 

 

ふきだしパターンなどの設定

アフィリ塩田
あとはふきだしパターンや左右の設定などをするだけです。

アフィ太郎くん
僕らみたいに左右から会話する感じの設定のことだね!

ここまではキャラクター設定をするところまでを説明しました。

あとはふきだしのパターンなどの設定をすれば終了です。

 

 

 

ふきだしパターン「std」

 

アフィリ塩田
これが普通のふきだしですね

アフィ太郎くん
うんうん。僕らがいつも使ってるやつだね!

 

[speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「drop」

 

アフィリ塩田
いつもと違いますね。

アフィ太郎くん
印象が違うね♪

 

[speech_bubble type="drop" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「fb」

 

アフィリ塩田汗
どこかでみたような・・・。

アフィ太郎くん
フェイスブックだね!

 

[speech_bubble type="fb" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「fb-flat」

 

アフィリ塩田
これもフェイスブックですね!

アフィ太郎くん
スマホで見るよね♪

 

[speech_bubble type="fb-flat" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「ln」

 

アフィリ塩田
LINEですね。

アフィ太郎くん
親近感わくね!

 

[speech_bubble type="ln" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「ln-flat」

 

アフィリ塩田
種類が豊富すぎて迷いますね。

アフィ太郎くん
ほんとだね・・・。

 

[speech_bubble type="ln-flat" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

ふきだしパターン「pink」

 

アフィリ塩田
可愛いですね。

アフィ太郎くん
女の子にはおすすめだね♪

 

[speech_bubble type="pink" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「rtail」

 

アフィリ塩田
これはすっきりしていますね。

アフィ太郎くん
会話も目立つね!

 

[speech_bubble type="rtail" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

 

ふきだしパターン「think」

 

アフィリ塩田
全部は使い切れませんね・・・。

アフィ太郎くん
お腹すいたなぁ~。

 

[speech_bubble type="think" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

左右設定と名前の変更

アフィリ塩田
最後に左右の設定と名前の設定を説明します。

 

 

左に寄せる設定「a」

アフィリ塩田
左に集合してください。

アフィ太郎くん
は~い!

 

 

[speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

右に寄せる設定「b」

 

アフィリ塩田
右に集合してください。

アフィ太郎くん
いつもの僕の位置だね♪

 

 

[speech_bubble type="std" subtype="b" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

名前の変更

 

アフィリ塩田
今日からあなたはアフィ助くんです!!

アフィ助くん
アフィ助なんていやだ!!

 

 

[speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]表示成功!![/speech_bubble]

 

 

 

 

まとめ

アフィリ塩田
これで一通りの説明が終わりました。

アフィ太郎くん
あ~、アフィ助にされなくてよかった・・・。

 

これがspeech bubbleの一通りの使い方です。

使いこなせば記事中に写真などの画像を入れなくても見栄えがするブログが作れますのでおすすめです。

 

中には会話だけで展開していくブログを運営している人もいるほどです。

 

うまくspeech bubbleを使いこなしてブログ運営をしましょう♪

 

この記事に関連する記事一覧

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 
人気ブログランキング
管理人プロフィール
プロフィール画像

管理人:アフィリ塩田

知識無し・技術無し・お金無しの状態からインターネットビジネスに興味を持ち、あるひとつの教材に出会ったことで劇的に人生が変わる。

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

人気の投稿とページ
カテゴリー
メタ情報

ページの先頭へ