どうもおはようポテト(@ohayoupoteto22)です。
引用のデザインを可愛くしたいんだぞ
ということで今回は
「SANGOの引用のデザインを可愛くしたい」
「引用ボックスが地味に見える」
という方に向けて「SANGOの引用ボックスを可愛くカスタマイズする方法」をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
引用ボックスの完成イメージ
オレンジver
カスタマイズ後の引用ボックスのイメージは上の通り。ウチのデザインそのまんまです。
SANGOカラーver
SANGOユーザーのサイトのテーマカラーに使われがちな水色。その色合いverのものも作ってみました。
ソロモン
簡単にカスタマイズの内容を説明すると…
カギ括弧で挟んでるように
色を薄めにしてあえて目立ちすぎないように
こんな感じです。
バックアップを忘れずに
早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。
「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。
【WordPress】CSSをカスタマイズする際のバックアップの取り方
ブログ主
カスタマイズ手順
方法はいたってシンプルかつ簡単です。
「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更してみてください。
ソロモン
SANGOの引用デザインのカスタマイズ方法
CSSコードをコピペする
「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加
以上のどれかの方法でカスタマイズコードをコピペします。
ブログ主
「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。
【初心者向け】WordPressでCSSコードを追加する3つの方法オレンジ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>このように中央揃えを指定した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の引用ボックスのカスタマイズ方法でした。
「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのSANGOカスタマイズをまとめているので参考にしてみてください。
【他と差をつける】SANGOの魅力的なカスタマイズまとめ参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
