こんにちわ。
アメブロシンプルカスタマイズ制作DaitenshI+（ダイテンシプラス）のあさくらです。
アメブロカスタマイズ方法は、既に沢山の方がやっていることなので、今更わたくしが記事にした所で…
と思って試しに講座をはじめてみたら、思った以上の反応で嬉しい限りです。
これを機会に読者登録頂きました皆さま、ありがとうございます
こちらでは
『シンプル』『簡単』『見やすい』
をテーマにご紹介していきます。
教えてほしい事などありましたら、遠慮なく、メッセージやコメントを頂ければ幸いです。
前回は、『フォントの書体を変更』しました。
今日は、早速フォントを大きく見やすくしたいと思います！
今回、ページ全体の文字を大きくするのではなく、記事の部分のみ大きく、見やすくしてみようかと思います。
まずは、『ブログを書く』⇒『デザインの変更』⇒『CSSの編集』でCSSの編集画面を開きましょう！
■CSSを編集する前に
ウッカリ間違えてしまったら大変です
編集前に必ず、全部をコピーして、メモ帳にコピーしたCSSをペーストしておきましょう！
ではいきますよ。
【カスタム可能】ベーシックの場合のCSSファイルです。
大体、320行目ぐらいにこうゆう部分があるかと思います。
------- C S S -------
.entry .contents{
margin:15px 0 15px 0;
}
------- C S S -------
ここにフォントサイズと行間の指定を追加してみましょう。
↓ここの部分を追加します。↓
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
↓追加するとこんな感じになります。↓
------- C S S -------
.entry .contents{
margin:15px 0 15px 0;
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
}
------- C S S -------
font-size: 14px;
この部分がフォントの大きさを指定します。
標準では12pxになっているので、ここを12より大きい数字に変更しましょう。
14pxぐらいでだいぶ見やすくなると思います。
line-height: 2.5em;
この部分が行間です。
ココが実は重要で、あまり行と行の間が詰まっていると、読みにくくなります。
小数点で細かく出来ますが、0.5単位ぐらいで微調整をして見るのもよいかと思います。
今回は2.5emにしてみました。お好みでもう少し感覚を広げたい人は数字を大きくしてみるのもよいでしょう。
ですが、あまり広げ過ぎると読みにくくなりますので、ほどほどに。
↓最初に比べて見やすくなりましたよね↓
文字を少し大きくして、行間をとるだけで、見やすく、読みやすくなります。
わざわざ1行改行して行間を広げなくても、これで見やすくなります。
どこを編集していいかわからない人は、こちらをCSSの一番下にコピペをしてください。
------- この下から -------
.entry .contents{
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
}
------- この上まで -------
フォントの書体を変えて、フォントを大きくし、行間をとるだけで、見違えるほど見やすく、読みやすくなります。
よかったら試してみてください。
フォントを大きくしたので、記事のエリアが少し窮屈になりました。
次は、ちょっとレベルアップして、記事の幅を広げてみたいと思います。
何かご質問があればコメント欄にご記入ください。
アメブロシンプルカスタマイズ制作DaitenshI+（ダイテンシプラス）のあさくらです。
アメブロカスタマイズ方法は、既に沢山の方がやっていることなので、今更わたくしが記事にした所で…
と思って試しに講座をはじめてみたら、思った以上の反応で嬉しい限りです。
これを機会に読者登録頂きました皆さま、ありがとうございます
こちらでは
『シンプル』『簡単』『見やすい』
をテーマにご紹介していきます。
教えてほしい事などありましたら、遠慮なく、メッセージやコメントを頂ければ幸いです。
前回は、『フォントの書体を変更』しました。
今日は、早速フォントを大きく見やすくしたいと思います！
今回、ページ全体の文字を大きくするのではなく、記事の部分のみ大きく、見やすくしてみようかと思います。
まずは、『ブログを書く』⇒『デザインの変更』⇒『CSSの編集』でCSSの編集画面を開きましょう！
■CSSを編集する前に
ウッカリ間違えてしまったら大変です
編集前に必ず、全部をコピーして、メモ帳にコピーしたCSSをペーストしておきましょう！
ではいきますよ。
【カスタム可能】ベーシックの場合のCSSファイルです。
大体、320行目ぐらいにこうゆう部分があるかと思います。
------- C S S -------
.entry .contents{
margin:15px 0 15px 0;
}
------- C S S -------
ここにフォントサイズと行間の指定を追加してみましょう。
↓ここの部分を追加します。↓
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
↓追加するとこんな感じになります。↓
------- C S S -------
.entry .contents{
margin:15px 0 15px 0;
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
}
------- C S S -------
font-size: 14px;
この部分がフォントの大きさを指定します。
標準では12pxになっているので、ここを12より大きい数字に変更しましょう。
14pxぐらいでだいぶ見やすくなると思います。
line-height: 2.5em;
この部分が行間です。
ココが実は重要で、あまり行と行の間が詰まっていると、読みにくくなります。
小数点で細かく出来ますが、0.5単位ぐらいで微調整をして見るのもよいかと思います。
今回は2.5emにしてみました。お好みでもう少し感覚を広げたい人は数字を大きくしてみるのもよいでしょう。
ですが、あまり広げ過ぎると読みにくくなりますので、ほどほどに。
↓最初に比べて見やすくなりましたよね↓
文字を少し大きくして、行間をとるだけで、見やすく、読みやすくなります。
わざわざ1行改行して行間を広げなくても、これで見やすくなります。
どこを編集していいかわからない人は、こちらをCSSの一番下にコピペをしてください。
------- この下から -------
.entry .contents{
font-size: 14px; /*フォントサイズ*/
line-height: 2.5em; /*フォントの行間*/
}
------- この上まで -------
フォントの書体を変えて、フォントを大きくし、行間をとるだけで、見違えるほど見やすく、読みやすくなります。
よかったら試してみてください。
フォントを大きくしたので、記事のエリアが少し窮屈になりました。
次は、ちょっとレベルアップして、記事の幅を広げてみたいと思います。
何かご質問があればコメント欄にご記入ください。