吹き出しの会話調のブログって
読みやすいな〜
と思ったのがきっかけで調べてみたらありました。
もともとブログテーマに備わったものかと
思っていたら、プラグインであるんですね。
なんでも拡張できるプラグイン！
作ってくれてる人がいるから
無料で使わせてもらっているんですよね。
感謝感謝です。
てなわけで、試しに使ってみるとこんな感じ。
[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]
