2019/10/31 (更新日: 2020/03/11)

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

WORDPRESS

こんにちは、ゾノです。

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

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

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

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

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

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

本記事の内容

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

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

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

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

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

以上です。

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

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

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

CSSの１番下に貼り付ける

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

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

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

コピペ用ソース

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」になるということです。

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

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

動画解説

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

【作業PC】ブログ運営で使うパソコンはMacがおすすめ【初心者】

ブログ運営のパソコンは何が良いかと迷っていませんか？結論はMacです。音声収録や画面録画で操作解説をする場合はMac純正アプリが神です。これから情報発信していこうと考えている人のパソコン選びの参考になると思いますのでチェックしてみてください。

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

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

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

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

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

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

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

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

【完全初心者】ブログに反応がないから辞めたいです【本気になれ】

「ブログに反応がないがないので、記事が書けないです」という相談に対しての回答は、「種まきをしよう」です。路面店でお店を出店すればチラシ配りとかするじゃないですか。それと同じ。あとは最低100記事は書かないと読者の反応なんて分析できません。ブログはとにかく頭と手を動かす作業の繰り返しです。

【無料開催】人気オンラインティーチャー養成講座

オンラインビジネスの悩みを解決して、効果的に前進するワークショップです。 「オンライン開催」なので、ご自宅からお気軽にご参加いただけます😌

» 今すぐ無料参加（今夜21時〜放送）

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

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

おすすめコンテンツ

• 【最短１日で完成】ベース構築キット【早期的に、環境を構築しよう】
• ブログ初期設定の完全代行＆９０日間の個別講義【スタートキット】

無料コンテンツ

• 先生2.0 〜毎日感謝される働き方を作ろう〜
• 【３日間の短期集中】LINEで学べるメディア運営
• ブログ記事テンプレート【基本構造】（無料配布）
• ３０分の無料相談会＆体験レッスン（オンライン開催）
• 【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ

有料コンテンツ

• 【１人で完結】完全在宅「リモートワークビジネス講座」
• 【ネット集客】『01blog Boot Camp』【７日間プログラム】
• 【最短１日で完成】ベース構築キット【早期的に、環境を構築しよう】
• 【１つ目の壁】ブログ100記事パートナー【４ヶ月で乗り越える】
• ブログやメディア運営を学べるオンラインスクール【初心者歓迎】

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

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

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

僕は、こんな人です

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

特別配信【先生2.0】毎日感謝される働き方を作ろう【無料で受講できる特別講座】

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

ワードプレス学習用

• facebook
• Tweet
• hatebu
• LINE
• Read Later