吹きだしで会話風に掲載できるプラグイン【Speech Bubble】が素敵♪
ラインみたいに吹き出しを使って会話風のコンテンツができる【Speech Bubble】。
使ってあるブログとか見るととってもわかり易いページになっているので、早速導入しようと思いました。
目次
Speech Bubbleとは？
Q＆A形式の表記って ラインみたいに吹き出しをつけて会話風に表示するととってもわかりやすくなりますよね。
この【Speech Bubble】はそんな会話風な表記を実現してくれる嬉しいWordPressプラグインです。
Speech Bubbleのインストール
1.WordPressの管理画面で「プラグイン」→「新規追加」を選択します。
2.次に、画面右上の検索フォームから 「Speech Bubble」 で検索。
3.インストールを実施
4.有効化します。
Speech Bubbleの使い方
Speech bubbleはショートコードを使って投稿や固定ページに吹き出し付きの会話を表示することができます。
ショートコードは
| [speech_bubble type="吹き出しの種類" subtype="吹き出しの向き" icon="アイコンの画像" name="アイコンの名前"] 吹き出しのセリフ [/speech_bubble] |
こんな風に表記します。
ぴーありがとうぷぅどういたしまして
吹き出しの種類 【type】
“drop" 標準
ぴーデフォルトがこんな感じ
“std" シンプルなセリフ風
ぴーセリフの枠がシンプルになった
“fb" フェイスブック風
ぴー丸い枠で囲まれた・・・
“fb-flat" フェイスブック風なんだけどね
ぴーフラットってたいら？？いやべたぬりな感じ
“ln" 丸い枠で囲まれて立体感あり
ぴー丸い枠で囲まれて立体感がでた
type="ln-flat" 丸い枠で囲まれたべた塗
ぴー丸い枠で囲まれたべた塗
type="think" 心の中で思ってる風
ぴー心の中で思ってる風
type="rtail" 四角いべた塗
ぴー四角いべた塗
type="Pink" なんかピンク
ぴーピンク
吹き出しの向き
type="L1″ 左側でしゃべる
ぴーL1 左側でしゃべる
type="L1″ 左側で考える
ぴーL2 左側で考える
type="R1″ 右側でしゃべる
ぴーR1 右側でしゃべる
type="R2″ 右側で考える
ぴーR2 右側で考える
アイコンの画像
アイコンの画像を変える
あひーおっと
あひーやっべーー
ここでアイコンの画像を 1.jpg から a01_100.png に変更していますが ただプラグインをインストールするだけだと変更しても何も表示されません。
なので、画像を準備します。
アイコンの画像を準備しよう
アイコンの画像を準備します。
自分で書いた絵でも 写真でも 素材からダウンロードしてもいいと思いますが、素材の場合は著作権を確認して使用しましょう。
私の場合は、絵を子どもに書いてもらいました♪
あひーちゃんです。サイズ100pxで作ってサーバーにftpでアップしたのですが、Speech Bubbleでは若干小さい目に表示されるようです。
まあ その表示については、のちのち気に入るサイズに変更しようと思います。
また、画像を自分で書くのはちょっと・・というい方はお問い合わせからご連絡いただけるとキャラクターイラストの制作承ります。
では、どうやって画像の変更をするかの続き・・・
FTPツールを使って画像をアップする
画像をアップするには、FTPソフトを使ってアップロードします。
WordPressを使用しているのであれば、すでに使用してるFTPソフトから、指定のフォルダ「ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img」にドラッグ＆ドロップでファイルをアップロードします。
私は、Xserver
と契約をしていているのでFTPソフトを使ったアップロードがわかりやすいです。
もし、使い方やアップロードの仕方がわからない場合は、こちらの記事を参考にしてくださいね。