ワードプレスで吹き出しを使う!Speech Bubbleの導入方法と使い方。2018年版

川井
今日はワードプレスでこんな風に吹き出しを使う方法を紹介しまっす。
T氏
「Speech bubble」を使えば簡単に左右で会話してる感じにもできるよ!
川井
じゃあできるだけ簡単に、サクっと導入から使い方を説明していきましょう!

 


まずは「Speech bubble」というプラグインをワードプレスにインストール!


「Speech bubble」をインストールするために、WordPress管理画面 → プラグイン → 新規追加と進みます。

 

Speech bubbleを検索してインストールボタンをクリック!

これでインストールは完了です!なんとも簡単。

 

さあ、次はインストールした「Speech Bubble」を有効化しましょう!

といっても「有効化」ボタンをクリックするだけ~


使いたいアイコン画像をアップロードしましょ!


デフォ1
さあ、ここまででひとまず「Speech Bubble」は使える状になりました。
デフォ2
「Speech bubble」しかーし!このままではアイコンはデフォルトで入っているこの2種類のみ!
川井
自分の好きなアイコンを使うために画像をアップロードしましょう!
T氏
「Speech bubble」アップロードとか難しそうだけど、おれ頑張る~

 

①アイコンに使う画像は正方形のデータを用意しましょう(ファイル名は半角英数字を使ってください)

長方形のデータは自動で正方形になってしまうので画像が歪んじゃいます(´༎ຶོρ༎ຶོ`)

 

②吹き出しに使うと自動で100×100pxにリサイズされるので小さくなった時にちゃんと見える画像データにしましょう

大きいサイズのデータでも自動でリサイズされるので画像サイズはあんまり気にしなくてもOKかも༼༶ྊ๏ི ༭ ๏ྃྊ༶༽ぐひぃ

 

③使用しているサーバーのWordPressフォルダの中から「speech-bubble」-「img」フォルダを探します。
例:ドメイン>public_html>wp-content>plugins>speech-bubble>img

このフォルダにアイコンとして使いたい画像をアップロードしてください^^ъ

 

川井
以上をふまえて画像をアップロードしましょう!
T氏
ど~やってもフォルダまでたどり着けないって人はお問合せから質問してみてね!

 


さっ!ここからが「Speech Bubble」の使い方!


まず基本的な使い方から。

固定ページor投稿ページの「新規追加」をして「ビジュアル」タブの方に以下のコードを入力してくださいね。

 

 

はい、まだこの状態ではアイコンも吹き出しも出ませんよ。

では次に貼り付けたコードをちょっといじってみましょう。

 

赤文字の通りにそのまんま変えてみてください。
成功すれば↓のように表示されるはずです。
わたし
こんにちは!
あなた
こんばんは!

ここまで来たらこっちもんです!

じゃあ↑のコードを分解して使い方を覚えちゃいましょう(๑˃̵ᴗ˂̵)و

コードを見ていきますと type=”std” と書かれた部分がありますね。
この ”std” の中の std という部分を変えることで様々な吹き出しを使えるんです♪

たとえば ”std” を ”drop” に変えれば

川井
“drop”だとこんな形の吹き出しに変わります!

他にも

川井
“fb”だとこんな形の吹き出しに変わります!
川井
“fb-flat”だとこんな形の吹き出しに変わります!
川井
“ln-flat”だとこんな形の吹き出しに変わります!
川井
“pink”だとこんな形の吹き出しに変わります!
川井
“rtail”だとこんな形の吹き出しに変わります!
川井
“think”だとこんな形の吹き出しに変わります!

吹き出しの形や名前の位置が変わりましたね!

たくさんあるので気に入ったのを使ってみてください^^ъ

さてお次は subtype=”L1″ subtype=”R1″ をみてみましょう。

これは単純でL1だとアイコンが左、R1だとアイコンが右に表示されます。

どんどん行きましょう!

icon=”画像名.jpg”  これは” ”の中をさきほどアップロードした画像名にするだけで任意のアイコンが使えるようになるわけです。

これもspeech-bubble>img内にアップロードしたファイルの名前を指定するだけなのでさほど難しくないと思います^^ъ

name=”表示させたい名前”はそのまんま表示させたい名前を入れればOKです!

さあ、いかがだったでしょうか?

いや~プラグインって便利ですよね~( ゚∀゚)アハハ

こんな風にアイコンと吹き出しを使えばブログライフがもっと楽しくなるんじゃないでしょうか༼༶ྊ๏ི ༭ ๏ྃྊ༶༽ぐひひ

川井
この記事がお役に立ちましたらぜひシェアボタンを!ツイッターインスタもやってますんで良かったらフォローおなしゃっす!

では(@^^)/