WordPress

WordPress(ワードプレス)会話調にするプラグイン Speech Bubble

吹き出しの会話調のブログって
読みやすいな〜

と思ったのがきっかけで調べてみたらありました。

もともとブログテーマに備わったものかと
思っていたら、プラグインであるんですね。

なんでも拡張できるプラグイン!

作ってくれてる人がいるから
無料で使わせてもらっているんですよね。

感謝感謝です。

 

てなわけで、試しに使ってみるとこんな感じ。

[speech_bubble type=”drop” subtype=”L1″ icon=”ginjirou.jpg” name=”銀次郎”] 真剣にやってるのか? [/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”yoshihiko.jpg” name=”自分”] 釣りの時間はマジだけど![/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”ginjirou.jpg” name=”銀次郎”] いや、ブログの話なんだけど・・・ [/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”yoshihiko.jpg” name=”自分”] ん〜、それなりかな(笑)まだまだ勉強が足りないけど・・・[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”ginjirou.jpg” name=”銀次郎”] まぁそんなもんだろうな〜もう少し僕の登場回数あっても良いんでないの??? [/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”yoshihiko.jpg” name=”自分”] そんなに登場したかったんだ。ゴメンゴメン!いつも留守番してくれてるからね!たまには登場してもらおっか〜!![/speech_bubble]

 

こんな感じで使ってみたかったんです(笑)

サイトを盛り上げてくれそうなプラグインですが、
対話にするのって難しそうです。

スキルを上げなければ。。。

 

ってことで、導入と設定について簡単に触れていきたいと思います。

 

 

Speech Bubbleをインストール

まずはプラグインで検索します。

プラグイン → 新規追加をクリック

 

下の画面になるので、右上の部分に
「Speech Bubble」

と入力。

すると右下の赤枠のようなプラグインが出てきます。

写真ではすでに「有効」になっていますが、
「今すぐインストール」
をクリックしてください。

インストールが終了したら
「有効化」をクリックします。

写真と同じように「有効」なれば終了です。

 

[speech_bubble type=”吹き出しの形” subtype=”左右と引出し線の形” icon=”写真やアイコン” name=”名前] コメント [/speech_bubble]

 

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”自分”] はじめまして! [/speech_bubble]

上記のプログラムだと以下の表示になります!

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”自分”] はじめまして! [/speech_bubble]

 

 

 

以上がプログラムの部分になりますので、
それぞれの青色部分を編集していきます。

吹き出しの形を変える

まずは吹き出しの形ですが、
drop
std
fb
fb-flat
ln
ln-flat
pink
rtail
think
これだけの種類があります。
とりあえず順番にやってみますね。

drop
[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

std
[speech_bubble type=”std” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”std” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

fb
[speech_bubble type=”fb” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”fb” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

fb-flat
[speech_bubble type=”fb-flat” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

ln
[speech_bubble type=”ln” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”ln” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

ln-flat
[speech_bubble type=”ln-flat” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

pink
[speech_bubble type=”pink” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”pink” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

rtail
[speech_bubble type=”rtail” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”rtail” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

think
[speech_bubble type=”think” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]
[speech_bubble type=”think” subtype=”R1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

 

左右と引出し線の形

[speech_bubble type=”吹き出しの形” subtype=”左右と引出し線の形” icon=”写真やアイコン” name=”名前] コメント [/speech_bubble]

L1
L2
R1
R2
があって、Lは左側Rは右側になります。

引出し線の1と2の違いはこんな感じです。

L1

[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

R2

[speech_bubble type=”drop” subtype=”R2″ icon=”1.jpg” name=”名前”] コメント[/speech_bubble]

 

写真やアイコン

[speech_bubble type=”吹き出しの形” subtype=”左右と引出し線の形” icon=”写真やアイコン” name=”名前] コメント [/speech_bubble]

最初からインストールされているアイコンは
1.jpg
2.jpg

になります。

でも、これじゃちょっと・・・

 

って思いますよね。

僕はとりあえず、自分のヒットシーンの左向きの顔
銀次郎の右向きの顔で向かい合うようにしてみました。

画像のアップロードを解説しますね。

僕はロリポップのサーバーを使っているので
ログイン後
「サーバーの管理・設定」「ロリポップFTP!」

へと進みます。

自分のURL内にある
「wp-content」→ 「plugins」→「speech-bubble」→「img」

の順番でフォルダををクリックしていきます。

行き着くと下記のようなページになるので、
左上にある「アップロード」をクリックします。

 

「ファイルを選択する」
アップロードしたい画像やアイコンを選択します。

 

 

選択後はMacの場合は右下の「開く」をクリックすると
以下のような画面に戻るので、あとは「アップロードする」ボタンを押して完了です。


こんな感じでフォルダに入ります。

名前とコメント

[speech_bubble type=”吹き出しの形” subtype=”左右と引出し線の形” icon=”写真やアイコン” name=”名前] コメント [/speech_bubble]

ここについては、自分で名前を付けたり
好きなコメントのやりとりを編集するだけです。

最後に

編集は「テキスト」画面でやりましょう。

 
[speech_bubble type=”drop” subtype=”L1″ icon=”ginjirou.jpg” name=”銀次郎”] 今日も1日お疲れ様でした! [/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”yoshihiko.jpg” name=”自分”] おつかれさま〜[/speech_bubble]

仮想通貨の授業に泉忠司さんがゲスト出演 in 釧路前のページ

本業と副業の区別が無くなる未来!「個」の時代の到来か。次のページ

関連記事

  1. WordPress

    ワードプレスの表示速度を上げたくて試行錯誤!明日はサクラマスを・・・

    僕のブログを楽しみにしてますよ〜って、ここ数年に何度か言われる…

  2. WordPress

    ワードプレスで試行錯誤 CSS編集は難しいけど学びは多い!

    新しいブログを立ち上げようと思って、最近ハマってる?というか試行錯誤し…

  3. WordPress

    DNSサーバー??まだまだ知らないことばかり!

    ブログの仕様変更をしよと思って、Googleさんのアナリティクスやサー…

  4. WordPress

    サーバー管理会社からの返答は・・・

    「写真データはサーバー内に残っていなかったので再度アップロードしてくだ…

  5. WordPress

    サイトの表示速度を上げようと四苦八苦・・・エックスサーバーに変えよう!

    記事数がそれなりに多くなってきたし、容量の大きい写真を使うこともあるの…

  6. WordPress

    ロリポップからセキュリティの連絡が来ました!

    先日サーバー内のプログラムが書き換えられたことで、自分のブログが違うサ…

アーカイブ

PAGE TOP