Luxeritasでのdivの使い方

Luxeritasでdivを使うと文字サイズがおかしくなります。作者の話ではWordPressでは文字の整形がdivに対応していないからだとか言う話ですが、私の知る限り、他のテーマではdivを使うと文字サイズがおかしくなると言う現象は見たことがありません。

とにかく、下記のキャプチャーを見てください。これはLuxeritasでdivを使って囲ってみた例です。文章はこのブログのこちらの記事のもので、blockquoteで囲ったところをdivにして、テストサイトでアップロードしたものをキャプチャーしたものです。divで囲ってあるところは背景を灰色にしてあります。

Luxeritasで文章をdivで囲った場合

引用符(>)のところの文字が小さくなっています。これは引用符だから小さいのではなく、引用符がなくても、こうなるのです。これが困った問題なのです。

比較のため、テストサイトのTwenty Seventeenで同じ文章をアップロードしましたが、引用符のところは他の部分と文字の大きさが同じですね。

Twenty Seventeenで文章をdivで囲った場合

この問題を解決するには、divの中をさらにpで囲むことで解決します。

Luxeritasでdivの中をさらにpで囲った場合

ご覧の様にこれでTwenty Seventeenと同じ見栄えになりました。ちょっと違うように見えるのはフォントの違いです。

そう言うわけで、この問題は下記の様にコーディングすることで解決することがわかりました。

<div><p>文章</p></div>

これって、divがいらないような気がするんだけど・・・。(^ ^;

じゃあ、またね。

関連ページ:
Luxeritas 3.2.0 リリース(PWA 対応)