ワードプレス

【WordPress】行間幅・改行幅を広げるやり方【CSSコードで簡単】

WordPressで記事を書いているんだけど、文章の改行の幅が狭いから広くて見えにくいなぁ。改行スペースを広くする方法ないかな?

そんな悩みにお答えします。

今回は「WordPress」テーマJINで文章の『行間幅』・『改行幅』を広げるやり方を紹介します。

.entry-content p {line-height:〇〇;
margin-bottom: 〇〇em;}

 

このコードをCCSコードに貼り付ければ簡単に改行の幅を広げることができますよ。

それでは詳しくみていきましょう。

スポンサーリンク

文章を読みやすくする『行間幅』と『改行幅』

改行する目的ってなんだろう?そもそもなぜ改行するのかな?

それは文章を読みやすくするためにします。

ポチ
ポチ
下の例で見ていきます。

改行してない場合の文章は

このように文字列がつながっていています。

これを改行すると、

このようにスッキリして、文章も読みやすくなります。

『行間幅』・『改行幅』を広くすると見た目がどうなる?

下の画像が『行間幅』と『改行幅』です。

『行間幅』・『改行幅』を広くすると、どのようになるのか見て行きます。

まずは『行間幅』の場合です。

『行間幅』が狭い(JINのデフォ)

『行間幅』が広い

このように見た目が違います。

次に『改行幅』の場合です。

『改行幅』が狭い(JINのデフォ)

『改行幅』が広い

こちらも改行の幅が広くなっていることが分かると思います。

JINのテーマは読者への配慮がされているテーマなので、元々の『行間幅』・『改行幅』は広めに設定されています。

しかし最近よく見かけるnoteなどの改行幅は広いからそれはトレンド?なのかもとか思ってたりするわけです。

だから改行の幅を広くしたいなと思いました。

スポンサーリンク

【WordPress】『行間幅』・『改行幅』を調整するやり方

今回は、ワードプレスJINのテーマで改行の幅を調整するやり方です。

別のテーマの場合は調整できないかもしれないのでご了承ください。

貼り付けるコードは下記になります。

.entry-content p {line-height:〇〇;
margin-bottom: 〇〇em;}

 

『行間幅』を調節する場合は、「line-height:〇〇;」の〇〇部分に数字を入れます。

(例:2~3など)

『改行幅』を調節する場合は、「bottom: 〇〇em」部分の〇〇に数字をいれて調節します。

(例:1~3など)

僕の例を載せておきます↓

entry-content p {line-height:2;
margin-bottom: 1em;}

 

このコードを、下記の場所に調整コードを貼り付けます。

「ダッシュボード」「外観」「カスタマイズ」「追加CSS」

ポチ
ポチ
画像だと下記の手順で貼り付けます。

これで、記事内の『行間幅』・『改行幅』を広く調節することができます。

参考にさせていただいた記事

今回はこちらの記事を参考にさせていただきました。

https://www.kosugi500.work/jin-gyoukan/(外部リンク)

↑小杉社員のセミリタイア教室

とってもわかりやすく解説されているので、とても参考になりました。

まとめ

いかがでしたか?

「WordPress」テーマJINで『行間幅』・『改行幅』を広く調節するやり方を見てきました。

見やすいブログにして、いろんな読者の人にとって見やすいサイトにしていきたいですね。

最後まで読んでいただき、ありがとうございます。

 

ポチ
ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です