「引用符の❝がつかずに立て線がでてきて肝心の引用符がでないのはどうしてですか？」というご相談を頂きました。
＞あわわ様
ご相談ありがとうございます。
引用符、blockquoteタグのデザインはテーマ側に依存するところが大きいです。
こちらはなんのCSSも効いていない素の引用タグです。
デフォルトのblockquoteタグ サンプル
ご覧の通り、素の状態ではインデントされているだけで枠線や縦線、背景色のデザインなどもありません。
このblockquoteタグにCSSで色々な装飾を施したものがそれぞれのテーマの引用ブロックとなります。
当サイトのテーマでは以下のようなCSSとなっています。
引用文
あわわさんが同じようにしようと思ったら、
1.既存のCSS（縦線）の削除または上書き
2.引用符付きのCSSを追加する
という流れになるでしょう。
以下がよく引用符に添付されるCSSです。
/* 枠線や背景の装飾 */
blockquote {
font-size: 文字サイズ;
color: 文字色;
background: 背景色;
margin: ボックス外の余白;
padding: ボックス内の余白;
border-radius: ボックス角丸;
}
そして、before やafterというのは”疑似要素”と呼ばれ指定したタグの内側前後に任意の文字列を表示させる指定です。これを利用して引用符が出力されているということですね。アイコンフォントを利用するのが難しければ全角”などでまずは試してみましょう。
/* 疑似要素 */
blockquote:before {
content: '文字コードや文字列。1と打てば引用譜内に1と表示される';
font-family: アイコンフォントなどを指定;
color: 色;
font-size: 文字サイズ;
position: 引用符の位置基準;
left: 引用符の位置調整;
top: 引用符の位置調整;
}
CSSの追加方法については以下の記事をご覧ください。
【momo様】WordPressにHTMLやCSSのコードを追加する方法