Speech Bubble 使用方法
Speech Bubble
人が会話してるしてるように吹き出し+イラストをつけることができるプラグインです。
プラグイン⇒新規追加⇒【Speech Bubble】検索
今すぐインストール⇒有効化へ
吹き出しの種類
「Speech Bubble」には吹き出しの種類が9種類用意されています。
変更にはショートコードの【type=”●●●”】の●●●部分を変更すれば変更できます。
≪基本コード≫
//基本のコード
”④お名前”ここに会話がはいるよ
①吹き出しのタイプを入れる。
drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think
②吹き出し+画像を右に入れるか、左にいれるか。
R1 か L1
③画像やイラストをいれる。
プラグインに元々入っているのが2種類
１.jpg 2.jpg
※画像やイラストを入れるファイル
ＦＴＰを開き下記のフォルダに画像データを保存する。
wp-content⇒plugin⇒speech-bubble⇒img
④人物の名前を入れる。
Ａさんこんにちは！ 良い天気ですね！
Ｂさんこんにちは！ そうですね
良い天気ですね！
1.jpgは青のグラデーションで、2.jpgはオレンジのグラデーションの画像です。
①drop
②std
③fb
④fb-flat
⑤ln
⑥pink
⑦think
⑧ln-flat
⑨rtail
次にやり方を紹介するよ！
rtailの初期の色はこちらになります。
Speech Bubble 吹き出しの色をCSSで変更する方法
色の変更
こちらはＣＳＳの知識がない方でもわかるかと思います。
FTPよりテキストエディターで開く。
※Syberduckを使用しています。
wp-content⇒pluginを開きます。
plugin⇒Speech bubble⇒css へ行き
編集したいタイプを選びます。
（drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think）
編集したいファイルを左クリックし、エディタで編集を選び
エディターを開きましょう。
※ここではBrakets（※ここからダウンロード可能）を使用しています。
色を一括で置き換えたいので使用しています。
検索⇒置換
FTP内で編集しているので、保存後はすぐに反映されます。
※現在使用されている色の見方
ＰＣ上で【検証】をしましょう。
ウィンドウズの場合は【Ｆ12キー】がショートカットキーとなります。
下記の番号順に画面をクリック
イラレやフォトショを持っていなくても
③の色の部分をクリックするとカラーパレットがでてくるので、ここで変えたい色を探すことができます。
Speech Bubble 画像サイズの変更
やり方その①
プラグイン⇒プラグイン編集
対象のコードを変更する。
やり方その②
FTPを開く
※ローカル上の作業をしてあとでFTPにアップロードしても大丈夫です。
テーマ内のcssに以下のコードをコピペする！
ここでは幅90px、縦98pxにしているが、ここは自由に変えてよし。
wp-content⇒themes⇒style.css
/* アイコンの入れ物 */
.sb-icon {
width: 90px!important;
height: 98px!important;
}
/* アイコン */
.sb-icon img {
width: 90px !important;
height: 98px !important;
border: none !important;
border-radius: 0px !important;
}
アクセス数の低い時間にやるほうが無難じゃ！
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/177dc8d1.db6181c6.177dc8d2.48ef31f0/?me_id=1199881&item_id=10002396&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_gold%2Fafc%2Fimages%2Fproduct%2Fyousan%2F06651x01_r.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_gold%2Fafc%2Fimages%2Fproduct%2Fyousan%2F06651x01_r.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1753587c.b462aac0.1753587d.baf9ad1e/?me_id=1300523&item_id=10000303&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fmatsubayashoten%2Fcabinet%2F03595128%2Fimgrc0117150166.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fmatsubayashoten%2Fcabinet%2F03595128%2Fimgrc0117150166.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
