【WordPress】【Affinger6】引用ブロックのスタイルを変更する方法

WordPress

2022.08.062023.09.28

今回は、WordPressのテーマ「Affinger6」で引用ブロックのスタイルを変更する方法をご紹介します！

元は下記のようなスタイルとなっており、引用マークが非常に見えづらくなっていたので見やすいスタイルに変えていきます。

背景色だけ変えたい場合

背景色だけ変えたい場合は楽なのでまずはこちらの方法から紹介していきます。

まずはWordPressのメニューから

外観 -> カスタマイズ

をクリックします。

左側にカスタマイズメニューが出るのでその中の「見出しタグ（hx）/テキスト」をクリックします

その後表示されたメニューから「引用部分の背景色」をクリック

すると下記のような表示になるので「色を選択」部分をクリックします

するとカラーパレットが出るので、
好きな色コードを入れたり、クリック操作で色を調整します。

色合いが良ければ「公開」をクリックしてサイトに反映させましょう

引用ブロックの背景色が変わりましたね

背景色以外も変えたい場合

背景色以外もカスタマイズしたい場合、CSSをいじる必要があります。

まずは先ほどと同様WordPressのメニューから外観のカスタマイズをクリック

左側にカスタマイズメニューが出るのでその中の「追加 CSS」をクリックします

CSSを追加できるフォームが現れます。ここにCSSを書いていきます。

今回は事前に用意しておいた下記CSSを記載します。

.post blockquote{
  position:relative;
  border:1px solid #a3c7db;
  background:#FFFFFF;
  padding:30px;
}
.post blockquote:before{
  position:absolute;
  left:45%;
  top:-24px;
  background-color:#a3c7db;
  color:#FFFFFF;
  border:2px solid #a3c7db; 
  box-sizing:border-box;
  content:'\f10d';
  line-height:1;
  padding-top:12px;
  text-align:center;
  width:48px;
  height:48px;
  font-size:20px;
  border-radius:24px;
  opacity: 1
}
.post blockquote p {
  color:#808080
}
.post blockquote cite {
  display: block;
  padding-top:10px;
  font-size: 0.8rem;
  text-align: right;
  color: #808080;
}

ちなみにCSSは下記サイトの「四角い枠と丸い引用符」のスタイルをお借りしました。感謝です。

【CSSコピペOK】おしゃれな引用blockquoteデザイン10選 | ゼロの森

こちらのサイトからCSSをお借りしても、そのまま「追加CSS」に記載するだけでは動作しません。
各セレクタの先頭に.postを追加すると適用されるようになります。

早速CSSを反映させると…