MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【さとう 様】WordPressで引用符が表示されない

WordPressで引用符が表示されないというご相談を頂きました。引用符タグをつけた時に表示されるデザインはテーマのCSSに依存しています。

ワードプレス5.0のブログを使用しているのですが
引用のブロックを使用して入力しているのですが、プレビューで見ると引用符が付いていない引用文ではない普通の文章のように見えてしまいます。
引用のブロックを使っても、引用符は自分で意図的につけなければいけないのでしょうか?
また、色も引用部分に少し薄い色を背景につけたいのですがどうすればいいのでしょうか?


>さとうさま
ご相談ありがとうございます。

WordPressにある【b-quote】【引用】といったブロックは、HTMLタグのblockquateで囲まれます。

当サイトでは以下のような形になります。

blockquoteは引用を表すHTMLタグです

HTML上はこのようになっています

<blockquote>
  <p>
    blockquoteは引用を表すHTMLタグです
  </p>
</blockquote>

本来のblockquateタグは、CSSで装飾をしなければ文章がインデントされるだけのシンプルなものです。(CSSというのはHTML要素にデザインやレイアウトの指示を追加する言語と考えてください。)

CSSで装飾することによって引用符を加えたり、枠線で囲んだり、文字色を付けたり、背景色を付けたりという事が可能になります。

もちろん引用符は自分で付けることもできます。しかし、テーマを変更したりすると今度は自分で付けた引用符を消さなくてはいけなくなるかもしれませんね。

HTMLリファレンス blockquate
http://www.htmq.com/html/blockquote.shtml

CSSを追加する方法は様々ですが、
1.テーマ(子テーマ)のstyle.cssに追記を行う
2.CSS追加プラグインなどで追記を行う

といった方法があり、いずれにしてもご自身で追加することになるでしょう。

基本的には以下のような形になります。以下の場合は背景に薄い灰色を付けるものです。(※既存のCSS記述によっては、以下の方法で変えられないこともあります)

blockquote {
background-color:#eee;
}

background-color というのは背景の色を変更する命令文
#eee とは色を指定する値です。R赤 G緑 B青 の光の三原色を0~Fのコードの組み合わせで表現します。
#fff なら白
#000 なら黒
#f00 で赤
となります。
http://www.htmq.com/style/background-color.shtml

紹介しているサイトはHTMLやCSSのリファレンスサイトで、コード記述例もあるので勉強中によく利用させてもらいました。

CSSを勉強すると、WordPressの見た目の部分はかなり細かくカスタマイズできるようになります。(HTMLとセットで勉強するのがおすすめです)
参考にして頂ければ幸いです。

おすすめコンテンツ

“【さとう 様】WordPressで引用符が表示されない” への2件の返信

  1. ありがとうございます
    内部のプログラミングを変更しないといけないのですね
    初心者なのでそのような事も分かりませんでした。
    デザインの面を編集するにはHTMLをいじるのではなく、CSSをいじらないと実際のビジュアルには反映されない事が理解できました。
    ただ、ワードプレスのブログの引用部分のCSSをいじるのにどのように行けばいいのか分かりません
    宜しければご教授下さい。

    1. >さとうさま
      管理画面メニュー > 外観 > テーマ編集 とクリックしていくとそのテーマのstyle.css編集画面にはなります。
      CSSの編集だけではサイトに致命的なエラーが起こる事はありませんが、レイアウト崩れなどデザインの不具合が生じるおそれはあります。
      HTML、CSSの成り立ちを少し勉強してからの方が良いかもしれません。

      .phpファイル、特に functions.php の扱いには注意が必要です。(サイトにログインできなくなることも)
      テーマファイルは wp-content/themes/【テーマ名フォルダ】 の場所にあるのでこのフォルダをパソコン等にダウンロードし、バックアップを取っておくことをおすすめします。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA