研Q34.ブログの行間をHTMLタグで部分的に詰める方法
２分の１改行タグなど、ワンポイントの改行幅設定ができます。
ワープロソフト「一太郎」を使ったことがある方は、行と行との間隔を設定する「改行幅」という考え方がおなじみだと思います。
MS Wordの場合は、「行間」ということばを使っていて、段落内の行間を設定できます。
また、段落の前後の間隔を設定して美しい文章に仕上げるテクニックは、プロのWord使いには常識です。
ブログでは、どうしてそれができないの？
いえ。もちろんブログでも行間を自由に設定することができます。
ブログの行間の設定はCSSで行います。（基本）
CSS（スタイルシート）に、行間をどう表示するかが書いてあります。line-heightという行の高さを指定するプロパティを使います。
高さの指定は、
line-height：1.4
などのように、数値で指定できます。
ここで「1.4」というのは、文字の高さを「1」として、次の行との間隔が「1.4」という意味です。
このように単位なしの数字だけで指定するほかに、次のような単位をつける方法もあります。
・「em」という単位をつける方法。（1.4em など）
単位なしと同じ結果になります。
・「％」をつける方法。（140% など）
・「px」でピクセル値で指定する方法。(22px など）
文章の中で使うときは単位なし、
枠囲いの中などで見た目をきっちり決めたいときは「px」を使うのがいいのではないかと、
僕は考えています。
アメブロのブログ本文の行間の高さをCSSで設定する方法は、
わざめーばさんの↓この記事をご覧ください。（新「CSS編集用デザイン」用）
⇒ 【新】アメブロの記事本文をカスタマイズする方法｜アメブロカスタマイズで人が集まるブログ作り
もし、あなたのCSSに「line-height」の指定が書いてない場合。
カスタマイズ用に開放されていない、ブログ大もとのCSSに書いてあります。
CSSはあとから指定したものが優先になりますので、
わざめーばさんのコードをユーザーCSSの末尾に追加すればだいじょうぶです。
では、基本はいいのだけれど、記事の一部分だけ行間を設定したい場合は・・・
記事の一部分だけ行間を設定する方法。
line-heightプロパティはHTMLタグの<div>タグに組み込むこともできます。<div style="line-height: 1.4">～～<div>
いくつか実例を使ってご説明します。
このブログはCSSで行間の高さが1.4に設定してあります。
まずは、line-height:1.4から。
この部分は「line-height:1.4」に設定してあります。
基本の改行幅1.4です。
このようにブロック部分の行間を設定する場合は<div>タグが使えます。
基本の改行幅1.4です。
このようにブロック部分の行間を設定する場合は<div>タグが使えます。
基本の改行幅なので、ほかの文章部分と同じ行間の高さですね。
見やすいように、<div>タグに枠線を追加してあります。
使ってある開始タグは、
<div style="border: 1px solid; line-height: 1.4;">
border: 1px solidの部分が枠線です。
もちろん、枠線なしで使うこともできます。↓
この部分は「line-height:1.4」に設定してあります。
枠線なしで、
行間の高さだけを設定することができます。
こんどは、line-heightを「1」にしてみます。
行間の高さ＝文字の高さ になっているので、当然スキマはゼロです。
こんな読みにくい表示は実際には使えませんが、こんなふうになるという見本です。
あとは、数値の部分を変更しながらプレビューを確認すると、ちょうどいい行間が見つかるでしょう。
<br />を line-height:0.7つきの<div>タグではさんでやると、２分の１改行ができます。
<div style="line-height:0.7"><br /></div>
サンプルです。↓
２分の１改行をするためには改行タグ<br />をline-height:0.7で挟みます。
↑この部分に、２分の１改行が入れてあります。改行を入れずに右端で折り返した場合は、このように基本の改行幅になります。
↑普通の改行タグ<br />を入れた場合と、比較してみてください。
結果がどのように表示されるのかが大切なので、記事のプレビュー機能を使って行間がどんな感じになっているのか確認しながら設定すれば安全です。
実はこの記事、カエレバカスタマイズの一環なのです。
カエレバのリンクをカッコヨク表示したくていろいろいじっているうちに、
line-heightで行間を調整する方法にたどり着きました。
外部リンク：
・【新】アメブロの記事本文をカスタマイズする方法｜アメブロカスタマイズで人が集まるブログ作り
枠線なしで、
行間の高さだけを設定することができます。
こんどは、line-heightを「1」にしてみます。
この部分は「line-height:1」に設定してあります。
行と行の間に空間がなく、
基本の改行幅1.4よりも行間がつまっています。
行と行の間に空間がなく、
基本の改行幅1.4よりも行間がつまっています。
行間の高さ＝文字の高さ になっているので、当然スキマはゼロです。
こんな読みにくい表示は実際には使えませんが、こんなふうになるという見本です。
あとは、数値の部分を変更しながらプレビューを確認すると、ちょうどいい行間が見つかるでしょう。
２分の１改行（改行１個だけ行間を設定する。）
HTMLの改行タグは<br /> です。<br />を line-height:0.7つきの<div>タグではさんでやると、２分の１改行ができます。
<div style="line-height:0.7"><br /></div>
サンプルです。↓
２分の１改行をするためには改行タグ<br />をline-height:0.7で挟みます。
↑この部分に、２分の１改行が入れてあります。改行を入れずに右端で折り返した場合は、このように基本の改行幅になります。
↑普通の改行タグ<br />を入れた場合と、比較してみてください。
使用するエディタやブラウザーによって結果が違ってきます。
この記事は、ファイアフォックスを使って、FC2ブログの記事エディタで記事を編集しています。結果がどのように表示されるのかが大切なので、記事のプレビュー機能を使って行間がどんな感じになっているのか確認しながら設定すれば安全です。
実はこの記事、カエレバカスタマイズの一環なのです。
カエレバのリンクをカッコヨク表示したくていろいろいじっているうちに、
line-heightで行間を調整する方法にたどり着きました。
外部リンク：
・【新】アメブロの記事本文をカスタマイズする方法｜アメブロカスタマイズで人が集まるブログ作り
初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。 RSSリーダーとは？⇒ ＲＳＳってなんなの？
リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
ツイッター でも、更新案内を流しています。 RSSリーダーとは？⇒ ＲＳＳってなんなの？記事末尾110posted by +M Inamura (水村亜里)
- 関連記事
-
- 研Ｑ39.黒猫ブログパーツねこちか２とマーキーくんの貼り付け方。
- 研Ｑ38.ブログに何を書けばよいか？⇒ブログは雑誌であると考えると楽になります。
- 研Q34.ブログの行間をHTMLタグで部分的に詰める方法
- 研Ｑ25.ブログのリンクって何？
- 研Ｑ24.アメーバブログは商用利用禁止です。
Tweet
