【SANGO】引用の囲みをおしゃれにカスタマイズする方法

SANGOの引用のカスタマイズ方法

SHARE

くるみ

引用ボックスのデザインさ、なんかこうもっといい感じにならない？
ということで今回は

  • SANGOの引用のデザインを可愛くしたい
  • 引用ボックスが地味に見えるからいい感じにしたい

という方に向けて「SANGOの引用ボックスを可愛くカスタマイズする方法」をまとめました。

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

引用ボックスの完成イメージ

オレンジver

SANGOの引用ボックスのカスタマイズ

カスタマイズ後の引用ボックスのイメージは上の通り。ウチのデザインそのまんまです。

SANGOカラーver

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

好きな方を選んでね！

くるみ

カスタマイズの内容は以下の通り。

  • カギ括弧で挟んでるように
  • 色を薄めにしてあえて目立ちすぎないように

あくまで引用なので記事の中でも存在感を出さないようなデザインにしました。

次はそのカスタマイズ手順を見ていきましょう。

引用ボックスのカスタマイズ手順

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

手順
step1
CSSコードをコピペする
step2
お好みの色にカスタマイズする
step3
引用ボックスを中央に配置する
(※任意)

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

すぐ終わりそうだね！

くるみ

バックアップを忘れずに

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

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

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

SANGOの引用デザインのカスタマイズ方法

CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

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

「追加CSS」が最もお手軽にできるよ

くるみ

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

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

オレンジ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の引用ボックスのカスタマイズ方法でした。

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

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

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

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

新卒1年目のひよっこWEBエンジニア。業務ではPHPを触り、プライベートではNext.jsで宅配冷凍弁当の比較サイトとWeb制作に役立つツールの開発・運営をしています。お問い合わせはこちらよりどうぞ。

前の記事

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

次の記事

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