文字の大きさ・フォント・色を変える

今回のカスタマイズ

今回は、「文字の大きさ・フォント・色を変える方法」です

ブログで一番重要なのは記事ですが、
読みにくい文字だとそれだけで読み手はストレスが溜まるものですよね

最悪、内容を読まずに閉じられてしまうこともあるかも…

読み手のことを考えた読みやすい文字に設定してみましょう

編集する箇所

★★CSSのみ

「CSS編集用デザイン」を適用している必要があります

CSSをさわるのが初めてという方は、
先に「CSS編集の基本知識」のページをご覧ください

「/* その他、拡張があれば記述 */」の下に記号を書き込んでください

やり方

①文字の大きさ

まずは、文字の大きさ

初期設定では１２pxになっていますが、ちょっと小さめですよね

当ブログでは、１４pxにしています

一般的には１４px～１６pxあたりが読みやすいとされているようです

大きさ	表示例
１０px	文字をカスタマイズ　この文字の大きさは１０pxです
１１px	文字をカスタマイズ　この文字の大きさは１１pxです
１２px（初期設定）	文字をカスタマイズ　この文字の大きさは１２pxです
１３px	文字をカスタマイズ　この文字の大きさは１３pxです
１４px（当ブログ）	文字をカスタマイズ　この文字の大きさは１４pxです
１５px	文字をカスタマイズ　この文字の大きさは１５pxです
１６px	文字をカスタマイズ　この文字の大きさは１６pxです
１７px	文字をカスタマイズ　この文字の大きさは１７pxです
１８px	文字をカスタマイズ　この文字の大きさは１８pxです

それでは、実際に設定してみましょう

記事ごとに「文字サイズ」を毎回指定すれば大きさは変えられますが、
今回はCSSで一括で設定する方法です

/* 記事本文の文字の大きさ */
.articleText{
font-size: 0px;
}

ピンクのマーカー部分を、一字一句もらさずCSS内にコピペし保存してください

「 0px」には、上の表を参考にしてお好みの半角数字を入れてくださいね

すでにCSS内に他の記号が入っている場合は、
他のものを消してしまわないように注意してね

②フォント（書体）

次に、フォントを変えてみましょう

初期設定では「ＭＳＰゴシック」になっています
当ブログでは、一般的に読みやすいとされている「メイリオ」というフォントが
優先的に表示されるようにしています

/*全体のフォント*/
body{
font-family:メイリオ, Meiryo, Osaka, "ＭＳＰゴシック", "ＭＳ　ゴシック", "ヒラギノ角ゴ Pro W6", Helvetica, verdana, Arial;
}

ブルーのマーカー部分を、一字一句もらさずCSS内にコピペし保存してください

ここで注意

いくらフォントを設定しても、
そのフォントが閲覧者のパソコンにインストールされていなければ、
閲覧者側には標準フォントの「ＭＳＰゴシック」で表示されてしまいます

また、Macintoshでは表示されないフォントもあります

そこで、このようにいくつも候補をあげておく必要があるんです

font-family:第１候補のフォント, 第２候補のフォント, 第３候補のフォント, …;

自分のパソコン基準で考えてはだめ！ってことです
お好みのフォントを入れる場合はこのことにご注意くださいね

フォント名にスペースがある場合は、「"○○○"」で囲み、
フォント名とフォント名の間は「,」で区切ってください

ちなみに、、、
手書き風の丸文字のようなフォントをよく見かけますが、
個人的にはとっても読みにくいと思います

③文字の色

最後に、文字の色の変え方もご紹介しますが、
全文をピンクにしちゃうとか、目がチカチカするようなのは避けましょうね

/* 通常文字の色 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
color:#000000;
}
/* リンクの色 */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a{
color:#000000;
}
/* 訪問済のリンクの色 */
.skinAnchorVisitedColor,.skinBaseAnchorVisitedColor,.skinBlock a:visited,a:visited{
color:#000000;
}
/* マウスオーバーしたときのリンクの色 */
.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{
color:#000000;
}

イエローのマーカー部分を、一字一句もらさずCSS内にコピペし保存してください

「#000000」はカラーコードです
お好きな色のコードを入れてくださいね