スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

先日、お会いした方から、「ブログを書く際に行間を開けたいのだが…」との相談。
オリジナルのテンプレートでは行間は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ブログへようこそ!

カレンダー
07 | 2017/08 | 09
- - 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フィード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。