バズ部「Xeory Extension」のリスト余白のカスタマイズ

バズ部「Xeory Extension」のリストの余白が気になりカスタマイズしてみました。カスタマイズをおこなう場合は、あくまで自己責任でお願いいたします。

<ul>タグのリストの左と下の余白が少し広いため、ちょっと狭くする方法です。

リスト<ul>の左と下余白をカスタマイズ

外観　→　テーマの編集　→　スタイルシート (style.css)　より

/* ----------------------------------------
* main
---------------------------------------- */
.post-content p,
.post-content ul,
.post-content ol,
.post-content dl,
.post-content blockquote,
.post-content pre,
.post-content table {
margin-bottom: 2em;
}

margin-bottom:2em

これでは下の余白のみ2文字分なので、上下左右を1文字分にする場合は

margin: 1em;

に書き換える。
さらにもう少し下に

.post-content ul,
.post-content ol {
margin-left: 30px;
}

があるので、削除するか　/*　でコメントアウトする。

/*.post-content ul,
.post-content ol {
margin-left: 30px;
}*/

と上下左右の余白が1文字分になります。

リスト<li>文字間を広くする方法

先ほど変更した下あたりに

.post-content li {
margin: 1em;
}

を記載すればリスト<li>の文字間が上下左右1文字分空き見やすくなると思います。
または、上下と左のみ1文字分にする場合は

.post-content li {
margin: 1em 0 1em 1em;
}

にすると右のみ1文字分の余白がなく表示されます。

本日の注目記事はこちら

iPhone 16 Pro Max

iPhone 16 Proはグレード5チタニウムのデザイン

Apple Intelligenceのために設計された史上初のiPhone。パーソナルで、プライベートで、パワフルなマシン

アップル公式サイト

Amazon

楽天モバイル

YAHOO!ショッピング