Twenty Seventeen、ul、olの”リストマーク”をひっこめる

最近のはやりのデザインでしょうか?、ワードプレステーマのTwenty Seventeenでは、ulリストやolリストの”リストマーク”が他の行より左側に出っ張ってしまっていて、気持ちが悪いので、中にひっこめました。

CSSでの変更方法

外観→テーマの編集→Twenty Seventeenの子テーマ→Style.cssにて変更します。

Twenty Seventeen リストマーク 制御箇所
Twenty Seventeen リストマーク 制御箇所
  1. ページ検証のSourcesで確認すると、スタイルシートの”8.0 Lists”の直下で制御しているのでそこを探します。
  2. マージンの設定をmargin: 0 0 1.5em 1.5em;へ変更します。
  3. 「ファイルを変更」をお忘れなく。

2のマージンの初期設定は、「0 0 1.5em;」で、上0em、左右0em、下1.5emです。「0 0 1.5em 1.5em;」だと上から時計回りに上0、右0、左1.5em、下1.5emに変わります。

Twenty Seventeen、”リストマーク”、修正前

Twenty Seventeen リストマーク 修正前
Twenty Seventeen リストマーク 修正前

左側に出っ張っているでしょ?、自己満足ですが、引っ込んでいるのを見慣れているので、違和感があります。

最近の感覚では、出っ張っている方が、おしゃれなのかもしれません。

Twenty Seventeen、”リストマーク”、修正後

Twenty Seventeen リストマーク 修正後
Twenty Seventeen リストマーク 修正後

見慣れた感じのリストに変わりました。インデントはあまりつけていませんので、もっと右側によせたい人は、4つ目の数字を大きくしてみてください。

コメントを残す

メールアドレスが公開されることはありません。