【SWELL】ずっと苦戦していたリストブロックの行間調整

2025年6月15日

デフォルト状態から行間を調整する中で、目次などを含めたリスト要素の行間が詰まらず悩んでいました。

最近、やっと調整ができました。



/* 行間調整 */
.post_content p, ul, ol {
    line-height:2.05em;
    letter-spacing: 0.1em;
    position: relative;
}

この指定では、リスト要素の部分だけ位置が微妙にズレるので、以下のコードを追加入力。



/* リスト調整 */
ul.is-style-index li:before{
    border-radius: 0%;
    top: calc(1em - 0px);
    height: 2px;
    width: 8px;
    left: 0;
}

これで違和感なくリスト部分の行間を広めに設定することができました。

ちなみに、私は行間は広めが美しく読みやすいと感じるタイプなので、たっぷり2.05文字分の行間を指定しています。

Writer