【Simplicity2】引用(blockquote)タグのデザインをカスタマイズする方法

公開日：2016(平成28)年12月23日／最終更新日： 2017(平成29)年10月29日

WordPressの無料テーマ「Simplicity2」のカスタマイズを始めて数日経ちました。仕方ないことですが、よく使われるCSSについてはパッと見えるので「ここを変更しないと・・・」となるのですが、ときどきしか使わない表現になるとどうしても発生ごとの対応になりますね。

特に過去の記事１つ１つを見直すわけにもいかないので、たまたま見て「ここも変だ！」というのをコツコツ特定して修正するしかないんですね。実にCSSって細かい。

でもやり方が分かってくるとだんだん対応も速くなり、それと同時に私もマーベラス？になれるわけですから何事も勉強ですね。

今回登場したのは「引用(blockquote)タグ」。その名の通り他のサイトに書かれているものを使用する際に使用するタグで、

訪問した人に通常の文章とは違う表現をすることで引用だと分かるようにする
引用タグで囲むことで検索エンジンクローラーに引用文である（自身の書いた文章ではない）ことを知らせ、文章から除外してもらうことでコピーコンテンツとみなされないようにする

という２つの意味合いがあります。

今回新しく書いた記事でたまたま引用を使う機会があり、プレビューしたら「あれ？？？」という感じの表示になったことで全体のデザインと違うことが発覚しました。

知識不足でちょっとカスタマイズに苦労したので備忘録として書いておきます。ちなみにどんなテーマでも大抵同じですからSimplicity2を使っていない場合でも適用できると思います。

引用(blockquote)タグのカスタマイズのいきさつ

元のCSS(親テーマ内)

/************************************
** 引用（blockquote）
************************************/
blockquote {
background: none repeat scroll 0 0 rgba(245, 245, 245, 0.8);
border: 1px solid #FFFFFF;
margin: 1em 0;
padding: 20px 55px;
position: relative;
}

blockquote:before {
color: #C8C8C8;
content: "“";
font-family: serif;
font-size: 600%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}

blockquote:after {
color: #C8C8C8;
content: "”";
font-family: serif;
font-size: 600%;
line-height: 0;
position: absolute;
right: 0;
bottom: -16px;
}

通常だとこんな感じ（画像）

何となく通常の背景色などとは合わない感じですし、画像では縮小されていますが幅いっぱいに表示されてしまうので引用の箇所だけがバーンと横に広がったようになってしまいました。これを早速カスタマイズ！！しかし・・・

問題発生

普通通りCSSをコピーして子テーマに貼りつけて編集すれば！！と安易に構えていましたが、ン？普通のセレクタと違うような・・・そうです「.」もなければ「#」もありません。

そのまま編集してみたら案の定適用されませんでした。いろいろ調べても

親テーマを編集する
クラスを付けてCSSを書く
タグの中にスタイルを書く

のいずれかでやるというような情報がほとんどでした。仕方ないのでそれに従うか、でもそうすると別にボタンを設定するか、親テーマを編集することになる＝テーマのアップデートなどで水の泡？、せっかくだから投稿編集画面にもともとある「b-quote」ボタンだけでどの引用も同じにしたい！！

でたどり着いたのが以下の方法です。まずはカスタマイズ後のCSS、もちろん子テーマに書いてます

カスタマイズしたCSS(子テーマ内)

/***************** 引用（blockquote）*******************/
blockquote {
background: none repeat scroll 0 0 rgba(245, 245, 245, 0.4);
border: 3px solid #695d28 !important;
border-radius: 8px;
margin: 0 !important;
padding: 20px 55px;
position: relative;
}

blockquote:before {
color: #695d28 !important;
content: "“";
font-family: serif;
font-size: 400%;
left: 0;
line-height: 1em;
position: absolute;
top: 0;
}

blockquote:after {
color: #695d28 !important;
content: "”";
font-family: serif;
font-size: 400%;
line-height: 0;
position: absolute;
right: 0;
bottom: 0;
}

このCSSで表示するとこんな感じになりました