文の行間(行の高さ)を変えたい

先日、お会いした方から、「ブログを書く際に行間を開けたいのだが…」との相談。
オリジナルのテンプレートでは行間はCSSで指定されているが、これはCSSのline-hightプロパティを使って編集画面で自由に設定できます。
これにはCSSのline-hightプロパティを使います。下の例文で説明します。
※ 例文 童謡の「虫の声」の歌詞を借ります。文字色を青に変えておきます。
あれ松虫が 鳴いている
ちんちろ ちんちろ ちんちろりん
あれ鈴虫も 鳴き出した
りんりんりんりん りいんりん
秋の夜長を 鳴き通す
ああおもしろい 虫のこえ

ここまでの文章は既定の行間隔だが、これをline-hightを使って行の高さを変えてみました。
※ 高さを変えたもの
あれ松虫が 鳴いている
ちんちろ ちんちろ ちんちろりん
あれ鈴虫も 鳴き出した
りんりんりんりん りいんりん
秋の夜長を 鳴き通す
ああおもしろい 虫のこえ

既定に戻します。

ソースは下のようになります。文字を拡大しておきます。 ※ に注意してください。(コロンとセミコロン)
<span style="line-height:2.5em;">ここに文章が入る</span>
「em」とはCSSで使用する長さの相対単位で、1em =その時点の 1文字分の高さです。文字サイズが違えば、当然高さも変わります。
つまり行の高さを変えたい部分の前後に<span style="line-height:2.5em;"> </span> を入れればいいだけです。
※ 参考まで
行の高さは、ここでは単位に[em]を使いましたが、[px]や[pt]、[%]等でも指定できます。単位を付けなかった場合は、フォントサイズにその値をかけた高さに設定されます。
スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード