ワードプレスで文章を書くとき行間(段落の間隔)をつど調節したくなるときがある。「この段落とこの段落の間は2行分ぐらいにしたいなー」とか「いや、1.5行分ぐらいのがいいかなー」とか、つど悩む。
そこで、段落と段落の間に『 』を入れる事で、行間を広くしたりして調節するんだけど、このやり方だけだとかなり大雑把というか、微調整ができないんだよね。「 を2ついれると広くなりすぎる！」とか「そうではなく、 を入れたときの1.5倍ぐらいの行間が欲しいんだ！」みたにさ。
で、『<br>』で調節しようとするんだけどもさ…<br>って使い辛くね?なんか効かないときあるし、ビジュアルとテキスト切り替えると勝手に消えたりすることあるし、イライラする。
使い過ぎるとSEO的にも良くないっていうし。
そこで、あるタグを使うことにした。
使うのは『margin-bottom』と『margin-top』の2つ。これなら見かけの変化を変えるだけなので<br>でむりやり調節するよりもSEO的にも安全。しかも確実に調節できる。
タグで書くと以下のようになる。
<p style="margin-bottom: 20pt">好きな文章</p>
<p style="margin-top: 20pt">好きな文章</p>
20ptってのは一例で、ここに好きな数字を入れる。ちなみにptではくemとか使っても良さげ。
ptとem変換はここを参考に。
んで、このタグの性質を簡単に説明するとだな。
- margin-bottom→そののタグで囲った段落の下の行間幅を調節する
- margin-top→そのタグで囲った段落の上の行間幅を調節する
って感じ。
分かりにくいかな?まあ、詳しくはここ見てくれ。
で、使用例。
直接タグを書きこむとごちゃごちゃするからスタイルに書く方法を紹介するね。
まずWordPressテーマのスタイルシート以下を書き込む。
.mb2{
margin-bottom: 2.5em;
}
.mt2{
margin-top: 2.45em;
}
そしてテキスト形式で記事投稿するときに以下のタグを使う。
<p class="mb2"></p>
<p class="mt2"></p>
2.5emとか2.45emとかの数字は、さっきも書いたけど段落間の幅の数値。自分で色々ためして調節していってくれ。ちなみに、さっきも触れたけど別にpxでもいいんだけど、emのほうが人気(使ってる人多い)っぽいから俺はemにした。
んで、mb2とかmt2ってのはこれじゃなくても適当な任意の英数字でOKね。