WordPress(ワードプレス)プラグイン「Speech bubble」で漫画のような吹き出し設定手順

スポンサーリンク

町中華に行くと瓶ビールの在庫がなくなるまで飲んでしまう

お酒には飲まれる派

Qoo(@SurvivorCherry)です。

です。

現テーマ「cocoon」には常備されている為、使わなくなりましたが
どんなテーマにも対応する吹き出しプラグイン「Speech bubble」には
大変お世話になりましたのでリライト後もこの記事では当時の吹き出しをそのまま使用しています。

現在ではこうなっています↓。

キングクー
キングクー

呼んだかい⁇

それでは「Speech bubble」のご紹介です。

クー
吹き出しが簡単に作れるSpeech bubble

ブログをスタートして2週間ほど経ちました。
勉強することが沢山あり
出来なかった事が出来るようになってくるとブログ運営も楽しくなってきます。
やればやるほど
「他の人がやってるあの作りはどうやるんだ??」
なんて疑問が沢山湧いてくるんです。

その中でも僕が一番実装したかった機能。

クー
これです

今日初めて実装できたので
嬉しくて二日酔いも吹っ飛びました。

やれば出来る。

せっかくなので僕が用いたやり方をどうぞ!

Speech bubble 導入

まずはプラグインである
Speech bubbleをインストールするために

WordPress管理画面>プラグイン>新規追加

と進んでください。

検索窓で「Speech bubble」と入力して、検索すると出てきます。

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これでSpeech bubbleは有効化され、下準備が整いました。
ここからが本番。
キャラクター設定などはここからやっていきますよ!

吹き出しプラグインSpeech Bubbleを使って投稿をする方法

いつも通りブログを書く手順で「投稿」⇒「新規投稿」を選びます。

この新規投稿画面に以下のコードを
1文づつコピペしてみてください。

 

 

 そうすると以下のように表示されるかと思います。
クー
調子どうだーい!

キーコ
うぇーい!

クーのセリフは上記コードの
]調子どうだーい![

の部分を変えればOK。
同じくキーコのセリフは

うぇーい![
の部分を変えればOK。

 

キャラの名前も「クー」「キーコ」になってるけど、これも↑のコードの【name=”クー”】のところ、「クー」「キーコ」を変更すれば自由に設定できますよ。

吹き出しの種類

吹き出し用の9種類のコードがあります。

drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think

これのどれかを選び変えていきます。

クー
僕はdrop
キーコ
アタイはstd!

 

このように中の文字を変えるだけで変化します。

人物の向きと、吹き出しのしっぽの種類の変更方法

キャラを左に置くか、右に置くかは【subtype=” ”】の部分で変更します。

また、吹き出しのしっぽも同じく【subtype=” ”】の部分で変更します。
L1⇒人物が左側に配置、吹き出しのしっぽは「話す」感じになる

クー
最近L1にしたんだー

キーコ
店長とてもお似合いですよ!

L2⇒人物が左側に配置、吹き出しのしっぽは「考える」感じになる
クー
L2にしたの気付いてくれたかな

キーコ
察しろオーラ半端ねーな

R1⇒人物が右側に配置、吹き出しのしっぽは「話す」感じになる

クー
R1って乳酸菌みたいだよね〜

キーコ
なんだか健康に良さそうですね〜

R2⇒人物が右側に配置、吹き出しのしっぽは「考える」感じになる
クー
早く家帰ってゼルダやりたいな〜

キーコ
彼氏と待ち合わせなのに今日も残業かよ

アイコン画像の変更方法

最後に画像を変更していきます。

まずは使用しているサーバーのWordPressのフォルダの中の「speech-bubble」の中の「img」フォルダを探します。

ドメイン>public_html>wp-content>plugins>speech-bubble>img

使用したいアイコン画像(jpg, png, gif, svg, tif)を、そのimgフォルダ内にアップロードします。

(ファイル名は半角英数字を使ってください)

このSpeech Bubbleの【icon=” ○○.jpg“】の部分で、先ほどアップロードしたファイル名を指定してあげればOKです。

 

これで全て完了です!

最初はチンプンカンプンでしたが慣れれば簡単ですよ!

僕も今書きながらなれました!

ちなみに僕が使用しているサーバーはエックスサーバー!!

本日も最後まで読んでくださり、ありがとうございました。

コメント

  1. おおお!吹き出しのブログ!!
    私もやってみたかったんですよねー!
    丁寧に解説していただきありがとうございました!

    • アバター クー より:

      くじらっきーさん
      プラグインって便利だな〜と実感しました。w
      僕もお役に立てて嬉しいです!

  2. アバター 花火師 より:

    凄いですね!そんな簡単にできるものだったんですね!

    • アバター クー より:

      花火師さん
      そうなんですよ!以外に簡単でした。
      でも機能名が分からなくて吹き出しというワードに行き着くのに苦労しました!

  3. アバター ぜんぜん より:

    僕も吹き出しやってみたかったんだ!参考にします!

  4. アバター タクコロ より:

    吹き出しいいすね!
    今度使おう!(^人^)情報ありがとうございます

  5. アバター Rei より:

    私もやってみたかったので、近々挑戦してみます!^^ ありがとうございます!

    • アバター クー より:

      Reiさん
      初コメありがとうございます♪
      是非やってみてください。キャラ作るの面白いですよ〜

  6. アバター 台湾人夫 より:

    なるほど!!
    今度も使ってみたいです。

  7. 吹き出しの 乳酸菌のクダりで 吹いた!

    憧れの吹き出し❤️

    順次チャレジしていきます

    ありがとうございます

    • アバター クー より:

      初コメあざーす!
      画像作るのも楽しいですよ〜♪
      使うとちょっとワクワクします♪

トップへ戻る