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

1. WordPress
2021/04/29

完成イメージ

Before

完成イメージ（Before）

After

完成イメージ（After）

ライトブルーとオレンジの2色をサンプルとして作りました。

カギ括弧で挟んでるように
あくまで引用なので、色を薄めにしてあえて目立ちすぎないように

カスタマイズ方法

0. バックアップを忘れずに

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

その方法について詳しくは下記記事にまとめているでぜひ参考にしてください。

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

1. CSSを追記

ライトブルー

.entry-content blockquote {
  display: inline-block;
  padding: 2em 2.7em 1em 3.5em;
  font-size: 0.95em;
  color: #555; /* 文字色 */
  border: initial !important;
}
@media only screen and (max-width: 480px) {
  .entry-content blockquote {
    padding: 1.7em 2em 0.7em 3.5em;
  }
}

.entry-content blockquote::before {
  top: 0;
  left: 0;
  width: 2.1em;
  height: 2.1em;
  padding-top: 0.5em;
  padding-left: 0.6em;
  color: rgb(107 182 255 / 50%); /* アイコンの色 */
  border-top: 3px solid rgb(107 182 255 / 25%); /* 囲みの色 */
  border-left: 3px solid rgb(107 182 255 / 25%); /* 囲みの色 */
}

.entry-content blockquote::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4em;
  height: 4em;
  content: "";
  border-right: 3px solid rgb(107 182 255 / 25%); /* 囲みの色 */
  border-bottom: 3px solid rgb(107 182 255 / 25%); /* 囲みの色 */
}

オレンジ

.entry-content blockquote {
  display: inline-block;
  padding: 2em 2.7em 1em 3.5em;
  font-size: 0.95em;
  color: #555; /* 文字色 */
  border: initial !important;
}
@media only screen and (max-width: 480px) {
  .entry-content blockquote {
    padding: 1.7em 2em 0.7em 3.5em;
  }
}

.entry-content blockquote::before {
  top: 0;
  left: 0;
  width: 2.1em;
  height: 2.1em;
  padding-top: 0.5em;
  padding-left: 0.6em;
  color: rgb(255 179 107 / 60%); /* アイコンの色 */
  border-top: 3px solid rgb(255 179 107 / 30%); /* 囲みの色 */
  border-left: 3px solid rgb(255 179 107 / 30%); /* 囲みの色 */
}

.entry-content blockquote::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4em;
  height: 4em;
  content: "";
  border-right: 3px solid rgb(255 179 107 / 30%); /* 囲みの色 */
  border-bottom: 3px solid rgb(255 179 107 / 30%); /* 囲みの色 */
}

上記コードを、テーマで読み込んでいるCSSファイルにコピペします。

CSSを編集する方法について、詳しくは下記記事にまとめているでぜひ参考にしてください。

【初心者向け】WordPressでCSSを編集・追加する方法2020/10/24 【WordPress】CSSの変更が反映されない場合の原因・対処法2022/05/13

もし任意の色を適用したい場合は、コピペしたCSSの/* 〇〇色 */とコメントしている箇所をお好みの色にしてください。

2. 中央配置にする（任意）

実は上のコードのままだと、PCにおいて引用ボックスが左揃えで配置されます。

<div style="text-align:center;">
  <blockquote>...</blockquote>
</div>

.entry-content blockquote {
  display: inline-block;
  padding: 2em 2.7em 1em 3.5em;
  font-size: 0.95em;
  color: #555; /* 文字色 */
  text-align: left;
  border: initial !important;
}

もし中央揃え配置したい場合は、引用タグをtext-align:centerを指定したdivタグなどで囲み、引用タグ自体にtext-align: leftを指定することで解決します。

以上でカスタマイズは完了です 🎉

他のSANGOカスタマイズも全て下記記事にまとめているので、ぜひ参考にしてください。【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！2020/11/02