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

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

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さん
こんにちは! そうですね

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

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です