【はてなブログ】リストの横並びで右にずれてしまう事象の対応

はてなブログにて、display: flex;などでリスト（<ul><li>タグなど）を横並びにさせる際、意図しない謎のインデント（空白）が入ってしまい、位置が右にずれることがあります。今回はこの事象の対応策について紹介します。

以下は、ずれている例。タイトルや見出しと比べて、横並びの数字のリストが右にずれています。

<style>
    ul {
        display: flex;
        list-style-type: none;
    }
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

原因・対応策

原因としては、全体にul {padding-inline-start: 40px;}が、記事内であれば.entry-content ul {margin: 0 0 1em 1.5em;}（つまりmargin-left: 1.5em;）が設定されているためです。
（記事内はpadding: 0;で全体設定を上書きしているが、新規でmargin-left: 1.5m;が設定されている）

使用しているブログデザイン次第なところはありますが、このような事象が発生する理由は大抵このあたりが原因のはずです。デベロッパーツールなどを使用して確認してみてください。

対応としては、右にずらしたくないリストの<ul>タグにクラスを設定し、そのクラスに対してpadding-left: 0;やmargin-left: 0;を設定する、などが考えられます。

ただし、記事内においてはデフォルト設定が.entry-content ulで書いているため、上書きする際は優先度に注意する必要があります。

合わせて読みたい

cxememo.com