WordPress

WordPressプラグイン「Speech Bubble」が便利すぎてたまらない!

Speech Bubble

    ブロガーB君
    サニーさん、ふと思ったんですけど、僕たちがこうやって吹き出しを使って会話してるのってどうやっているんですか?
    デザイナーサニー
    お!珍しくいい質問をしたねB君!じゃあ、今回はこの吹き出しのやり方について説明していくね!
    ブロガーB君
    わーい!やったー!早く教えれー!

    WordPressユーザー必見!「吹き出しプラグイン」

    WordPressには便利なプラグインがたくさんありますが、今回は会話をしているように記事が書けるプラグインの「Speech Bubble」のご紹介と設置方法を解説します。

    このプラグインを使えば、まるでLINEやフェイスブックのメッセージみたいにブログを装飾することができます。

    デザイナーサニー
    このプラグインを使えばこんな吹き出しを簡単につけることができるんだ!吹き出しも種類もいくつかあるから、その時の気分で使い分けてみるといいよ!
    ブロガーB君
    なるほどなるほど!じゃあ、まずはプラグインのインストール方法を教えてくれや!
    デザイナーサニー
    君はいつも言葉の最後に棘があるね。そうゆうキャラでいきたいのが見え見えだよ。まあ、いいけど。

    「Speech Bubble」のインストール方法

    WordPressユーザーならプラグインのインストール方法は知っていると思いますが、一応解説していきます。知らない方はここで覚えてしまいましょう。

    基本的にプラグインのインストール方法は毎回同じです。

    まず、WordPressの管理画面を開きます。

    dash

    左サイドバーの「プラグイン」の「新規追加」を選択します。

    tuika

    新規追加を開くとプラグインの検索窓が現れますので、そこに「Speech Bubble」と入力します。

    kensaku

    プラグインを検索すると「Speech Bubble」が見つかりますので「今すぐインストール」をクリックします。

    insto

    確認のダイアログが開きますので「OK」をクリックします。

    kakunin

    インストールを開始します。
    インストールが完了したら「プラグインを有効化」をクリックします。

    kanryou

    これで「Speech Bubble」がWordPressに追加されました。

    Speech Bubbleを使用して記事を投稿するやり方

    このプラグインをインストールするとショートコードが使えるようになります。

    これを貼り付けるとこんな感じに表示されます。

    A さん
    あたしだよ
    B さん
    知らねーよ
     

    表示名とセリフの変更方法

    デフォルトではキャラの名前が「Aさん」「Bさん」となっていますが、コード内の「name」の部分を変更すればキャラの名前の変更が可能です。同様にその後のセリフの部分も変更することで吹き出しの中のセリフを変えることができます。

    うざこ
    あたいだって!
    切れ男
    うぜーようるせーよ!?

    キャラクターの配置の変え方

    キャラクターは左右で会話調になっているものですが、配置を変えることもできます。

    右側にキャラクターを置きたい変える場合は、「subtype=”L1″」の部分を「R1」に変更します。

    うざこ
    そっち行ってもいい?
    切れ男
    近くにくんじゃねーよ!

    うざこ
    きちゃった
    切れ男
    きちゃったよ!

    逆に左に配置したい場合は「R1」を「L1」で揃えると左側にキャラクターが配置されます。

    うざこ
    逃げられないわよ
    切れ男
    コエーヨ!

    キャラクターの画像の変更方法

    デフォルトでは、シルエット画像になっていますが、この画像は変更することが可能です。

    デザイナーサニー
    だーれだ?
    ブロガーB君
    わかんねーよ!

    では、デザイナーサニーとブロガーB君のアバターに変更してみたいと思います。

    キャラクター画像の変更手順

    まず、使用しているサーバーのWordPressフォルダの中にある「speech-bubble」に入っている「img」フォルダを開きます。

    「ドメイン」→「public_html」→「wp-content」→「plugins」→「speech-bubble」→「img」こんな感じだと思います。

    次に、使いたい画像をそのフォルダにアップします。この時、ファイル名は半角英数字で使えるのはjpg,png,gif,svg,tifです。

    画像のアップロードができたら、コード内の「icon=”1.jpg”」のファイル名を変更します。

    デザイナーサニー
    僕でしたー
    ブロガーB君
    わお!サニーさん!

    吹き出しのパターンの変更方法

    このプラグインには吹き出しのパターンが全部で9種類あります。ブログのカラーに合わせて使えるので非常に便利です。

    変更する部分は「type=”drop”」の部分です。
    コードは、「drop」「std」「fb」「fb-flat」「ln」「ln-flat」「pink」「think」の9種です。

    dropの場合

    デザイナーサニー
    影ついてる感じだね
    ブロガーB君
    普通のやつですね。

    stdの場合

    デザイナーサニー
    かなりシンプルな吹き出しだね!
    ブロガーB君
    僕の昔のアバターみたいですね。

    fbの場合

    デザイナーサニー
    フェイスブックのメッセージみたいなやつだね!
    ブロガーB君
    FBですからね!

    fb-flatの場合

    デザイナーサニー
    交互に色が違って読みやすいかもね
    ブロガーB君
    確かに確かに!

    lnの場合

    デザイナーサニー
    LINEみたいなやーつだね!
    ブロガーB君
    LINEの友達少ないですけどね!

    ln-flatの場合

    デザイナーサニー
    これ結構好きな感じだなー
    ブロガーB君
    いい感じですね!

    pinkの場合

    デザイナーサニー
    女子が好きそうな感じだね!
    ブロガーB君
    そうですね!

    rtailの場合

    デザイナーサニー
    これも使い勝手が良さそうだね!
    ブロガーB君
    色も綺麗ですね!

    thimkの場合

    デザイナーサニー
    妄想する時のやつだね!
    ブロガーB君
    サニーさん変態ですもんね。

    まとめ

    デザイナーサニー
    どうだったかい?わかりやすく説明したつもりだったけど理解できたかい?
    ブロガーB君
    はい!よくわかりました!このプラグインを使えばブログ運営も楽しくなりそうですね!

    デザイナーサニー
    そうだね!会話のキャッチボールを表現できるから読者も読みやすいかもしれないね!便利なプラグインだよね!
    ブロガーB君
    ほんとですね!サニーさんすげーや!

    デザイナーサニー
    じゃあ、今回はここまでだよ!また次回お会いしましょう!
    ブロガーB君
    バイバイキーン!

      ブログを差別化するアバターサービス

      avaimage

      あなたは自分のブログのアバターに不満はありませんか?Avamoveでは、あなたのブログを差別化する為のアバター作成を請け負います。顔出しできないけどブランディングアップしたい場合はアバターを作り、キャラクターを立てることが大切です。


      世界に一つだけのあなただけのキャラクターを作成して他のブロガーとの差別化にご利用ください^^


      Avamoveはあなたのアフィリエイト活動を応援しています!


      アバター制作の詳細はこちら

      コメント

      1. 五平太 より:

        サニーさん

        こんばんは。
        五平太ともうします。

        すっごく素敵なプラグインのご紹介
        ありがとうございます^^

        この、プラグイン
        記事の差別化に使えますよね。

        さっそく、学んで使いたいです。

        ワクワクしてきました。
        応援完了です^^

      2. Avamove より:

        五平太さん
        コメントありがとうございます^^
        このプラグインはインパクトありますよね!
        活用して差別化しちゃってください^^
        ありがとうございます!

      3. ぶっしー より:

        サニーさん

        こんばんわ、ぶっしーです。

        サニーさんのサイトの吹き出しのようなもの、
        気になっていました。

        人気記事からこの記事を発見して、
        「これか~」って声が出ちゃいましたよ(笑)

        “Speech Bubble”

        ワードプレスのサイトの方で
        使ってみようと思います。

        良い情報ありがとうございます^^

        1. Avamove より:

          ぶっしーさん。コメントありがとうございます。このプラグインは読者を惹きつける要素になるのでおすすめです。WordPressのプラグインは本当に便利なものが多いです^^

      コメントを残す

      *