SWELLを使い始めて、一番最初に思ったのが箇条書きリストの行間の狭さです。
もう少し広かったらいいのにと思って、ググって調べましたが、広げる方法が見つけられず諦めていました。
というより、SWELLリストブロックの拡張機能の1つを利用してなら可能なので、そちらを使っていました。
ですが、通常のリスト表示では間隔が広がらないので、改めて調べてみることにしました。
あさひSWELLを使っていてリストの行間を広げたいって人は参考にしてみてください
【SWELL】箇条書きリストの行間（間隔）を広げる方法
そこまで難しいことはしないので、ワードプレス初心者の方も挑戦してみてください。
方法は大きく分けて２つあります
- SWELLの拡張機能で広げる方法
- こちらの方法を知っている人は②へ
- CSSを追加して広げる方法
SWELLの拡張機能で広げる方法
リストを選択した状態で、ブロックの編集から「リストの追加スタイルを確認」してください
初期状態では「なし」にチェックが入っているので、「下線を付ける」に変更することで行間が広がります
なしの場合
下線を付けた場合
下線を付けると、かなり広がります。
こちらでOKなら、リスト表示した時に下線を付けるに変更するようにしましょう。
下線を付けずに、行間を広げたい人はCSSの追加をしていくことになります。
CSSでカスタマイズする
カスタマイザーを開いて、次のCSSを追加するだけです
カスタマイズ＞追加CSSを開きます
今までに何も追加したことがなければ、空白になっています。色を変えてある部分が今回追加したものです。
次のコードをコピーして貼り付けてください
/* リストの行間css */
ul li {
padding-top:3px;
padding-bottom:3px;
}
ol li {
padding-top:3px;
padding-bottom:3px;
}このコードは探しまくって、やっと見つけたこのサイトを参考にさせていただきました
箇条書きul・olタグの幅を調整したい！テーマによって注意も？
私は行間のpx数を10→3へ変更しました。その理由はSWELLもこのコードを追加すると、目次の行間が広がってしまうからです。10だと広がりすぎて、個人的にバランスよく感じたのが3pxでした。ご自身でプレビューを確認しながら数字を調整していただくか、上記サイトを参考にCSSでの調整をしてください。
変更せずに、行間を10pxのままで追加した場合、どのくらいの行間になるのか気になると思うので、画像付きで紹介したいと思います。
リストの行間を10pxのままでCSSを追加した場合
私は本文とサイドバーに目次を設定しているので、それぞれがどのように表示されるのかスクショを撮ってみました。
通常の箇条書きリストの場合
3pxの場合
10xの場合
本文中の目次の場合
3pxの場合
10xの場合
10pxにすると、少し開きすぎな感じがします。
サイドバーの目次の場合
3pxの場合
10xの場合
サイドバーになると、10pxだと間延びして逆に見にくい感じがします
私は3pxで落ち着きました。
コードを参考にさせていただいた記事には、サイドバーの目次の設定を無効にするコードも紹介されていましたが、そこまで難しいことをしなくても、バランスをみて3pxにすることで納得しました。
- 通常のリストは少し行間が広がる
- 目次のリストは広がりすぎない
個人的にはちょうどいい行間になったのではないかと思っています。
まとめ
SWELLのリストの行間。
広げたいからカスタマイズ方法を探しましたが、なかなか見つけられずで大変でした。
やっと見つけたサイトに感謝です。
下線をつけることで、行間は広がります。
ですが、下線をつけずに広げる方法も知りたかったので助かりました。
カスタマイズは少し抵抗あるかもしれませんが、追加CSSの場合は追加したコードを消すだけで元に戻るので、初心者の方も挑戦しやすいかなと思います。
コメント