Speech Bubble~吹き出し~使い方・CSSアレンジ

2018年9月22日

ちゃいてぃ
この「吹き出し」よく見るよね!可愛い!
ぱちょたつ
記事がマジメになりすぎず、読みやすくなるね!

Speech Bubble 使用方法

Speech Bubble

人が会話してるしてるように吹き出し+イラストをつけることができるプラグインです。

プラグイン⇒新規追加⇒【Speech Bubble】検索

今すぐインストール⇒有効化へ

吹き出しの種類

「Speech Bubble」には吹き出しの種類が9種類用意されています。
変更にはショートコードの【type=”●●●”】の●●●部分を変更すれば変更できます。

≪基本コード≫

//基本のコード
”④お名前”
ここに会話がはいるよ

①吹き出しのタイプを入れる。
drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think

②吹き出し+画像を右に入れるか、左にいれるか。
R1 か L1

③画像やイラストをいれる
プラグインに元々入っているのが2種類
1.jpg 2.jpg

ちゃいてぃ
好きなイラストを入れたほうがGOOD!

※画像やイラストを入れるファイル

FTPを開き下記のフォルダに画像データを保存する。

wp-content⇒plugin⇒speech-bubble⇒img

 

④人物の名前を入れる。

ぱちょたつ
例を見てみよお!
Aさん
こんにちは! 良い天気ですね!
Bさん
こんにちは! そうですね
Aさん
こんにちは!
良い天気ですね!
Bさん
こんにちは! そうですね

1.jpgは青のグラデーションで、2.jpgはオレンジのグラデーションの画像です。

ぱちょたつ
上記のコードをコピペして、各自タイプと画像を編集してメモ帳などにいれておくと、ブログ書くときにコピペするだけだから使うときは楽だよ!

 

ちゃいてぃ
それでは9つのタイプを説明していくよ!

①drop

ちゃいてぃ
drop!
ぱちょたつ
しずくのような・・・可愛い!

 

②std

ちゃいてぃ
std!
ぱちょたつ
シンプル!

③fb

ちゃいてぃ
fb!
ぱちょたつ
立体感がある!

④fb-flat

ちゃいてぃ
fb-flat!
ぱちょたつ
右か左で色が違うんだぁ!

⑤ln

ちゃいてぃ
ln!
ぱちょたつ
fbよりも影が濃くて立体感があるね!

⑥pink

ちゃいてぃ
pink!
ぱちょたつ
いつもちゃいてぃが使ってるやつ!

⑦think

ちゃいてぃ
think!
ぱちょたつ
これは考えてる風じゃ!

⑧ln-flat

ちゃいてぃ
ln-flat!
ぱちょたつ
みどり意外にいいかも…

⑨rtail

ちゃいてぃ
rtail!
ぱちょたつ
ぱちょたつはいつもこの色じゃ!初期の色から変更してるよ。
次にやり方を紹介するよ!

rtailの初期の色はこちらになります。

Speech Bubble 吹き出しの色をCSSで変更する方法

色の変更

こちらはCSSの知識がない方でもわかるかと思います。

FTPよりテキストエディターで開く。
※Syberduckを使用しています。

wp-content⇒pluginを開きます。

plugin⇒Speech bubble⇒css へ行き
編集したいタイプを選びます。
(drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think)

編集したいファイルを左クリックし、エディタで編集を選び
エディターを開きましょう。

※ここではBrakets(※ここからダウンロード可能)を使用しています。

ちゃいてぃ
Braketsは無料のエディターです。
色を一括で置き換えたいので使用しています。

検索⇒置換

FTP内で編集しているので、保存後はすぐに反映されます。

ぱちょたつ
キャッシュクリアして画面で確認しましょう!

 

※現在使用されている色の見方

PC上で【検証】をしましょう。
ウィンドウズの場合は【F12キー】がショートカットキーとなります。

下記の番号順に画面をクリック

イラレやフォトショを持っていなくても
③の色の部分をクリックするとカラーパレットがでてくるので、ここで変えたい色を探すことができます。

 

Speech Bubble 画像サイズの変更

やり方その①

プラグイン⇒プラグイン編集

 

対象のコードを変更する。

ちゃいてぃ
一つのデザインしか使用しない場合はこのやり方で大丈夫だけど、いろんなデザインを使用するなら一つ一つcssを開くのって手間じゃない?

やり方その②

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;
    }
ぱちょたつ
FTPでやる場合は、いきなり本番で変更されてしまうので
アクセス数の低い時間にやるほうが無難じゃ!

 

検索

◆プロフィール◆

ちゃいてぃ

チャイラテが好きな広島県在住の30代主婦。
将来在宅ワーカーを目指し中。
20代の頃の婚活経験をエッセイにしたものや、結婚生活、WEB制作の備忘録、在宅ワーカーになるために日々奮闘している様を綴ったブログです。

ぱちょたつ

ちゃいてぃが犬が欲しすぎて妄想上に生み出した犬の妖精。
ぷりてぃフェイスとは裏腹に毒舌とツッコミが得意。

Twitterはこちら
twitter-bana