どうも！LSSです！！
昨日、「ブログの背景に罫線を描き、その上に文字が綺麗に並ぶ」よう挑戦した記事を書きました。
ただし、これは背景として罫線模様のlinear-gradientを、そして行の高さとなるline-heightプロパティを模様にあわせる、というもので、文章中に高さが変わる要素…例えば文字を一部大きくするとか、画像を入れるとか、見出しをまたぐなどであっさり崩れてしまいます^^;
それらの問題をクリアできるわけではないのですが、都度
<div class="keisen">中の文章</div>
を入れるのも使い勝手が悪いな…と思い、「ブログ１記事全文を罫線表示する」際に扱いやすいコードに書き換えてみました。
※はてなブログ向けです。
なお、今回は過去記事にコードを突っ込み、表示例としています。
コード その１
<style>
.entry-content p{
line-height:2.5em;
background:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2.5em;
margin:0px 0px!important;
}
</style>
↑このコードを、はてなブログのHTML編集画面内に貼り付けると、このコードを含む記事で罫線背景になります。
表示例は↓こちら
コード その２
<style>
.entry-content p{
line-height:2.5em;
background:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2.5em;
margin:2.5em 0px!important;
}
</style>
表示例は↓こちら
（こちらのみ、今回の変更にあわせて改行・改段落を修正しています。）
コードその１とその２の違い
marginの指定部分のみ異なります。
コードその１
margin:0px 0px!important;
コードその２
margin:2.5em 0px!important;
まず、今回のCSSを当てる対象は
.entry-content p
を対象にしています。
これは「entry-contentというクラス名を持つ要素の中の<p>タグ」を指定している事になります。
はてなブログにおいては「entry-content」というクラス名は記事の表示部分で、「編集 見たまま」画面で記事編集中にPCのエンターキーを押すと、
<p> </p>
<p> </p>
<p> </p>
<p> </p>
のように<p>タグが量産されます。
…自分も、改行や行間を開けるのに多用していますが、HTML本来の意味から言うと<p>タグは「paragraph（段落）」を意味するタグで、改行を意味する<br/>タグとは性質が異なります。
「段落」なので、「改行」よりも少し広く行間が空くようにmargin（外部余白）が設定されていますが、今回のこのコードでは
- コードその１ではmarginを0にする（改段落と改行が同じ高さとなり、罫線が等間隔で並ぶ）
- コードその２ではmarginをline-heightと同じ値にする（改段落時に一行分の高さと同じだけの隙間ができる）
という対応をとっています。
コードその１は等間隔に並ぶので見た目が綺麗ですが、段落の境目が分からなくなります。
コードその２は段落ごとに独立した見た目になります。
どちらがいいか、好みがわかれそうですね。
もちろん、該当の値を別の値に変える事もできますし、marginの行だけ削ってしまう、という手もあります。
あと、今回は「entry-content」が、はてなブログで使用されているクラス名である事から、「はてなブログ向け」としましたが、他ブログでも該当のクラス名等に変更できれば使用する事ができるかと思います^^
追記：コード その３
2022/1/17追記
<style>
.entry-content p{
line-height:2.5em;
background:linear-gradient(0deg,transparent 15%,#ccccdd 15% 18%,transparent 18%) 0px 100%/100% 2.5em;
margin:0px 0px!important;
padding-top:2.5em;
}
</style>
罫線の描画方法を変えてみました。
background:linear-gradient(0deg,transparent 15%,#ccccdd 15% 18%,transparent 18%) 0px 100%/100% 2.5em;
その１、その２が「上からの位置決め」だったのに対し「下からの位置決め」に変更しています。
罫線と文字の位置関係って、多分気になるのは「文字の下辺からその下の線までの距離」ですよね。
その概念で行くと、こちらの方が自然な指定方法という事になるかと思います。
他にpadding-topなども入れたりしていますが、このあたりはお好みで。
表示例は↓こちら
この記事冒頭で、文字を大きくする等でのズレる問題をクリアしたわけではない旨、記載していましたが、この方法だと「少し目立たなく」するぐらいならできるかな、と。
この表示例中ではところどころ「150%」に拡大した文字を使っています。
その前後あたりで少し「文字の下辺と線の間が詰まってる」ようになってはいますが、まだ見れる範囲になってるかな、と思いますが、どうでしょう？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
