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

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

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

よしたか

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の簡単な解説

まとめ

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

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

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

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

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

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