なんでも練習帳

なんでも練習帳

読みやすいブログ作りのヒント

読みやすいブログのためのスタイルシート活用術

色々なブログを訪れたとき、思わず読んでしまうページってありますよね。そのページのほとんどが読みやすいページです。どうすれば読みやすくなるか少し私が使っているテクニック?を少々書いておきます。良かったら参考にしてください。

何も設定していない場合

株初心者のワシが競馬の経験を生かしながら株を取引し成り上がっていけたらいいなぁというブログです。もちろん、土日には競馬も若干予想します。
これから株取引を始められる方のお役に立てるよう日記をつけていきたいと思います。

行間が狭く読みづらい感じがします。

行間を150%に設定する

株初心者のワシが競馬の経験を生かしながら株を取引し成り上がっていけたらいいなぁというブログです。もちろん、土日には競馬も若干予想します。これから株取引を始められる方のお役に立てるよう日記をつけていきたいと思います。

行間が広くなり読みやすくなりました。
<p style="line-height:150%;"> 本文を入れる </p>
日記を書き込む時にこうしてタグで挟んで書き込むと行間が広がります。
小さい文字はあまり広がりすぎないよう120%ぐらいで調整してみてください。

余白を入れる

株初心者のワシが競馬の経験を生かしながら株を取引し成り上がっていけたらいいなぁというブログです。もちろん、土日には競馬も若干予想します。これから株取引を始められる方のお役に立てるよう日記をつけていきたいと思います。

余白が入りもう少し読みやすくなりました。
<p style="line-height:150%;padding:20px;"> 本文を入れる </p>
paddingというプロパティを追加して上下左右の余白を20pxづつ取るようにしてみました。自分のブログに合わせて調整してみてください。

余白を調整する

株初心者のワシが競馬の経験を生かしながら株を取引し成り上がっていけたらいいなぁというブログです。もちろん、土日には競馬も若干予想します。これから株取引を始められる方のお役に立てるよう日記をつけていきたいと思います。

上下の余白が間延びした感じになったので上下の余白を5pxに調整しました。
<p style="line-height:150%;padding:5px 20px;"> 本文を入れる </p>
padding:5px 20px;であれば上下5px左右20pxの余白を取るを言う意味です。上下左右すべて設定可能ですのでスタイルシートを勉強して色々工夫してみてください。



© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: