いつも読んできありがとうございます。
珍しく日曜日の日中に書いていますが、最近罫線背景が人気ですね。
LSS(id:little_strange)さんのコードで簡単に背景に出来るようになりました。
大文字のズレ
大文字を入れるとズレが発生するのは最初に言われていましたね。。
このズレを修正するには文章内のコードに位置を指定すれば何とかなるのではと思い挑
戦してみました。
元の位置から修正するのにposition: relativeを使いました。
大文字のコード
<p><span style="font-size: 200%; position: relative; top: -4px;"><strong>これでどうでしょう</strong></span></p>
top:○px;で高さを修正
高さのの修正は出来ましたが次の行の高さが若干広くなってしまいます。
文章内にも行の高さを設定してみる。
太文字のコード内にline-height:2.5em;も設定する。
行の高さを設定したことで文字の位置がズレてしまいました。
文字の高さを修正してみる
大文字のコード
<p><span style="font-size: 200%; position: relative; line-height: 2.5em; top: 14px;"><strong>こんどこそどうだ！</strong></span></p>
行の高さを設定したので大文字の大きさによってtop:○;を変える必要があります。
大文字だけならこれでいけると思います。今回太文字にしてますが大文字だけなら
<strong></strong>は必要ないです。
標準文字と大文字が混ざった場合
文章に標準文字と大文字を入れた時に大文字だけ調整すると標準文字は上側に表示され
てしまいます。
標準文字にも行の高さと文字の高さを設定する。
コード
<p><span style="font-size: 200%; position: relative; line-height: 2.5em; top: 14px;"><strong>大文字</strong></span><span style="position: relative; line-height: 2.5em; top: 14px;">と混ざっても大丈夫です。</span></p>
標準文字にも設定したことで太文字が入れ混ざってもズレを調整することができます
最後に
LSSさんのはてなブログ向けコードを使うと記事全部に反映されるのでテスト用ブログ
で確認して画像を貼り付けています。
今回のは私なりにやってみた結果なのでこれが正解かはわかりません。
スマホでの確認はしていませんがパソコンでのスマホプレビューでは問題ありませんで
した。
