WordPressで行間が狭いし詰まる。スタイルシートcssで行間を広くする設定方法を初心者向けに解説

WordPressで行間が狭いし詰まる。一行空ける設定方法を初心者向けに解説 Wordpressブログの管理方法

【初心者向け】WordPressの行間を広げる方法を解説!

 

【悩み】段落が変わっても行間が狭いために見栄えが悪い。

【具体案】スタイルシートを編集して行間を広げる。

 

スタイルシートを編集して、WordPressの文章の行間を広げる方法を説明します。

 

WordPressでブログを書いていると、段落が変わっても行間が狭くて見栄えが悪い場合があります。

行間狭すぎ

 

これは採用するWordPressのテーマにもよるのですが、デフォルトで設定された行間を少しでも広げたい場合もあるでしょう。

 

WordPressの文章、行間狭すぎる問題

上記の画像を見て頂けると分かるのですが、上の行、下の行の文字が重なっている箇所があります。

記事を見に来てくれた訪問者の方に見にくい文章を読ませることになるので、修正することはできないのでしょうか?

ビジュアルモードなら連続改行で解決するけどテキストモードだと対処法は?

これは、ビジュアルモードを利用して「Enterキー」を押して改行をすれば、行間を整え、段落を入れることで読みやすく調整することができます。

ビジュアルモードは簡単なんですよね

 

 

 

ビジュアルモードで記事作成なら「Enterキー」を利用して段落、行間の調整をすると上記の画像のように見やすい文章になります。

特に行間は、ビジュアルモードで大体好みで調整できます。

私も基本的にビジュアルモードを使ってます

 

テキストモードでゆったりした行間を作れないのが面倒

ただし、テキストモードの愛用者。

テキストモードで記事を作りたいとき

 

テキストモードでも行間を適切に調整するには、スタイルシートの変更が必要です

テキストモードで行間を広げるにはスタイルシートcssの編集をする

いじるの怖い・・・

ですが具体的に説明するので大丈夫ですよ

スタイルシートを編集して行間を調整する(空ける)手順

テキストモードでも段落を変えたときに行間を適切に調整する為に、WordPressのスタイルシートを編集します。

 

この編集はWordPressのテーマ「Simplicity2」のスタイルシートがベースになりますが、他のテーマでも編集箇所は共通です。

※ テーマによりスタイルシートの記述が異なる場合があります。基本は同じ

 

編集方法を説明します。

まず、管理画面の「外観」⇒「テーマの編集」をクリックしてください。

 

するとスタイルシートの編集画面が開きます。

 

次にスタイルシート内を一度、どの行でもいいのでクリックしてから「ctrl+f」を押すと、左上に検索窓が出てきます。

 

検索窓に「line-height:」と打ち込みます。

するとスタイルシート内に該当の箇所が表示されます。

 

こちらの「line-height:90%」と記載された箇所でここの数字を調整することで「行間」を変えることが可能です。

「90%」を「170%」に変えてみます。

 

FAQ 「line-height:」出てこないよ→子テーマだとないかも

検索しても出てこない場合は、子テーマである可能性が高いです

 

そういう場合は、親テーマからコピーしてきましょう

こうした

body{}の記述をまるまる子テーマのスタイルシートにコピペして、line-heightを変えましょう

FAQ line-height: たくさんヒットしすぎてどこを変えればいいかわからない

反対に「line-height:」の検索で、ヒットする箇所が数ヶ所出てくる可能性があります。

 

その場合は

body{}

で囲まれた範囲にある「line-height:」を調整しましょう

さっきと同じ画像です

 

単位が「%」じゃない時は?

※テーマにより数値の単位がpx em exの場合があります。ややこしく感じられた場合は単位を消してしまい「line-height:1.7;」と数値だけ記入します。

 

なんで170%?

私の好みです。

行間の広さはとりあえず私は「1.7」や「1.8」くらいをおすすめしますが、数値を変えて調整してみてください。

これは完全にあなたの好みで決めて結構です

 

そして「ファイルの更新」をクリック。

 

【注意】更新したらちゃんと確認しましょう

スタイルシートは記述を間違えるとデザインが崩れる可能性があります。一応、バックアップを取っておいてください。

↑正直言うと、私はスタイルシートをいじるときにバックアップは取りません。function.phpなどと違って、取り返しのつかないバグはめったに起こらないからです。
でも責任がとれないので、不安ならとっておいてください。(せめてメモ帳にまるごとコピペしておいてください)

 

結論:WordPressの行間を広げるにはスタイルシートでline-height:を1.7に変更

ファイルを更新」した後、早速、テキストモードから先ほどの内容をプレビューで確認してみます。

プレビューで確認すると下記の画像になります。

 

比較してみましょう。スタイルシートを編集する前の文章です。

 

うん、広くなりましたね

 

 

「テーマの編集」をいじったら、必ず表示を確認しましょう。思わぬ表示崩れなどが起きてる可能性があります

 

表示の確認方法は、ふつうに記事を見ることです。どの記事でもいいです

管理画面から編集モードで見るのではなく、閲覧者として実際の表示を確認しましょう

テキストモードで記事作成をしたときに、段落間の行間が狭くて詰まっている

行間を広げたいのであれば、スタイルシートを編集することで解決できます。

 

基本的にWordPressのテーマは行間はちょうどよい幅で調整はされているのですが、どうも気になるという方は、調整してみてください

 

以上、WordPressで行間が狭いし詰まる。スタイルシートcssで行間を広くする設定方法を初心者向けに解説でした

感想・コメントをお気軽にどうぞ