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

WordPress

はじめに

この記事ではWordPressのプラグインである「Speech Bubble」のCSS編集方法を紹介します。

 

Speech Bubbleの導入

Speech Bubbleの導入は以下のサイトが分かりやすいと思います。

流行りの「ブログで吹き出し」をやってみたい!これで解決WPプラグイン「Speech Bubble」 - FoB log
簡単に会話形式の記事がかけるSpeech Bubble。その使用方法とカスタマイズ方法を紹介。さらには画像サイズの変更や吹き出し色の変更方法まで紹介。これでオリジナリティ溢れるあなた好みの吹き出しが出せちゃいますね。

 

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

この記事にたどり着いたということは、CSS関係で困っていることと思います。

まず、変更したCSSが反映されない場合はスーパーリロードを試してみてください。

スーパーリロードのやり方は、
Windows「Shift + F5」
Mac「Cmd + Shift + R」
です。

Speech Bubbleのスタンダード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が壊れるなんてことはないので、

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

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

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

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

 

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

アイコン名の編集

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

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

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

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

吹き出し部分の編集

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

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

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

 

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

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

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

まとめ

Speech Bubble を編集するときは スーパーリロードを使うこと
CSSは見慣れればそんなに難しくない

 

トップへ戻る

 

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

 

 

 

 

タイトルとURLをコピーしました