くるみ
- SANGOの引用のデザインを可愛くしたい
- 引用ボックスが地味に見えるからいい感じにしたい
という方に向けて「SANGOの引用ボックスを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
引用ボックスの完成イメージ
オレンジver
カスタマイズ後の引用ボックスのイメージは上の通り。ウチのデザインそのまんまです。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
くるみ
カスタマイズの内容は以下の通り。
- カギ括弧で挟んでるように
- 色を薄めにしてあえて目立ちすぎないように
あくまで引用なので記事の中でも存在感を出さないようなデザインにしました。
次はそのカスタマイズ手順を見ていきましょう。
引用ボックスのカスタマイズ手順
方法はいたってシンプルかつ簡単です。「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
くるみ
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。
SANGOの引用デザインのカスタマイズ方法
CSSコードをコピペする
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
くるみ
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

オレンジver
.entry-content blockquote{
display: inline-block;
border:initial!important;
font-size: .95em;
padding: 2em 2.7em 1em 3.5em;
color:#555; /*文字色*/
}
@media only screen and (max-width: 480px){
.entry-content blockquote{
padding: 1.7em 2em .7em 3.5em;
}
}
.entry-content blockquote::before {
border-left: 3px solid rgba(255,179,107,.3); /*囲みの色*/
border-top: 3px solid rgba(255,179,107,.3); /*囲みの色*/
width:2.1em;
height:2.1em;
top:0;
left:0;
padding-left: .6em;
padding-top: .5em;
color:rgba(255,179,107,.6); /*アイコンの色*/
}
.entry-content blockquote::after{
content:"";
position:absolute;
border-right: 3px solid rgba(255,179,107,.3); /*囲みの色*/
border-bottom: 3px solid rgba(255,179,107,.3); /*囲みの色*/
width:4em;
height:4em;
bottom:0;
right:0;
}
.entry-content blockquote{
display: inline-block;
border:initial!important;
font-size: .95em;
padding: 2em 2.7em 1em 3.5em;
color:#555;
}
@media only screen and (max-width: 480px){
.entry-content blockquote{
padding: 1.7em 2em .7em 3.5em;
}
}
.entry-content blockquote::before {
border-left: 3px solid rgba(255,179,107,.3);
border-top: 3px solid rgba(255,179,107,.3);
width:2.1em;
height:2.1em;
top:0;
left:0;
padding-left: .6em;
padding-top: .5em;
color:rgba(255,179,107,.6);
}
.entry-content blockquote::after{
content:"";
position:absolute;
border-right: 3px solid rgba(255,179,107,.3);
border-bottom: 3px solid rgba(255,179,107,.3);
width:4em;
height:4em;
bottom:0;
right:0;
}
SANGOカラーver
.entry-content blockquote{
display: inline-block;
border:initial!important;
font-size: .95em;
padding: 2em 2.7em 1em 3.5em;
color:#555; /*文字色*/
}
@media only screen and (max-width: 480px){
.entry-content blockquote{
padding: 1.7em 2em .7em 3.5em;
}
}
.entry-content blockquote::before {
border-left: 3px solid rgba(107,182,255,.25); /*囲みの色*/
border-top: 3px solid rgba(107,182,255,.25); /*囲みの色*/
width:2.1em;
height:2.1em;
top:0;
left:0;
padding-left: .6em;
padding-top: .5em;
color:rgba(107,182,255,.5); /*アイコンの色*/
}
.entry-content blockquote::after{
content:"";
position:absolute;
border-right: 3px solid rgba(107,182,255,.25); /*囲みの色*/
border-bottom: 3px solid rgba(107,182,255,.25); /*囲みの色*/
width:4em;
height:4em;
bottom:0;
right:0;
}
.entry-content blockquote{
display: inline-block;
border:initial!important;
font-size: .95em;
padding: 2em 2.7em 1em 3.5em;
color:#555;
}
@media only screen and (max-width: 480px){
.entry-content blockquote{
padding: 1.7em 2em .7em 3.5em;
}
}
.entry-content blockquote::before {
border-left: 3px solid rgba(107,182,255,.25);
border-top: 3px solid rgba(107,182,255,.25);
width:2.1em;
height:2.1em;
top:0;
left:0;
padding-left: .6em;
padding-top: .5em;
color:rgba(107,182,255,.5);
}
.entry-content blockquote::after{
content:"";
position:absolute;
border-right: 3px solid rgba(107,182,255,.25);
border-bottom: 3px solid rgba(107,182,255,.25);
width:4em;
height:4em;
bottom:0;
right:0;
}
お好みの色にカスタマイズする
ここは「上の完成イメージとは違う色合いにしたい」という方向け。
コピペしたCSSの「/*〇〇色*/」とあるところのカラーコードを、それぞれお好みの色にしてください。
引用ボックスを中央に配置する
実は上のコードだけだと引用ボックスはPCから見ると左揃えで配置されます。
もし中央揃え配置したい場合は
<div style="text-align:center;">
...
</div>
このようにtext-alignを指定したdivタグで囲んであげ、
.entry-content blockquote{
text-align: left;
}
引用文を左揃えにしてあげればOK。
ここまでくればカスタマイズは終了です。
くるみ
CSSの変更が反映されない場合
「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。キャッシュ系プラグイン
「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。
プラウザのキャッシュを削除
Chromeをお使いの場合は
Windows | [Shift]+[Ctrl]+[Delete]キー |
Mac | [shift]+[command]+[delete」キー |
上のショートカットキーで削除できます。
まとめ
「もっとド派手にカスタマイズしたい」という方は、今までのSANGOカスタマイズをまとめているので参考にしてみてください。

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