計測メジャー

FC2ブログの行間を詰める方法を解説していきます。

記事本文の文章の固まり同士の幅を詰めたり、また逆に広げたりすることはカンタンにできます!

【下準備】どこの幅を調整したいか、最初にそれを確認しよう

FC2ブログの記事

行間の調整と言っても以下のように調整する箇所は2つあります。
[imglist icon=”dot1″ color=”orange”]

  • 行間
  • 段落間

[/imglist]以上の2つですね。

どこの幅を詰めたり広げたりしたいか、まずそれを確認してください。

単純に「行間」を調整したい場合、文章のひとかたまりである「段落間」を調整したい場合、やり方はそれぞれ違いますので対象に合った方法をご覧ください。

FC2ブログの行間を詰める(調整する)方法

FC2ブログの本文の「行間」を詰めたり広げたりする調整方法を解説していきます。

1. テンプレートの設定画面を開く

ご自分のFC2ブログにログインしメインメニューの「テンプレート[PC]」か、左端の設定の「テンプレートの設定」をクリックします。

メインメニュー

2. line-heightと書かれた箇所を探す

スタイルシート編集の欄内にあるline-heightと記されている部分を探します。

スタイルシートの編集

キーボードのCtrlキーとFキーを同時に押すとブラウザに検索バーが表示されますので、そこにline-heightと入力して検索すると該当箇所がすぐに見つかります。

3. line-heightの値を調節する

line-heightの値を小さくすると行間は狭まっていきます。(逆に大きくすると広がっていきます)

通常は1.3~1.6が読みやすい幅だと言われていますが、ここでは試しに行間を詰めるため「1」に設定変更してみます。

行間の調整

数字を変更したら、その下の更新ボタンをクリックします。

ここまで済んだらブログを開いて確認してみましょう。

記事の確認

このように先ほどより行間が狭まっていることが確認できるかと思います。

逆に幅を広げたい場合は当初の数値(1.4)より大きな数値を入力すればOKです。

1より小さな数値(0.9など)に設定すると行が重なってしまいますので、基本的に1以上を設定しましょう。

FC2ブログの段落間を詰める(調整する)方法

次はFC2ブログの本文の段落と段落の間のスペース(段落間)を詰めたり広げたりする方法を解説します。

1. 記事の文章をPタグで囲む

この段落間を調整するには「記事自体」にすこし手を加える必要があります。

本文へのPタグの挿入

このようにすでに投稿済みの記事、またはこれから投稿する記事を段落ごとに<p></p>で囲んでください。

段落の頭に<p>を置き、段落の最後に</p>を置きます。

これは通称Pタグといって、囲んだ文章をひとつの段落として指定するために使用するものです。

2. スタイルシートにコードを貼り付ける

Pタグの設定が済んだら先ほどと同じように「テンプレートの設定」を開いて、スタイルシートの編集の欄の一番下に下記のコードを貼り付けてください。

[normal_box2 color=”orange” border=”b2″]p {
margin-top:5px;
margin-bottom:-8px;
}[/normal_box2]

位置調整タグの書き込み

書き込んだら更新ボタンをクリックします。

3. ブログを開いて確認する

ブログを開いて記事を確認してみましょう。

このように段落間の幅が詰まっていることが確認できますね。

記事の段落間の確認

もし、もっと段落と段落の間を狭めたいならmargin-bottomの-8を-10~-15のように書き換えて下さい。

逆に段落間を広げたい場合はmargin-bottomのマイナスを取って10~30など数字を大きくしてみてください。
 

まとめ

幅が広すぎても狭すぎても、読みにくいのがブログの記事。

何度も数値を変えたりして、自分にとって読みやすいと思える「狭さ・広さ」を見つけてみてください。