FC2の行間を詰める方法@本文の行の幅&段落の幅を調整

目安時間:約 5分
  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

計測メジャー
FC2ブログの行間を詰める方法を解説していきます。

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

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

行間の調整と言っても以下のように調整する箇所は2つあります。どこの幅を詰めたり広げたりしたいか、まずそれを確認してください。

FC2ブログの記事

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

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

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

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

メインメニュー

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

スタイルシートの編集

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

3. このline-heightの値を小さくすると行間は狭まっていきます。通常は1.3~1.6が読みやすい幅だと言われていますが、ここでは試しに行間を詰めるため「1」に設定変更してみます。

行間の調整

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

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

記事の確認

このように先ほどより行間が狭まっていることが確認できるかと思います。逆に幅を広げたい場合は当初の数値(1.4)より大きな数値を入力すればOKです。

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

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

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

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

本文へのPタグの挿入

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

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

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

2. Pタグの設定が済んだら先ほどと同じように「テンプレートの設定」を開いて、スタイルシートの編集の欄の一番下に下記のタグを書き込んでください。

p {
margin-top:5px;
margin-bottom:-8px;
}

位置調整タグの書き込み

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

3. ブログを開いて記事を確認してみましょう。このように段落間の幅が詰まっていることが確認できますね。

記事の段落間の確認

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

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

ちょうどよい行間と幅を見つけるには?

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

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

【今だけ】アドセンスブログ(実物)を公開中

今ならメルマガに登録していただくと、そのなかで
私が作ったアドセンスブログの実物(URL付き)を限定公開しています。

また、FC2ブログとSeesaaブログのアドセンス用テンプレートもプレゼントいたします。

アドセンスで単価が高いジャンルの探し方など、ブログではお伝えできないことも書いてますので、ぜひぜひ読んでみてください。

もちろんすべて無料です!

 メルマガへのお申し込みはこちらから








  • このエントリーをはてなブックマークに追加
  • 人気ブログランキング

コメントは4件です

  1. ryouji より:

    こんにちは。いつもありがとうございます。

    FC2を利用しているので行間の詰め方はとても参考になりました。

    利用してみたいです。ありがとうございます。

    • shimizu より:

      ryoujiさん、こんにちは。

      すこし行間を調整するだけで見た目の印象が変わります。
      ぜひやってみてください。

  2. 田中 より:

    はじめまして。
    先日、メルマガに登録をさせて頂き、テンプレートも頂きました。

    早速、ブログに設置してみましたが、Google ChromeやIEだと正常に表示されるのですが、Firefoxのブラウザで確認すると、表示がズレてしまっています。

    具体的には、フッターが真ん中あたりにズレ込み、記事と被ったような表示になってしまいます。

    FC2、Seesaaどちらも試しましたが、両方ともFirefoxではテンプレートの表示がズレます。

    これを直す方法はあるのでしょうか?
    よろしくお願い致します。

    • shimizu より:

      田中さん、はじめまして。

      Firefoxでは表示が崩れるとのことですが
      私の環境でテストした限りでは
      正常に表示されています。

      また今のところ他の方から
      同様の報告は受け取っていません。

      ・ブラウザのキャッシュを削除して試してみる
      ・ブラウザを最新版に更新してみる

      といったことを試されてみて
      もしまだ表示がおかしければ
      このページの上部メニューにある
      「お問い合わせ」からご連絡をください。

      よろしくお願い致します。

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
最近の投稿
カテゴリー
このブログを書いている人

・2010年10月よりアドセンスを開始

・2015年6月に1ブログで30万円超えを達成

くわしいプロフィールはこちら

よく読まれている記事
タグ
お問い合わせはこちらから

聞いてみたいことがあれば、お気軽にメールをください!

ブログに投票をお願いします