CSSコーディングをしている時に結構悩まされるのがフォント設定。
使い方によって読みやすくなる、魅せる文字になるかどうか決まってきます。
そこで、このブログで適用しているフォントについてご紹介していきます。記事に長文が多く、シンプルなデザインのブログには適していると思いますので、ぜひ参考にして頂ければと思います。
このブログでは、部分的にフォント設定を変えております。全部で３パターン。
分けている理由としては、
実際にご覧頂いた方が分かりやすいですよね。
【CSS】
私のブログに関しては、長文の記事が多いので出来る限り文字が重たくならないようなフォント設定にしております。
他に『メイリオ』という読みやすいフォントと呼ばれているものもありますが、私としてはちょっと扱いづらいところもあり、記事部分には使用しておりません。
これがメイリオに設定したものです。
文字がちょっと重く見えてしまい長文を読むには厳しいかと。
そこでサイズダウンしてみました。
でも、ボリュームとしてはあまり変わっていないような気がします。これより小さくするとさらに読みづらくなりますのでダメでした。
サイズは変えず、文字色を薄くしてみたら重たさは感じませんが…。
今度は色が薄くなった事により読みづらくなっているような気がします。
これらの理由により、メイリオは設定しておりません。私の知識不足かもしれませんが読みやすく設定できなかったので、無理矢理メイリオにするのは良くないかと。
それにメイリオは文字をきれいに魅せるには適していますが、文章を読みやすくするために作られてるフォントではないように私は思うのです。
そこでこのブログでは、記事フォントとして『ＭＳ Ｐゴシック』に設定してあります。
一般的によく使用されているフォントでもありますので、読者の親しみやすさでいっても最適なフォントではないでしょうか。気がついたら巷で有名なブログでもほとんど『ＭＳ Ｐゴシック』を採用しているので、皆さん同じように思っているのかもしれません。
【CSS】
ここでメイリオを設定しております。やはり魅せるフォントとしてはこれが最適ですね。
サイドバータイトルでは影をつけて立体的に魅せております。
記事タイトルは逆にレタープレス風に魅せております。
※レタープレス風とは？
このように文字を魅せたい部分には、メイリオを採用して文字をちょっと大きめに設定する事をオススメします。
【CSS】
ここでは『Georgia』をメインに採用しております。これも魅せるフォントですね。日付部分は英数字のみで表示させているので日本語フォントよりも英文フォントの方がきれいに魅せる事ができます。
また、英文フォントの方が種類が多いので、ブログのスタイルに合ったフォント設定ができるのがポイントになります。日本語フォントにしている方はぜひ変更してみてください。
こちらのブログの日付部分は『Arialを太文字』で設定されておりますね。
戦略的ブログ術｜ビジネスブログで差をつける方法
「日付部分なんてあまり見られないから何でもいいんじゃない…。」って思う方もいらっしゃる事かと。でも、ちょっとした所に気を付ける事により、デザインのクオリティを上げる事ができるのです。女性と接する時と同じですよ（笑。さりげなさがポイントです。
フォント設定をうまく使いこなす事により、そのブログデザインのクオリティが変わってきます。画像に頼らなくてもこのようにデザインできる所も高ポイントですよね。
また、記事を書いる途中で気がついたのですが、今回の記事は長文のためのフォント設定というテーマでした。
でも、よく考えてみてください。
皆さんはたくさんのアクセスを欲しいと思いませんか？
そう思っている方のブログには、目に優しいフォント設定が必要になってきますよね。だって、一記事あたりの文章量が少なくても多くの記事を読んでいたら、長文の一記事を読んでいるのと変わりませんから。だから、フォント設定には気をつけるべきではないでしょうか。
もしこの考えにちょっとでも興味をもって頂けたら、ぜひこの記事を参考にあなたのブログも読者の目に優しいフォント設定をしてみてください。あと、他に良い設定をご存知の方がいらっしゃいましたら教えて頂けるとありがたいですね。
あと、最後に補足として。
ブラウザでは表示されるフォントサイズを変更する事が出来ます。
firefoxでは、『ツール』→『オプション』→『コンテンツ』
IEでは、『表示』→『文字サイズ』
ここで注意すべきポイントが！
フォントサイズを絶対指定という『px』の値で設定するとブラウザで変更ができなくなります。
これによってどのような問題が生じるかというと、視力の弱い方やお年寄りの方などはブラウザの設定でフォントサイズを変更している可能性があるという事。自分が読みやすいサイズに設定しているのです。
それなのに、絶対指定の『px』で指定してしまうとその方のブラウザの設定は無効になってしまう。読者目線で考えたら良くない事ですよね。
そこで、相対指定の『%』『em』という値で設定してあげる事をオススメします。この値で指定してあげるとブラウザでフォントサイズを変更する事ができるようになりますので。
その方法を…長くなりましたので、後日ご紹介します。
※私がデザインした方々のブログのフォント設定は、相対指定にしてありますのでご安心してください。
では、また書きますね。
使い方によって読みやすくなる、魅せる文字になるかどうか決まってきます。
そこで、このブログで適用しているフォントについてご紹介していきます。記事に長文が多く、シンプルなデザインのブログには適していると思いますので、ぜひ参考にして頂ければと思います。
このブログのフォント設定を公開します
このブログでは、部分的にフォント設定を変えております。全部で３パターン。
分けている理由としては、
・読みやすくするべき所
・魅せるべき所
実際にご覧頂いた方が分かりやすいですよね。
記事部分のフォント設定
【CSS】
font-family: Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
私のブログに関しては、長文の記事が多いので出来る限り文字が重たくならないようなフォント設定にしております。
他に『メイリオ』という読みやすいフォントと呼ばれているものもありますが、私としてはちょっと扱いづらいところもあり、記事部分には使用しておりません。
これがメイリオに設定したものです。
文字がちょっと重く見えてしまい長文を読むには厳しいかと。
そこでサイズダウンしてみました。
でも、ボリュームとしてはあまり変わっていないような気がします。これより小さくするとさらに読みづらくなりますのでダメでした。
サイズは変えず、文字色を薄くしてみたら重たさは感じませんが…。
今度は色が薄くなった事により読みづらくなっているような気がします。
これらの理由により、メイリオは設定しておりません。私の知識不足かもしれませんが読みやすく設定できなかったので、無理矢理メイリオにするのは良くないかと。
それにメイリオは文字をきれいに魅せるには適していますが、文章を読みやすくするために作られてるフォントではないように私は思うのです。
そこでこのブログでは、記事フォントとして『ＭＳ Ｐゴシック』に設定してあります。
一般的によく使用されているフォントでもありますので、読者の親しみやすさでいっても最適なフォントではないでしょうか。気がついたら巷で有名なブログでもほとんど『ＭＳ Ｐゴシック』を採用しているので、皆さん同じように思っているのかもしれません。
サイドバータイトルと記事タイトルのフォント設定
【CSS】
font-family: メイリオ,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック';
ここでメイリオを設定しております。やはり魅せるフォントとしてはこれが最適ですね。
サイドバータイトルでは影をつけて立体的に魅せております。
記事タイトルは逆にレタープレス風に魅せております。
※レタープレス風とは？
紙にグッと押し込んで凹ませたように魅せる手法です。
海外ブログではよく見かけますが、国内ブログではあまり見かけませんね。
このブログでは他にもヘッダー部分にありますよ。
レタープレスはここで使用しております↓
このように文字を魅せたい部分には、メイリオを採用して文字をちょっと大きめに設定する事をオススメします。
日付部分のフォント設定
【CSS】
font-family: Georgia,'Palatino Linotype' ,'Monotype Corsiva',Verdana;
ここでは『Georgia』をメインに採用しております。これも魅せるフォントですね。日付部分は英数字のみで表示させているので日本語フォントよりも英文フォントの方がきれいに魅せる事ができます。
また、英文フォントの方が種類が多いので、ブログのスタイルに合ったフォント設定ができるのがポイントになります。日本語フォントにしている方はぜひ変更してみてください。
こちらのブログの日付部分は『Arialを太文字』で設定されておりますね。
戦略的ブログ術｜ビジネスブログで差をつける方法
「日付部分なんてあまり見られないから何でもいいんじゃない…。」って思う方もいらっしゃる事かと。でも、ちょっとした所に気を付ける事により、デザインのクオリティを上げる事ができるのです。女性と接する時と同じですよ（笑。さりげなさがポイントです。
まとめとして
フォント設定をうまく使いこなす事により、そのブログデザインのクオリティが変わってきます。画像に頼らなくてもこのようにデザインできる所も高ポイントですよね。
また、記事を書いる途中で気がついたのですが、今回の記事は長文のためのフォント設定というテーマでした。
でも、よく考えてみてください。
皆さんはたくさんのアクセスを欲しいと思いませんか？
そう思っている方のブログには、目に優しいフォント設定が必要になってきますよね。だって、一記事あたりの文章量が少なくても多くの記事を読んでいたら、長文の一記事を読んでいるのと変わりませんから。だから、フォント設定には気をつけるべきではないでしょうか。
もしこの考えにちょっとでも興味をもって頂けたら、ぜひこの記事を参考にあなたのブログも読者の目に優しいフォント設定をしてみてください。あと、他に良い設定をご存知の方がいらっしゃいましたら教えて頂けるとありがたいですね。
あと、最後に補足として。
ブラウザでは表示されるフォントサイズを変更する事が出来ます。
firefoxでは、『ツール』→『オプション』→『コンテンツ』
IEでは、『表示』→『文字サイズ』
ここで注意すべきポイントが！
フォントサイズを絶対指定という『px』の値で設定するとブラウザで変更ができなくなります。
これによってどのような問題が生じるかというと、視力の弱い方やお年寄りの方などはブラウザの設定でフォントサイズを変更している可能性があるという事。自分が読みやすいサイズに設定しているのです。
それなのに、絶対指定の『px』で指定してしまうとその方のブラウザの設定は無効になってしまう。読者目線で考えたら良くない事ですよね。
そこで、相対指定の『%』『em』という値で設定してあげる事をオススメします。この値で指定してあげるとブラウザでフォントサイズを変更する事ができるようになりますので。
その方法を…長くなりましたので、後日ご紹介します。
※私がデザインした方々のブログのフォント設定は、相対指定にしてありますのでご安心してください。
では、また書きますね。
やってはいけない５つのフォント設定とは？
フォント設定には色々こだわりが必要になってきます。そのようなお話しです。