箇条書きul・olタグの幅を調整したい!テーマによって注意も?

ども、サンセカイです。

箇条書きリストのタグである
ulタグolタグリストとリストの
間の幅の調整がしたい!
ということで作業をしたので
備忘録的に残しておきます。

これもテーマによっては最初から
見やすく調整されていて
やる必要がなかったりするのですが
例えばSimplicityの場合は
調整したいぐらいギューギュー。

LuxeritasはそのままでOKでした。
こっそりスタイルの調整用の
ページを作ってあるのですが
そこで見てイケてるじゃん!
と改めて認識した次第です。

両方とも無料なのに高性能
ありがたいかぎりです。

 

箇条書きul・olタグ

普段ワードプレスの
エディターから何気なく使っている
そんな方も多いかと思います。

テキストエディターの方で見ると
ちゃんとタグで囲ってあるのですが
知識がないとなんのこっちゃという
感じでわからないですよね。

でも知っていると、
例えばエディタが無い場合でも
メモ帳などでソースごと
書けちゃうんだなこれが。

li タグを ul タグで囲むと
番号なしのリストに、
li タグを ol タグで囲むと
番号ありのリストになります。

それでは例を用意しました。

ul 番号なしリスト

  • 小次郎
  • 呪腕さん
  • 荊軻
  • ステンノ
  • ジャック

ソースだとこんな感じ。

<ul>
     <li>小次郎</li>
     <li>呪腕さん</li>
     <li>荊軻</li>
     <li>ステンノ</li>
     <li>ジャック</li>
</ul>

ol 番号ありリスト

  1. アマデウス
  2. アンデルセン
  3. メディア
  4. エリザベート
  5. 諸葛孔明

ソースだとこんな感じ。

<ol>
     <li>アマデウス</li>
     <li>アンデルセン</li>
     <li>メディア</li>
     <li>エリザベート</li>
     <li>諸葛孔明</li>
</ol>

 

箇条書きul・olタグの幅を調整したい!

この通りLuxeritasでは調整の
必要が無かったのですけれども
私が持っているいくつかのブログ
Simplicityをテーマにしているものは
調整が必要だと感じました。

ちょうど↑の画像のように
調整したいのです。

考え方としては『余白』が欲しいので
paddingプロパティの上下を
追加してあげればOK

どこに記述するかというと
※Simplicityの場合

外観⇒テーマの編集

右上からSimplicity2の
子テーマを選択し、
その中にあるスタイルシート
編集するのです。

記述する内容はこんな感じです。

/* 箇条書きの行間css */
 ul li {
 padding-top:10px;
 padding-bottom:10px;
 }

ol li {
padding-top:10px;
padding-bottom:10px;
}

やったね!簡単だったね!
と思ったそうではありませんでした。

このリストのタグって
サイドメニューにも
使われていることに
後から気がついたのです。

そしてついでに目次を
出力してくれるプラグイン
TOC+もリストを使っています

本文中だけでよかったのですが
そこら中に余白が追加されることに。

 

サイドメニューではなく本文のみを

 

Simplicityの場合、
本文を構成するdiv要素のidに
『the-content』という名前がついてます。

そこで、『the-content』内部に存在する
リストタグだけに余白を追加するために
以下のように上述した内容を変更。

#the-content ul li {
padding-top:10px;
padding-bottom:10px;
}

#the-content ol li {
 padding-top:10px;
 padding-bottom:10px;
 }

これで本文にのみ、
この余白の設定が
適用されるようになりました

しかし本文の中には
TOC+で生成された
目次があるんですよね

そしてその目次はモロに
この余白の設定の
影響を受けるわけです。

 

TOC+の中は無視する

基本的にスタイルシートの記述は
後に書かれた方で上書きする
というルールになっているので
それを利用してTOC+の中は
余白を取らないようにします

ありがたいことにTOC+で
生成された部分には
『toc_container』というidが
振られているのでそれを利用。

以下を「#the-content~」と
記述した箇所よりも
下に記述します。

/* TOC+の行間を相殺css */
#toc_container ul li {
padding-top:0px;
padding-bottom:0px;
}

#toc_container ol li {
 padding-top:0px;
 padding-bottom:0px;
 }

これでバッチリ思い通りに!

もし記述してファイルを更新しても
見た目が変わらない場合は
キャッシュが残っていることが
原因だと思われます。

ご利用になられているブラウザごとの
スーパーリロードをしてみて
再度確認してください。

 

もっときれいなやり方がありそうだけど

このやり方しか知らないもので。
ウェブ関係のお仕事なんて
もう何年もしてませんし(*ノノ)

自分で要素などが調べられるなら
範囲を指定することで
無駄なくリストの余白を
とることができます

見た目をもっとおしゃれにしたりなど
やれることはたくさんありますが
一先ず、今まで気になっていたことの
1つが解決できたことに満足

新たな問題としては1つ解決すると
また1つやりたいことが増える
修飾沼にはまりそうなことぐらい(笑)

うーん、カスタマイズ製が高いのも
意外と困り者なのかも?

最後までお読みいただき
ありがとうございました。