★あもブログ★ クエスト 締切が一目でわかる!カレンダー&カウントダウン

ピグライフ、ピグカフェ、ピグアイランド、クエスト、イベント、カスタマイズ、CSS、ブログ改造


テーマ:

今回のカスタマイズ


今回は、「文字の大きさ・フォント・色を変える方法」ですケアベア パープル

★あもブログ★


ブログで一番重要なのは記事ですが、
読みにくい文字だとそれだけで読み手はストレスが溜まるものですよねsei
最悪、内容を読まずに閉じられてしまうこともあるかも…

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


編集する箇所


★★CSSのみ

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

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

★あもブログ★

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


やり方


①文字の大きさ



まずは、文字の大きさ♥akn♥

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

当ブログでは、14pxにしています☆
一般的には14px~16pxあたりが読みやすいとされているようです

大きさ表示例
10px
文字をカスタマイズ この文字の大きさは10pxです
11px
文字をカスタマイズ この文字の大きさは11pxです
12px(初期設定)
文字をカスタマイズ この文字の大きさは12pxです
13px
文字をカスタマイズ この文字の大きさは13pxです
14px(当ブログ)
文字をカスタマイズ この文字の大きさは14pxです
15px
文字をカスタマイズ この文字の大きさは15pxです
16px
文字をカスタマイズ この文字の大きさは16pxです
17px
文字をカスタマイズ この文字の大きさは17pxです
18px
文字をカスタマイズ この文字の大きさは18pxです


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

記事ごとに「文字サイズ」を毎回指定すれば大きさは変えられますが、
今回はCSSで一括で設定する方法です
/* 記事本文の文字の大きさ */
.articleText{
font-size: 0px;
}

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

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

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


②フォント(書体)


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

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

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

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


ここで注意♥akn♥

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

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

そこで、このようにいくつも候補をあげておく必要があるんです
font-family:第1候補のフォント, 第2候補のフォント, 第3候補のフォント, …;


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

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


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



③文字の色


最後に、文字の色の変え方もご紹介しますが、
全文をピンクにしちゃうとか、目がチカチカするようなのは避けましょうねsei
/* 通常文字の色 */
.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」はカラーコードです
お好きな色のコードを入れてくださいねsei

カラーコードについてはこちらのページを参考にしてください


CSS保存時に気をつけること


「保存」ボタンを押した後、CSSの一番上に
リクエストは既に処理中であるか無効です
の表示がでていないかを必ず確認してくださいsei

この表示がでた場合は保存に失敗しており、ブログに反映されませんsei
もう一度「保存」を押してください

★あもブログ★


保存に成功したら、
F5」を押してブラウザを更新sei 必ず最新の状態にして確認してねsei


動作環境


わたしが確認したブラウザは、Windows版の
★あもブログ★Internet Explorer9/★あもブログ★Google Chrome18/★あもブログ★Firefox13/★あもブログ★Safari5
です


さいごに


せっかく時間を割いて書いた記事を、多くの方に気持ちよく読んでもらえるよう、
ちょっとだけ工夫できるといいですねsei


カスタマイズを敬遠していた方にすこしでも興味をもっていただけたら嬉しいですsei

また、この記事のリンクを貼って、ぜひお友達にも紹介してあげてくださいねハート②



☆.。.:*・゚ ☆.。.:*・゚ ☆.。.:*・゚

子どものままがいい? 早くオトナになりたい? ブログネタ:子どものままがいい? 早くオトナになりたい? 参加中
本文はここから

オトナになんかなりたくなーい!!
っていつまででも言っていたいオトナですsei
AD
いいね!した人  |  コメント(42)

[PR]気になるキーワード