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

公開日: 更新日: Simplicity




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

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

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

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

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

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

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

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

引用(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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

通常だとこんな感じ(画像)
【Simplicity】引用(blockquote)タグのデザインをカスタマイズする方法

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

問題発生

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

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

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

のいずれかでやるというような情報がほとんどでした。仕方ないのでそれに従うか、でもそうすると別にボタンを設定するか、親テーマを編集することになる=テーマのアップデートなどで水の泡?、せっかくだから投稿編集画面にもともとある「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;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. 上のようなことがないのに更新できない
  6. 特に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。

コードを転載する場合には

ご自身のサイトで当ページのコードを転載される場合には必ず当ページへのリンクを入れていただきますようお願いいたします

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

引用文でーーーす

いい感じですね(自画自賛)!!

使ったのはCSSの「!important」

色などは自身のサイトに合わせればいいと思います。

大事なのは「!important」というのを各デザイン要素に追加することで「これを優先ね」という風にできるんですね(皆さんはご存じのことでしょう・・・)

プレビュー表示しながら、いろいろ調整して完成!!

今後もいろいろ使えそうです。

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】