リスト(li)・箇条書きの行間の調整を
本文のみに適用する

 

 

自分用メモなので解決する流れを細かく書いていくが
そんなの読んでられないという人は下のほうに赤い文字で
「リストの行間の調整を本文(投稿・記事ページ)のみに適用する」
という見出しがあるので
そこまでスクロールしてね。

 

問題発生の経緯

 

ブログの作成はPCで見る事を前提にレイアウトを考えてきたが
解析のデータを見ると結構な割合で
スマホやタブレットからもアクセスがあることがわかった。

 

そこでスマホからブログを見ると
レイアウトがかなり崩れているので調整が必要だった。

 

基本的にはテーマがレスポンシブに対応しているので
ある程度は調整されているが
改行した文章に変な空白ができてしまい、
とても読みづらい状態になっていた。

 

スマートホンなどの画面で改行を無視する

対策を調べるとモニターサイズが小さくなったら
改行を無視する命令をCSSに書き込めば
解決するみたいなので実行した。

 

今回の記事のタイトルとは関係無いが命令文はこれ

 

@media screen and (max-width: 1080px) {
br { display : none ; }
}

 

これをCSSの一番最後に書き込めば改行を無視できる。
1080が改行を無視するモニターサイズで
この場合は1080以下になったら切り替わるようになっている。

 

これで文章部分は変な空間が無くなったので
多少はマシなレイアウトにすることができた。

 

ブログ全体をチェックしていると新たな問題が発生した。

 

自分は箇条書きするときは手動で・や数字を入れて
改行したり行間を調整したりして
表示していた。

 

文の頭に・や数字を入れるので
2行目は空白を入れて文字の位置を調整していた。

 

しかしスマホ対応で改行無視すると
・や数字の下に文字が来てしまい見栄えが悪い。

 

解決策を調べるとリストという命令文を入れれば
綺麗なレイアウトにできるみたいだ。
よく見るとTinyMCE Advancedのツールの中にリストボタンがあった。

 

これは基本中の基本みたいだが独学の初心者はこんなことも知らないのだ。

 

スポンサーリンク

 

リスト左側の余白の調整

 

リストで文章は綺麗に整理されたが
左の余白が多く全体的に真ん中寄りに
なってしまっている。

 

できれば左端に寄せたいので調べた。

 

すると paddingという命令文を
CSSのリストの該当部分に入れれば
調整できそうだった。

 

CSSのul,ol(番号なしリストと番号つきリスト)で
リストの余白の指示をしている場所に

padding: 0px 0px 0px 0px;


という命令文を入れてみた。

 

 

この命令文は上下左右全部の余白の指示が入っている。

 

個別に調整するなら

 

左の余白
padding-left
:  0px;

右の余白
padding-right:  0px;

上の余白
padding-top:  0px;

下の余白
padding-bottom
:  0px;

 

で出来ると思う。
数字は調整したい値を自由に入れればよいのだが
0だと不具合が出る可能性があるので注意。

 

paddingを入れてみた結果、
下のように左寄せすることが出来た。

 

 

しかし、これだと行間が狭いのが気になったので調整しようとしたが
paddingでは調整できなかったので改行で対応しようとした。

 

PCは上手く調整できたが問題はスマホだ。
改行を無視する命令を入れてあるので行間の調整ができないのだ。
ここから戦いが始まる。

 

CSSでリストに対して行間の幅の値を指示する

 

PCは問題無いしスマホはガマンすれば、
行間の幅の調整は手動で改行して運用すれば一応できるのだが
毎回いちいち改行するのも面倒なのでCSSで出来ないか調べた。

 

調べた結果

 li {
 margin-top: 2em;
 margin-bottom: 2em;
}

という命令文をCSSに入れればリストを作った時に
行間を自動で指示した幅にしてくれるみたいだったので入れてみた

 

するとこのようになり問題は解決したと思った。

 

しかしブログ全体をチェックするとある問題に気が付いた。

 

 

このようにメニューにも影響してしまっていた。

 

つまり今回のやり方だと
ブログ全体のリスト命令している箇所に
影響してしまうみたいだ。
メニューの幅が変わるのは予測外だった。

 

ブログのサイト全体のリストの幅を調整したい人は
この命令文を
CSSに書き込めば良いと思う。

 

スポンサーリンク

 

リストの行間の調整を本文(投稿・記事)ページのみに適用する

 

調べてみるとSimplicityというテーマでは

.article li {
margin-top:  2em;
margin-bottom:  2em;
}

 

とCSSに入れれば本文のみに行間の調整を適用できるみたいだ。

 

わかってる人なら入れる場所はどこでもよいが
わからない場合は
一番最後に入れれば最優先で適用される。

 

今までいろいろカスタマイズしてきたが違うテーマのやり方でも
通用する場合が多かったので自分のCSSに入れてみた。

 

結果何も変わらなかった。

 

.articleの部分が無い場合は幅が変わるのは確認済みなので、
.articleが何を意味しているのかわかれば問題を解決できるのではと考えた。

 

調べるとarticleはdiv要素のidというものらしい。

 

div要素のidとは
フッター、ヘッター、サイドバー、本文(投稿・記事ページ)などに
それぞれid(名前)が割り当てられている。

 

CSSで指示する場合にそのidを入れれば
個別に適用させる事が出来るというものだった。

 

つまり自分の使っているテーマの
本文(投稿・記事ページ)のidがわかれば問題解決に近付くはずだ。

 

そして個別投稿のsingle.phpの中を探した。

 

すると自分の使用しているテーマの
本文(投稿・記事ページ)のidがprimaryだということがわかった。

 

さっそくCSSに

.primary li {
margin-top:  2em;
margin-bottom:  2em;
}

 

と入れて適用されているのか確認してみた。
が、全く何も変化が無かった。

 

自分の考え方が間違っているのかと諦めようと思ったが、
もうひとふんばりして調べた。

 

すると別のテーマでは
最初が.(ドット)でななく#(シャープ)を使う
という情報を見つけた。

 

ダメ元で#(シャープ)を入れて試してみた。

#primary li {
 margin-top: 2em;
 margin-bottom: 2em;
}

 

するとこのようになった。

 

 

できたぁぁぁ。

 

無事に本文(投稿・記事ページ)のみにリストの行間の調整を適用する事が出来た。
今回調べたこの方法は他にもいろいろ応用できそうだと思った。