Simplicity2、スマホで引用符が表示されない原因とカスタマイズ方法


このブログサイトはSimplicity2で作っていますが、スマホで見ると引用符が表示されていませんでした。引用部分がグレーになっているだけなので、この点について調べてみました。

PCでは表示されています。)

 どうも原因は

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

 とのことなので、もともとの仕様なのですね。

 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;

}

以上のコードを、外観→CSS編集→追加してみました。

スマホで確認しましたが、反映されません。

この

外観→CSS編集

外観→テーマの編集の違いが良くわかっていなかったようです。


今でも完全に理解できていませんが、
もしかして、これかな?と思い、

再び、

外観→テーマの編集→Simplicity2 childの:style.css に、

コピペで付け加えたら、

うまく表示されました。


この後、Simplicity2 childの:style.css の上部に、

ご存知ですか ?

ここで CSS を変更する必要はありません — 付随の CSS エディター で、編集とライブプレビューを行うことができます。

と書かれているではありませんか。

そこで、外観→CSS編集に戻ってコードを入れてみると、(左側の入力欄)

(右側は、スマホサイズ表示)

ライブプレビューで修正できることがわかりました。

しかし、公開ボタンを押して戻ると、やはり保存されておらず、表示は元のまま。

理由がわからないので、再度、Simplicity2 childの:style.cssにコードを追加し、

font-size」を300%から400%に変更して、かっこの大きさを調整してみました。

color」はそのままです。

スマホで確認すると引用符が正常に表示されています。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする