くるみ
- SANGOの吹き出しをお洒落にカスタマイズしたい
- 他サイトと差別化できる吹き出しのデザインにしたい
という方に向けて「SANGOの>吹き出しを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
吹き出しの完成イメージ
オレンジver
カスタマイズ後の吹き出しのイメージは上の通り。ウチのデザインそのまんまです。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
簡単にカスタマイズの内容を説明すると…
- 枠の色と背景色を分け、余白を調整しすっきりと
- 画像と小さく&枠線を影にしてオシャレに
こんな感じです。
カスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOの吹き出しのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSを編集する方法を徹底解説オレンジver
.sc{
background: #fffbf5!important;/*背景色*/
border: solid 2px #f8c678!important;/*枠の色*/
color: #404040!important;/*文字色*/
font-size: .9em;
padding:10px;
}
/*画像が左にある吹き出し*/
.say.left .sc:before{
border-right:12px solid #f8c678;/*枠の色*/
}
.say.left .sc:after{
border-right:12px solid #fffbf5;/*背景色*/
}
/*画像が右にある吹き出し*/
.say.right .sc:before{
border-left:12px solid #f8c678;/*枠の色*/
}
.say.right .sc:after{
border-left:12px solid #fffbf5;/*背景色*/
}
.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.left .sc:before{
border-right:12px solid #f8c678;/*枠の色*/
}
.say.left .sc:after{
border-right:12px solid #fffbf5;/*背景色*/
}
.say.right .sc:before{
border-left:12px solid #f8c678;/*枠の色*/
}
.say.right .sc:after{
border-left:12px solid #fffbf5;/*背景色*/
}
.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をお使いの場合は
| Windows | ［Shift］＋［Ctrl］＋［Delete］キー |
| Mac | ［shift］＋［command］＋［delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。
【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
