文字を読みやすくしてアクセスUP

スポンサーリンク


ブログの内容以前に、小さすぎる文字や、くっつきすぎる文字というのは読みづらい!

読みづらいページというのは、最後まで読んでもらえないんじゃないだろうか?だから、次のページへ進んで、もっとたくさん読んでもらうということが出来ない。

例としてTomさんの、まだ発売されていない小説「キャサリンの瞳」の冒頭を例に見てみます。


通常表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。

「いらっしゃい。待ってたわ」

キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。

「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


この小説はそのうち大手出版社より発売されると思いますが、まだここまでしか書いていないので、いつ発売されるかは未定です。

文字の大きさは font-size で変更する

こんな名作でも、文字が小さくなるだけで読みにくくなります。


文字を60パーセントの大きさで表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。

「いらっしゃい。待ってたわ」

キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。

「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


この文字サイズで何十行もあったら、途中で読むのがイヤになってしまうと思います。

文字を大きくするにはスタイルシートの font-size を変更します。

ページ全体の文字サイズを2倍にする場合

body{
	font-size:200%;
}

記事の文字だけ2倍の大きさにする場合

div#entries{
	font-size:200%;
}

詳しい記入場所、記入方法は次の記事にあります。

適切な場所で空行を入れよう

そして、こんな名作でも空行をなくすだけで読みにくくなってしまいます。


空行なし

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。
「いらっしゃい。待ってたわ」
キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。
「男を捜して欲しいの」キャサリンは言った。
私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


適切な場所で改行を追加するだけで読みやすくなるのではないでしょうか?

行と行の間は line-height で調節

1行の文字数が長いと、改行を入れなくても複数行で表示されますが、その場合の行間は line-height で調整します。

line-height:100% だと行間の隙間なし、line-height:120% だと、文字の上と下に10%ずつ隙間が出来ます。


line-heightを100%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを120%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを140%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)


line-heightを160%で表示

キャサリンの働く店は本牧にある。店の名は「エンジェル」、スナックだ。七月の午後五時はまだ明るい。酒を飲むには早すぎる。しかし、店を開ける前に話を済ませたいというのがキャサリンの希望だった。店のネオンはついていなかったが、ドアを押すと開いた。中にいるのはひとり。薄暗い灯りの中でキャサリンがカウンターを片付けていた。「いらっしゃい。待ってたわ」キャサリンの髪は茶色、瞳は黒。名古屋出身の十九歳。本名は知らないが日本人だ。私は黙ってカウンターに座った。キャサリンは置いてあったバッグの中を探すと封筒を取り出し、私の前に置いた。「男を捜して欲しいの」キャサリンは言った。私は封筒を手に取り、中を見た。一万円札が束になっている。(つづく)

ページ全体の文字サイズを2倍にする、かつ記事の行間だけを160%にする場合

body{
	font-size:200%;
}

div#entries{
	line-height:160%;
}

関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください