比較表のブロックを追加しました!
カスタマイズ

JIN:Rで段落・テキストの「行間」を広げる方法!間隔を広げてゆとりあるレイアウトに変更する

ひつじ

このページでは、 WordPressテーマ「JIN:R」での行間調整のやり方について解説します。

JIN:Rは読みやすい行間になるように調整して作り上げてるけど

  • 「もっと行間を広げたい!」
  • 「少し行間を詰めたい」

って場面もあると思う。そのやり方について解説していきます!

ひつじくん
ひつじくん

JIN:Rで段落の行間を広げる(狭くする)

追加CSSを開く

WordPressの「カスタマイズ」を開いて「追加CSS」に進みましょう!

すると、CSSコードを追加できる画面になります↓

以下のコードを追記

/*行間を広げるカスタマイズ*/
#postContent p{
margin-top:3.6rem;
margin-bottom:3.6rem;
}

このコードをそのままコピペしてください!

これで少し行間が広がりました。デフォルトは3.3remです。

うまく保存できない場合
レンタルサーバーの「WAF設定」が保存の邪魔をしている可能性があります。サーバーにログインして、セキュリティ設定の「WAF設定」をOFFにしてお使いください。

好みに合わせてコードを調整

3.6remという数字を変更すると、行間を変更できます。

  • 数字を大きくすると、行間が広がる(例:4.0rem)
  • 数字を小さくすると、行間は狭くなる(例:3.0rem)

スマホ画面もチェックしながら、コードを調整してみてね!

ひつじくん
ひつじくん

JIN:Rでテキストの行間を広げる方法

追加CSSを開く

WordPressの「カスタマイズ」を開いて「追加CSS」に進みましょう!

すると、CSSコードを追加できる画面になります↓

以下のコードを追記

/*行間を広げるカスタマイズ*/
#postContent p{
line-height:2.2;
}

このコードをそのままコピペしてください!

これで少し行間が広がりました。デフォルトは1.9の前後です。(フォントサイズによって違います。)

うまく保存できない場合
レンタルサーバーの「WAF設定」が保存の邪魔をしている可能性があります。サーバーにログインして、セキュリティ設定の「WAF設定」をOFFにしてお使いください。

好みに合わせてコードを調整

2.2remという数字を変更すると、行間を変更できます。

  • 数字を大きくすると、行間が広がる(例:2.4rem)
  • 数字を小さくすると、行間は狭くなる(例:1.7rem)

スマホ画面もチェックしながら、コードを調整してみてね!

ひつじくん
ひつじくん
他の記事も読んでみましょう
ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
BLOGCAMP

限定コミュニティへのご案内

  • 参加費は永年無料
  • ブログ仲間が作れる
  • 困ったら相談OK
  • ブログ診断のイベントあり
参加者は3,000人超え!

すでに参加してくれている方は、「BlogCamp wiki」でブログ診断(アーカイブ)の限定動画を閲覧可能です。

wiki内にブログ勉強用の動画がたくさんあります!ぜひ役立ててくださいね。

ひつじくん
ひつじくん
記事URLをコピーしました