Speech Bubble|アイコンサイズの変更や拡大方法とCSSの編集

投稿者: | 2018年10月23日

このページの構成

 

CSSが反映されないときはスーパーリロード

フィア
カレン~見てみて~「Speech Bubble」使ってみたよー
カレン
「Speech Bubble」?

あぁ、WordPressで会話風の記述ができるっていうプラグインね

フィア
うんっ! でもねー結構難しかったんだー…
カレン
そうなの? 似たような記事いっぱいあるみたいだけど…

参考にしても何とかならない?

カレン
例えば、導入だったら…このサイトとか、フィア好きじゃない?

 

流行りの「ブログで吹き出し」をやってみたい!これで解決WPプラグイン「Speech Bubble」

より良い時間をあなたのポケットに -Focus on Better –

フィア
あっ! ここ参考にしたよ! すごく可愛いサイトだよね!
フィア
でもね、このサイトの通りCSSを変更しても、

プレビューが変更されなかったんだよね

カレン
そういうことね…たぶんそれ

スーパーリロードすれば反映されると思うわよ

フィア
す、すーぱーりろーどっ!? なんかすごそうだねっ!
カレン
やり方は簡単よ、Shift + F5 を押すだけだから
カレン
これは、キャッシュの履歴を使わずに、

ちゃんと更新して表示したいときに使うの

フィア
あっ! 変わったよっ!  さすがカレンっ!
カレン
こ、これくらいどうってことないわ
カレン
もしスーパーリロードしても駄目だったら、

このページと同じ Type = “std” のCSSを下に貼り付けておいたから、

元のCSSを全て削除した後、全てコピペするといいわ。

フィア
スーパーリロードも忘れずにね!

 

スポンサーリンク

 

 

Speech BubbleのスタンダードCSSのテンプレート

  • 左右にキャラを登場させたい場合

このサイトのアイコン画像は100 × 100 px を使用。L1が左話者、R1が右話者です。

subtype=“L2″や”R2″の考えるタイプの吹き出しは編集していません。

 

 

 

  • 左側だけにキャラを登場させたい場合

このサイトのアイコン画像は100 × 100 px を使用。L1が左話者1、R1が左話者2です。

subtype=“L2″や”R2″の考えるタイプの吹き出しは編集していません。

 

スポンサーリンク

 

 

左右にキャラを登場させる場合のCSSの解説

※ 左右にキャラを登場させる場合のみ解説していきます。

 基本構成は同じですので、自由に応用させてくださいね!

フィア
う~ん…英語ばっかりで目が回る…
カレン
フィア、これは英語じゃないわよ
カレン
確かに初めはビックリするけど、

意外と簡単だから一緒に見ていきましょ

 

  • ボックス領域の編集

セリフ1つでCSSのボックスはこのような構成になっています。

これは基本ですので覚えておいてくださいね!

では、ひとつひとつ見ていきましょう!

Speech Bubble のCSSでは、

.sb-subtype-a と .sb-subtype-c が左側の話者、

.sb-subtype-b と .sb-subtype-d が右側の話者に対応しています。

(しかし、.sb-subtype-c と .sb-subtype-d は使ってないような気がします…

 

プログラミングは自分でいじってなんぼです!

多少いじったくらいでPCが壊れるなんてことはないので、

/*コメント*/を頼りに、どんどん、数字をいじってみてください!

 

  • 画像のサイズや位置の変更

ここではアイコン画像の枠の幅を設定しています。

ここを変更しないと、元画像の大きさを変更しても変わりません。

 

先ほど設定した枠内でのみ画像サイズを変更できます。

フィア
うーん…説明聞いてる分には…

分かったような…分からないような…

カレン
実際に数字をいじってみないと、なかなかわからないかもね
カレン
ちなみに、数字を変えるときは、0 px とか 1000 px とか、

極端なものにした方が、変化が分かりやすいわよ

フィア
な、なるほど…じゃあやってみるよ…!

えっと… height: 1000px; …

フィア
あ゛い゛だ゛だ゛だ゛だ゛だ゛!!
カレン
もう、何やってるよの
フィア
だってカレンが~
カレン
まぁ、こうやって色々試してみたら

案外分かるもんよ

カレン
よしよし…
フィア
ふにゃぁ…

 

 

  • アイコン名の編集

アイコン名は画像の大きさによってはアイコン名がずれるので、

今回は position: relative; で元の位置から、

top: 80 px; で上から80 px 下に移動した位置に移動させました。

こういったpositionのコードも調べればすぐに分かると思います。

 

 

  • 吹き出し部分の編集

ここで吹き出しを端からどの位置に表示させるかを変更できます。

また、吹き出しの矢印部分の色を変更できます。

 

  • 吹き出し内部の文字の編集

 

CSSの編集は以上になります。

いざというときのために、どこかにバックアップを取っておいて、

色々いじって見てください!

 

すくまりゲームズの人気記事

 

 

 

 

 

まとめ

  • Speech Bubble を編集するときは スーパーリロードを使うこと

  • CSSは見慣れればそんなに難しくない

 

カレン
どう、フィア? 後は一人で出来そう?
フィア
ふにゃぁ…もう食べられないよ…
カレン
寝てるし…もう、しょうがないなー

 

全く関連してない記事ですが、ラノベを釘宮理恵や福島潤さんが朗読してくれるサービス、amazon audibleの紹介です。暇なときにどうぞ。