自分のブログを見て
「文と文の間をもっと広げたいなぁ」とか
「画像と文章の間隔を調整したい」などと思ったことはありませんか？
今回は、Cocoonで文と文の間隔（行間）を調整する方法を説明します。
行間は適度な間隔があった方が、読者も読みやすくなります。
文章がギュウギュウに詰まっていると、見た瞬間に嫌気がさしますよね。
Cocoonの調整方法の他に、WordPressで使える
特定の箇所だけ間隔を広げたり詰めたりする方法も書きました。
Cocoonで文と文の間隔（行間）を調整する方法
Cocoonで文と文の間隔（行間）の調整するには「Cocoon設定」の「本文」タブをクリックします。
行間は「本文行間設定」で調整します。
行の高さの調整
「行の高さ」は、1から4までの間で調整できます。
この1から4という数字の意味ですが、
文字の高さを「1」として、行の高さをその何倍（単位:em）にするかです。
仮に行の高さを「1」にすると、文字の高さと行の高さが同じなので、
「Shift」＋「Enter」で改行した場合は行間がなくなります。
行の高さを最大の「4」にすると、
文字の高さ「1」を除いた文字3つ分の行間が生まれます。
これは文章の上下に「1.5」文字分の余白ができるため、文と文の間には文字3つ分の行間ができるわけです。
「行の高さ」が2だと文字1つ分の余白、3だと文字2つ分の余白といったように
「設定の数マイナス1」の余白が文と文の間にできると考えると分かりやすいと思います。
この「行の高さ」だけの余白が適用されるのは、
・長い文章を入力して自動的に文字が下の行へ移行する場合
・Shift + Enterでの改行、いわゆる「小さな改行」を行う場合
のどちらかです。
行の余白（マージン）の調整
次は、Enterだけで改行（いわゆる「大きな改行」）した際にできる余白の調整です。
Enterだけで改行すると、「行の高さ」とは別に「行の余白」が生まれます。
この「行の余白」は0.1から4までの間で調整できます。
こちらも数字の意味は文字に対しての倍率です。
たとえば文字の大きさを「16px」で設定して、行の高さを「2」にすると文章の上下には「8px」の余白ができます。
同じく行の余白も「2」にすると、こちらは「32px」の余白になるので、文章と文章の間には合計で「48px」の余白ができるわけです。
Google Chromeのデベロッパーツールを使うと「行の余白」が文章の下にあることが一目で分かります。
特定の場所だけ間隔を調整する方法
ブログをやっていると「文と文の間を1ヶ所だけ広げたい」なんて思うことがありませんか。
簡単なのは、Enterを押して行間を広げる方法ですが、この方法は任意の広さに間隔を調整することはできません。
このような場合は、WordPressのテキストエディタを使うと簡単に調整できます。
下の画像はビジュアルエディタで「Shift」＋「Enter」で改行したものと「Enter」だけで改行したものですが、2つを見比べてみてください。
大きな改行はテキストエディタで見ると行間が一行空いていることが分かります。
この一行にによってビジュアルエディタでは「行の余白」ができています。
しかし上の文章（吾輩は猫である。名前はまだない。）を次のコードで挟むと、行間がなくても文章の下には3行分の余白が生まれます。
<p style="margin-bottom: 3em;">吾輩は猫である。名前はまだない。</p> どこで生れたかとんと見当がつかぬ。
下の文章（どこで生まれたかとんと見当がつかぬ。）を次のコードで挟んでも、ビジュアルエディタでの見た目は同じになります。
吾輩は猫である。名前はまだない <p style="margin-top: 3em;">どこで生れたかとんと見当がつかぬ。</p>
このように文章の下に余白を作りたい場合はプロパティ「margin-bottom」、
文章の上に余白を作りたい場合は「margin-top」を使うことによって、任意の大きさの行間を作ることが可能です。
「3em」の部分は「48px」のように単位に「px（ピクセル）」を使っても大丈夫です。
どちらの単位でも数字を大きくすると行間が広がり、小さくすると行間が狭くなります。
画像と文章の間隔を調整する方法
同じようにコードを使って、画像と文章の間隔も調整が可能です。
文章は「p」タグで、画像は「img」タグで違いはそれだけです。
画像の下に余白を作る前↓
「img」タグを「margin-bottom」を使ったコードで挟むと画像の下に余白ができます↓
「img」タグをコードで挟むことによって、画像の下に3文字分の余白ができました。
改行だけでは任意の広さの余白は作れませんが、コードを使うと間隔の微調整が可能です。
文章や画像をコードで挟むだけなので、ぜひやってみてください。
コメント