WordPressテーマ「引用」タグのカスタマイズ方法

WordPressのテーマ（テンプレート）を使っている方の中には、既存のテーマ（デザイン）では物足りなさを感じてしまうこともあるはず。

今回はそんな方に向けて、引用タグのボックスの色などをカスタマイズする方法についてご紹介するよ。

引用タグってなんだっけ？

引用タグは、外部のサイトだったり別のところを参考にして持ってきた文章に対して、引用したよということをわかりやすくするためのタグの事です。使い方としては、WordPressのビジュアルエディタの赤く四角で囲われている部分をクリックすると出てきます。

↑

ちなみに「引用」タグを使うとこのようにブロックで囲われるような形の表示になります。

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

外観＞テーマ編集＞style.css

まず、お使いのWordPressにログインし、左サイドメニューから外観、テーマ編集とクリックします。そうしましたら、右メニューにあるstyle.cssをクリックしてひらきます。

｛WordPressのテーマ（テンプレートによってはstyl.cssにカスタマイズするコードが入っていない場合があります。その場合は、下記のコードをstyle.cssに貼り付けてもデザイン的には実現可能です。）｝

文字色変更の方法

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote引用タグ設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

ボーダーの色と太さの変更方法

赤文字部分：ボーダーの色
青文字部分：ボーダーの太さ

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote引用タグ設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

背景色の変更方法

以下の赤文字部分を変更します。

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* blockquote引用タグ設定 */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
blockquote {
background: #F7F7F7 url(img/blockquote.png) no-repeat 0 0;
padding: 15px;
border: 1px solid #CCCCCC;
color: #212121;
box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
clear: both;
}

いかがでしたか？少しでもお役に立てましたら、いいねやシェアなどしていただけたら嬉しいです。それではまたお会いしましょう。

]]>

いいね、シェア、フォロー歓迎！2020テーマは「自然から学び自然と共に生きる」

@evahks