ちょいきに!

脱出ゲーム攻略・ネタばれ・考察、たまに生活ネタやノウハウ系記事も

覚書き

吹き出しプラグイン「speech_bubble」の色を変えたい!!

投稿日:2018年1月9日 更新日:

吹き出しプラグインを導入してから、しばらく経ちました。
導入当初はこのデフォルト色でも満足していたのですが…

ちょっと色を変えたい欲がむくむくと。

調べてみたらプラグインを編集することで色の変更が出来るみたいだったので、やってみました!

ちなみに出来上がりは、こうなりました。

べた塗りだけど、サブタイプfb-flatとは違って微妙に影付きの吹き出しになりました。

それでは早速、編集の仕方を振り返っていきます!



プラグインの編集画面を開く

「ダッシュボード」→「プラグイン」→「プラグイン編集」と移動。

 

右側にある「編集するプラグインを選択」から「Speech bubble」を選んで「選択」ボタンを押す。

 

speech-bubble.phpの一覧から「css▶」をクリックすると、タイプ別のcssファイル一覧が表示されます。

このブログでは、サブタイプ「fb」を使用しているので、編集ファイルは「sb-type-fb.css」を選択。

サブタイプについては、過去の記事【吹き出しプラグイン!タグの中身を変えて表示をカスタマイズするよ!】をご参照ください。「R・L」や「1・2」の区別を覚えておくことで、以降の説明が理解しやすくなりますよ。

これで左側の枠に、選択したcssファイルが表示されます。

 

どこを変更するのか、サラッと学習!

アライグマくん
先生!cssなんて分かりません!(涙)
ひよこ先生
うーん。先に進む前に少し学習しとくか

アライグマくん
お願いします…

ひよこ先生
ここを理解しておけば、今回説明するサブタイプ以外の変更でも直感的に直せるようになってくると思うぞ。

御託はいいからはよ。という方はジャンプ!

サブタイプ末尾のアルファベット

まず注目すべきは、「.sb-subtype-d」という表記。この末尾のアルファベットによって、吹き出しの形や向きが区別されています。

具体的には、以下の通りです。

■.sb-subtype-a :吹き出し型の左向き(L1)

アライグマくん
~♪

 

■.sb-subtype-b :吹き出し型の右向き(R1)

ひよこ先生
……

 

■.sb-subtype-c :思考型の左向き(L2)

アライグマくん
~♪

 

■.sb-subtype-d :思考型の右向き(R2)

ひよこ先生
……

 

色変更時の基本タグ

色を変えるときは以下の文字列を見つけて変更していくことになります。

■「background」、「background-color」
背景色。吹き出し全体の色を変えます。

 

■「background: linear-gradient」
こちらも背景色。ここを指定すると背景色がグラデーションになる。
※サブタイプによっては、このタグ自体がないかも。

 

■「border-color」、「border」
吹き出しの枠線の色。

 

■「color」
吹き出し内の文字色。
ここは記事作成時にも直接変更できますが、一括でお好きな色に変えたい場合はここのタグをいじることになります。

アライグマくん
直接色が変えられるし、太字にも大文字にもできるよー

 

色の指定

「#〇〇〇〇〇〇」と6桁で表示(HEX)するか、RGBで赤・緑・青それぞれの要素を指定します。

アライグマくん
具体例をお願いします!
ひよこ先生
例えば、文字色を黄色で指定するなら…
【HEXの場合】color: #ffff00
【RGBの場合】color: rgb(255,255,0)
こんな感じになるぞ。

 

RGBは、rgb(〇,〇,〇)と3つ指定、もしくはrgba(〇,〇,〇,〇)と4つ指定もできます。
最後のaは透明度で、0(完全透明)~1(不透明)の間で指定します。0.3などの小数点で指定もできます。

自分の指定したい色のHEXやRGBを知りたいときは、カラーピッカー(外部サイト)をご使用ください。

 

【カラーピッカーの使い方】
①お好きな色を下のカラフルな正方形からクリックで指定
②上部のHEXやRGBに指定した色の数字が表示される

 

 

それでは実際にファイルに手を加えていきましょう

既に記事内に導入中の場合における編集は推奨されておりません。私は気にせず編集しましたし、特に問題は起きませんでしたが、自己責任でいじるようにしてくださいね。

 

例として、サブタイプ「b(R1)」の変更方法をご紹介します。

 

該当箇所を探す①

ファイル上に検索バーを表示させるため、ファイルの上でクリックをしてカーソルが点滅しているのを確認。

カーソル点滅状態で、「Ctrl + F」を押すとファイル上部に検索バーが表示されます。
カーソルがファイル上に乗っていないと、ブラウザの検索バーが表示されてしまいます。

.sb-subtype-b > .sb-content > .sb-speech-bubble】をコピーして、検索バーに貼り付けた後にEnterキーを押します。

 

.sb-type-fb > .sb-subtype-a > .sb-content > .sb-speech-bubble,
.sb-type-fb > .sb-subtype-b > .sb-content > .sb-speech-bubble {
吹き出しの中身、枠線の色や、文字の色などの設定
}

という部分が見つかりましたか?
ここは、サブタイプ「a」と「b」の吹き出し本体部分の色などを設定しています。

更に、下に続く

 .sb-type-fb > .sb-subtype-b > .sb-content > .sb-speech-bubble {
ほにゃほにゃ
}

は、サブタイプ「b」において、最初の設定を上書きしたいところが記述されています。

ひよこ先生
共通の設定はまとめて指定しておいて、差分部分だけ上書きすることで、吹き出し一つずつに細かい設定をする手間が省けるんだ
アライグマくん
ほへぇ…
ひよこ先生
とりあえず、上書き部分を見つけることだけ考えよう

 

実際に検索してみると、2か所該当箇所が見つかりました。
上の固まりが大元の設定、下の固まりがサブタイプ「b」における上書き設定でしたね。

ということで、下の固まりに注目していきましょう。
文字色は上の固まりで指定するようになっていましたが今回は触りません。

 

設定の中身は上から
・吹き出し本体の色
・グラデーション設定
・吹き出し枠線の色
となっています。

これら全ての色指定(#〇〇〇〇〇〇という部分)を、お好みの色に変更します。

変更後はこのようになりました。

全部「#C8FFF8」で揃えました。
また、私はあえて元の設定を残しています。

アライグマくん
元に戻したくなったときのためですね!
ひよこ先生
「/*」と「*/」で囲めばタグとして認識されなくなるんだ。
覚えておくと便利だぞ。

 

該当箇所を探す②

上では吹き出し本体の色を設定しましたが、次は吹き出しから飛び出ている、この三角部分の色設定です。

 

検索バーに【.sb-subtype-b > .sb-content:before】を入れてEnterを押しましょう。

色指定の部分を変更します。
変更後はこちら▼

 

該当箇所を探す③

これも三角の部分の設定になります。

検索バーを使うまでもなく、②の箇所の下にあるのですが見つからなければ【.sb-subtype-b > .sb-content:after】で検索してみてください。

同様に、色指定を変更します。
変更後はこちら▼

以上でサブタイプ「b」の変更が全て終了しました。

「ファイルを更新」をクリックして、記事中に使用している場合は表示色が変わったか確認してみてください。

未使用の場合は、新しい記事に吹き出し用のタグ(R1)を入れてプレビューで確認です。

キャッシュが残っていると、表示が変わらないことがあります。
変更内容が反映されない場合は、ブラウザやスマホのキャッシュを消して確認してみてください。

 

他の変更箇所は?

基本の流れは一緒です。

①末尾のアルファベット部分を「a」~「d」に変更して検索
★部分を適宜アルファベットに入れ替えてください。

【.sb-subtype- > .sb-content > .sb-speech-bubble】
【.sb-subtype- > .sb-content:before】
【.sb-subtype- > .sb-content:after】

②該当箇所の色指定部分を変更

③保存して確認

ひよこ先生
ここの色は変えても良いのかな?と思ったら、元の設定はコメントアウト(/* */で囲む)しておいて、とりあえず試しに色を変えてみるのも一つの手だぞ。
アライグマくん
そんな適当なことしていいんですか!?
ひよこ先生
吹き出しの形はいじると表示崩れの原因になる可能性があるが、色をちょっと変えてみるだけなら大丈夫だ。
アライグマくん
それを聞いて安心しました!
ひよこ先生
自分で色々いじっているうちに学べることも沢山あるしな。

 

ということで、同様手順でRLの吹き出し型・思考型、全ての色を変更しました。
ちなみに思考型はこんな感じになりました。

アライグマくん
……
ひよこ先生
……

 

まとめ!

該当箇所を検索、色指定部分を変更の流れで吹き出しの色を変えることはできる!

よく分からなければ、元の設定を「/*」と「*/」で囲んで残しておいてから、色設定に関してのみ少しお試ししてみてもOK。
paddingとかwidthとか吹き出しの形に関する場所は触らない方が無難です。

それでは、ご自分のサイトのカラーに合わせて、素敵な吹き出しにアレンジしちゃってくださいね。

 

-覚書き
-, ,

Copyright© ちょいきに! , 2019 All Rights Reserved Powered by STINGER.