【Simplicity】スマホサイトで引用符が表示されない？その原因と表示方法を紹介

記事中でで引用を表すマーク。正確には「引用符」と呼ばれてます。

WordPressは編集画面よりボタン1つで引用部分を表すことが出来ますが、Simplicityの場合スマホサイトで引用符が表示されない仕様になってますね。

そんなわけで今回は、スマホサイトでもしっかり引用符が表示されるようにカスタマイズする方法を紹介します。

ついでに引用部分のデザインも分かりやすいように少しアレンジしておきました。

スマホサイトに引用のマークがない理由

PCサイトではしっかり引用符がついているのに、スマホサイトになると表示されない。

原因は簡単で、スマホサイトの場合「displayプロパティ」で引用符を非表示にしているからです。Simplicityはデフォルトでこの仕様となっています。

まあHTML構造的には、ちゃんと引用を表す「blockquoteタグ」が使われているので問題はないんですけどね…。

しかし見た目の問題として、背景色が薄いグレーというだけではとても見ずらいです。

このままでは、ユーザーも分かりずらくて仕方ない。

とまあそんなわけで、表示させるCSSを上書きするだけですぐに解決することが出来るんです。

Simplicityのスマホサイトに引用符を付ける方法

それでは実際に上書きするCSSコードを見てみましょうか。

イメージはこんな感じ

※下記はスマホサイト用のCSSコード。PCサイトのデザインも変える場合は、数値の調整が必要です。

/*引用マーク
===================================*/
blockquote::before {
    display: block;
    top: 0;
    font-size: 300%;
    color:#499eda;
}
blockquote:after { 
    display: block;
    bottom: 0;
    font-size: 300%;
    color:#499eda;
}
blockquote{
    border: solid 1px #ddd;
}

分からない人はコピペでもOKですが、一応コードの紹介も。

まずセレクタは、「blockquote::before」が最初の引用符、「blockquote:after」が最後の引用符を表しています。

それぞれ「display:block;」で引用符を表示させた後、「top:0;」「bottom:0;」で配置を上下に指定。

さらに「font-size」と「color」で引用符のサイズと色を指定しています。ここは自由に数値を変更してみてください。

最後におまけで、全体にうっすらと枠を付け引用部分を見やすくしてあります。スマホサイトの場合、これがあるだけでかなり印象が変わりますよ。

最後に

Simplicityスマホサイトの引用部分ってほんと見ずらいんですよね。

引用符は絶対にあった方が良いと思います。スマホサイズに合わせて、サイズは小さ目にしておいたので使ってみてください。