2019/10/31 (更新日: 2022/08/09)

【コピペでOK】３分で「ブログの行間を変更」する方法【超簡単】

世界No.1の“本物のオールインワンツール”をゾノ先生と同じように使えるビデオコース「はじめてのコンテンツ作成コース（49,700円相当）」が大人気です。30日間無料の特別招待ページをご用意しているので、下のバナーをタップして詳細をご覧ください！
こちらから確認することができます↓

こんにちは、ゾノです。

この記事を書いている僕は、現役でWebデザイナー＆マーケターとして活動しつつ、ブログを運営しながら生活しています。今では、外出せずに学べるパソコン教室を運営し、ブログ初心者に特化したブログ指導活動にも取り組んでいます。

先日、下記のツイートをしました。

✅質問：ブログの行間を広めたい
✅悩み：どのサイトを見ても、解決できない

という質問があったのですが、多分どのブログにも答えは書いてあるはず。でも多くの人が解決できない理由は「シンプルじゃないから」だけかもですね

ということで、行間の広め方を解説することにしました#ブログ初心者

— ゾノ@スモール起業ビルダー (@zononakazono) October 31, 2019

✅質問：ブログの行間を広めたい
✅悩み：どのサイトを見ても、解決できない
という質問があったのですが、多分どのブログにも答えは書いてあるはず。でも多くの人が解決できない理由は「シンプルじゃないから」だけかもですね
ということで、行間の広め方を解説することにしました

本記事の内容

【コピペでOK】３分で「ブログの行間を変更」する方法【超簡単】
ブログの行間が狭すぎると、読者にストレスを与えます【要改善】
【ワンポイント】CSSは上から順番に読み込まれます【アドバイス】

文字情報にストレスを感じる人は、動画でどうぞ

【コピペでOK】３分で「ブログの行間を変更」する方法【超簡単】

ブログの行間隔を一瞬で変える方法を簡単に書きます。
手順は下記のとおりです。

文字サイズ、色、段落の余白、行の高さを決める
（自動変換ツールを使ってもOK）
CSSの１番下に貼り付ける

以上です。

文字サイズ、色、段落の余白、行の高さを決める（自動変換ツールを使ってもOK）

line-height → 行の高さ
margin → 段落間の余白
font-size → 文字の大きさ
color → 文字の色

CSSをよく理解していない人は、下記のツールを使ってもオッケイです。
でも最終的には理解したほうがいいと思います。
» [CSS] テキストの文字サイズ・行間確認用

CSSの１番下に貼り付ける

とりあえず、下記のソースコードをCSSの１番下に貼り付ければオッケイです。

下記の、200%をいい感じの間隔になるまで、変更してみてください。

更新：コピペしても変わらない場合

200% → 600%とか、大きい数字に置き換えてやってみてください。

コピペ用ソース

p{
	line-height:200%;
}

これで完了です。

ブログの行間が狭すぎると、読者にストレスを与えます【要改善】

ブログの行間が狭すぎると、言うまでもなく読者にストレスを与えます。

ブログは、教科書 or 辞典ではありません

ブログの行間を詰めて書くスタイルもあるので、完全否定ではないのですが、個人的意見を述べると、行間は広めにとってあげることがおすすめです。

なぜなら、ブログは教科書や辞典ではないからです。
読者が眉間にシワを寄せならが読むブログが好まれるわけがありません。

質問：どっちが見やすいですか？

回答：たぶん、下のはずです

読者にストレスを与えない文章を書くコツ

このコツについては、下記記事でガッチリと解説しているので、詳しく学びたい人は読んでみると参考になると思います。

概要だけ知りたい人は、このポイントだけを把握しておけばオッケイです。

結論から先に述べる
一文を長くせず、改行を多めにする
頻繁に箇条書きを使う
漢字を多く使わずに「、」を多めに使う
毎日ブログを書く

理想の一文の文字数：４０〜５０文字

【ワンポイント】CSSは上から順番に読み込まれます【アドバイス】

本記事で、もっとも大事なポイントはCSSについての基礎を知ることです。

大事なことは、下記のとおりです。

CSSは下に書いたものが、優先して反映される
Macの人は、「Safariで検証」してみればOK

CSSは下に書いたものが、優先して反映される

CSSは、下に記述した内容が優先してWeb上に反映されます。

例えば、こういうことです

p{
	font-size: 16px;
	color:#333333;
	font-weight: bold;
}

p{
	font-size:18px;
	font-weight: bold;
}

上記の場合、フォントサイズは「18px」になるということです。

CSSが反映されない、、、と困っている場合は、大体こういう部分に理由があるので、落ち着いて対処しましょう。

Macの人は、「Safariで検証」してみればOK

ブログ運営をして、いろんなコンテンツを作っている場合にはMacを推奨しています。
たとえば、Safariでこんなことができるからです。

動画解説

僕がMacをおすすめする理由に関しては、下記の記事にて解説しておりますので、パソコンを変えようかなと思っている人は、ぜひ参考にしてみてください。

見やすいブログを、常に追求しよう

ブログの行間などを意識して、常に見やすいブログ運営を意識しましょう。

質問：ブログを書いて、読み返していますか

自分で書いたブログを、何度も何度も読み返していますか。

ちなみに、僕は何度も読み返します。
今日も良いブログを生産したなぁ、、、とビールを飲みつつ、夜を過ごします。

ぶっちゃけ、これくらいブログに愛着がないと、キビシイのかも、、、と最近思うので、みんなもまずは自分のブログのファン第１号になるべきですよ。

ブログに反応がないから辞めたい、、、なんて言葉も聞きますが、シンプルに反応する価値がないブログだから反応がないだけです。

ちょっとキツい発言をしましたが、未来をためを思って発言した愛のムチです。

ともに頑張りましょう、ブログライフ😌

最後までお読みいただき、ありがとうございます。「オールインワンWeb集客サイト完全レポート」というレポートが大人気です。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

私は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Kajabi特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます

無料配信【先生2.0】完全在宅＆好きなことで稼ぎ毎日感謝される働き方【無料】

人気記事【Zoom】会議などの案内メールのテンプレート【セミナー時にも使える】

ワードプレス学習用