文字の背景色（マーカー）の高さを修正

f:id:tsukisai:20190321052927j:plain

先日、文字に背景色をつける（＝マーカーで文字全体を塗った感じにする）方法を書きました。
（文字の背景に色をつける - Someday Somewhere）

通常は下記のようにすれば背景色を付けることができます。

記事に書き込む
<span style="background:#ffcce5">あいうえお</span>

＊記事編集画面
Markdownの場合：記事に直接書き込む
みたまま編集の場合：HTML編集に書き込む

ですが、文字上と文字下で背景色の余白に違いがあることに気が付きました。

上記の方法で書いた場合の例
abcde
あいうえお
12345
가나다라마

文字にもよりますが、へたをすると文字の上がマーカーからはみ出てしまう場合もあります。

今回やってみた解決策としては
①CSSに書き込む
②記事本文に書き込む際、色指定と共にpadding指定も書く

これは以前書いた、マーカー風アンダーラインをCSSに記述する方法と同じ要領です（マーカー風アンダーラインの設定で悩んだ末にとった方法 - Someday Somewhere）。

CSSに記述
article x{
text-decoration: none;
background-color: #ffcce5;
padding-top: 0.5em;
}

記事を書く時
<x>あいうえお</x>

上記のように、背景色を付けたい文字を<x>〇〇</x>で挟めば出来上がりです。
ただ、CSSに書いているので、違う色を使いたい場合は面倒。

こちらはCSSに記述せずに使えるので、背景色を変えたい時はカラーコードを変えればよいので便利です。まあ、記事を書く時に毎回書かなければいけないので、これはこれでまた面倒かもしれませんが。

書き方＆見え方
<span style="background:#ffcce5; padding-top:0.3em;">BBBBB</span>
↓
BBBBB

記事を書く際に色と文字上のpadding値を指定します。

padding-topを指定しないと、どういうわけか背景色が文字全体を覆わず（文字下はちゃんと余白があるのですが）。 CSSで記事本文箇所を確かめ、幾つか記述を変えたりしてみたのですが、うまくできませんでした。

しょうがないので、CSSにも上記のように記述しましたが、今は、記事に直接書き込む方法を使うことが多いです。

Someday Somewhere