【SANGO】吹き出しの色をカスタマイズしておしゃれにする方法

どうもおはようポテト(@ohayoupoteto22)です。

という方に向けて「SANGOの吹き出しを可愛くカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

吹き出しの完成イメージ

オレンジver

カスタマイズ後の吹き出しのイメージは上の通り。ウチのデザインそのまんまです。

SANGOカラーver

SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。

簡単にカスタマイズの内容を説明すると…

こんな感じです。

吹き出しのカスタマイズ手順

方法はいたってシンプルかつ簡単です。

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

【WordPress】CSSをカスタマイズする際のバックアップの取り方

SANGOの吹き出しのカスタマイズ方法

CSSコードをコピペする

以上のどれかの方法でカスタマイズコードをコピペします。

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSを編集する3つの方法

オレンジver

.sc{
  background: #fffbf5!important;/*背景色*/
  border: solid 2px #f8c678!important;/*枠の色*/
  color: #404040!important;/*文字色*/
  font-size: .9em;
  padding:10px;
}
.say:not(.right) .sc:after{
  border-right:12px solid #fffbf5;/*背景色*/
}
.say:not(.right) .sc:before{
  border-right:12px solid #f8c678;/*枠の色*/
}
.right .sc:after{
  border-left:12px solid #fffbf5;/*背景色*/
}
.right .sc:before{
  border-left:12px solid #f8c678;/*枠の色*/
}
.faceicon img {
  width:82%;/*要調整*/
  border:initial;
  box-shadow: 0 0 7px #f8c678;/*アイコンの枠の色*/
}

.sc{
  background: #fffbf5!important;
  border: solid 2px #f8c678!important;
  color: #404040!important;
  font-size: .9em;
  padding:10px;
}
.say:not(.right) .sc:after{
  border-right:12px solid #fffbf5;
}
.say:not(.right) .sc:before{
  border-right:12px solid #f8c678;
}
.right .sc:after{
  border-left:12px solid #fffbf5;
}
.right .sc:before{
  border-left:12px solid #f8c678;
}
.faceicon img {
  width:82%;
  border:initial;
  box-shadow: 0 0 7px #f8c678;
}

SANGOカラーver

.sc{
  background: #f3fafe!important;/*背景色*/
  border: solid 2px #91cefa!important;/*枠の色*/
  color: #404040!important;/*文字色*/
  font-size: .9em;
  padding:10px;
}
.say:not(.right) .sc:after{
  border-right:12px solid #f3fafe;/*背景色*/
}
.say:not(.right) .sc:before{
  border-right:12px solid #91cefa;/*枠の色*/
}
.right .sc:after{
  border-left:12px solid #f3fafe;/*背景色*/
}
.right .sc:before{
  border-left:12px solid #91cefa;/*枠の色*/
}
.faceicon img {
  width:82%;/*要調整*/
  border:initial;
  box-shadow: 0 0 7px #91cefa;/*アイコンの枠の色*/
}

.sc{
  background: #f3fafe!important;
  border: solid 2px #91cefa!important;
  color: #404040!important;
  font-size: .9em;
  padding:10px;
}
.say:not(.right) .sc:after{
  border-right:12px solid #f3fafe;
}
.say:not(.right) .sc:before{
  border-right:12px solid #91cefa;
}
.right .sc:after{
  border-left:12px solid #f3fafe;
}
.right .sc:before{
  border-left:12px solid #91cefa;
}
.faceicon img {
  width:82%;
  border:initial;
  box-shadow: 0 0 7px #91cefa;
}

お好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。

画像のサイズをいじる

.faceicon img {
  width:82%;/*要調整*/
  (省略)

画像のサイズを変更したい場合は上の箇所の数値をいじってあげてください。

上のコードではウチで使っているイラストの関係上82%にしていますが、気持ちもう少し大きめにしてあげていいかもしれません。

ここまで終わればカスタマイズは終了。お疲れ様です！

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は

上のショートカットキーで削除できます。

まとめ

以上、SANGOの吹き出しのカスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。

【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に!

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝