1.  1/1から1/10 AM11時まで1日1回おみくじが引ける!最大 2,000円OFFの割引クーポンが当たる!新春おみくじで運試し ログインが必要です。会員登録はこちら>> クーポンは1回の会計(税込・値引き後、送料・手数料・サービス料は除く)が 2,000円以上の場合に利用できます、注意事項 ログインが必要です。 クーポンは1回の会計(税込・値引き後、送料・手数料・サービス料は除く)が 2,000円以上の場合に利用できます、2. 1/10 AM11時まで「冬得」5千円以上のご注文でネット全品ポイント+5倍ポイントルールはこちら>>3. 1/...
エヌ・ティ・ティ・コミュニケーションズ株式会社(本社:〒100-8019 東京都千代田区大手町2-3-1 大手町プレイスウエストタワー)が展開する、格安SIM・格安スマホの 「 OCN モバイル ON

バズ部「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文字分の余白がなく表示されます。

本日の注目記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です