アメブロの記事本文の行間を広げる方法。空間を広げて文字を読みやすくすることで読者にメリットがある

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
記事の行間があった方が間があって読みやすいんですが設定することはできますか?

よしたか
CSSを触ったら全体がきれいに行間開きますよ。

アメブロ記事本文の行間設定を紹介します。

この記事を読むことで
  • アメブロ記事の行間を開けるCSSがわかります。
  • 行間が空くことによってリストなども見やすくなります。

アメブロの行間を広げる設定方法

アメブロの行間設定は全体に効果有り

行間設定は、記事だけでなく

サイドバーにも活用できます。

 

  • 読者一覧
  • お気に入りブログ一覧

も行間設定ができます。

 

リストがすっきり見やすくなりますので

活用することをオススメします。

アメブロの行間の見本

 

行間はCSSの

「line-height」

という要素で設定します。

 

3つサンプルを用意していますので

ご自身がお好きな行間を選んでCSS設定して下さい。

 

■ line-height:1.0の場合

 

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

 

<div style="line-height:1.0; ">昔々あるところにおじいさんとおばあさんが住んでいました。<br>ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。<br>おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。<br><br>おばあさんはその桃を拾い上げ、家に持って帰りました。<br>おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。<br>「よし、この子は桃から生まれたから桃太郎と名付けよう」</div>

 

■ line-height:1.5の場合(標準仕様)

 

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

<div style="line-height:1.5; ">昔々あるところにおじいさんとおばあさんが住んでいました。<br>ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。<br>おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。<br><br>おばあさんはその桃を拾い上げ、家に持って帰りました。<br>おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。<br>「よし、この子は桃から生まれたから桃太郎と名付けよう」</div>

 

■ line-height:2.0

 

昔々あるところにおじいさんとおばあさんが住んでいました。
ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。
おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。

おばあさんはその桃を拾い上げ、家に持って帰りました。
おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。
「よし、この子は桃から生まれたから桃太郎と名付けよう」

<div style="line-height:2.0; ">昔々あるところにおじいさんとおばあさんが住んでいました。<br>ある時おじいさんは山へ芝刈りにおばあさんは川へ選択に出かけました。<br>おばあさんが川で洗濯をしていると川上から大きな桃がどんぶらこと流れてきました。<br><br>おばあさんはその桃を拾い上げ、家に持って帰りました。<br>おじいさんがその桃を包丁で二つに割ったところ中から元気な男の子が出てきました。<br>「よし、この子は桃から生まれたから桃太郎と名付けよう」</div>

 

アメブロの場合は以下のCSSを入れます。

以下のソースをCSSに追加すると行間設定ができます。

CSSコードコピペ

.articleText,.subContents {
font-size:14px;
line-height:1.8;
}

CSSの簡単な解説

CSSコード解説

  • font-size:16px;
    ⇒フォントの大きさ
  • line-height:1.8;
    ⇒文字の高さ(行間)⇒数字を大きくすると広くなります。

まとめ

アメブロの行間設定について

今日は簡単ですがまとめています。

 

コピーペーストでも活用できるので

ぜひ簡単なコピペで自分のアメブロをカスタマイズしていって下さいね(^^)

 

メルマガを発行しているので

ぜひ登録お願いします(^^)

 

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事