こんにちわ。美しいものほど濁って見える@It_is_Rです。
今回もFC2ブログの最強カスタマイズを始めていこうと思います。
今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初期設定の今の状態だと文字が小さすぎて見えませんよね。。。
ブログをカスタマイズするのに大切なことは、見る人にとっていかに見やすいブログにするかです。
というわけで、ブログを美しく、もう一度見たいと思えるブログにカスタマイズしていきましょう。
まず一つ注意書きです。
サイトを作る上で問題になるのが、ブラウザによって表示が変わってきてしまうということです。
なので、そのブラウザごとにあったサイズに設定しなくてはなりません。
本当はすべてのブラウザで表示の確認をした方がいいのですが、私はwindowsを持っていないので、InternetExplorerでの確認が、エミュレータのようなものでしか確認できません。
とりあえず、InternetExplorerでの確認はWindowsを持っている人であれば各自ご確認ください。
記事やプラグイン部分の文字の大きさ。
まずは、文字の大きさを変更することから始めていきましょう。
前回は背景をカスタマイズしましたね。Rは背景を無難に真っ白にしてみました。
今回はここから始めていきましょう。
キーワードにより文字サイズを指定する。
CSSを書き換える場所は、文字を変えたい場所によって異なります。
ではまず、記事やプラグインの部分の文字の大きさを変更してみましょう。
まずはCSSのソースの中から、次のソースを探してください。
body {
color : #333; /* 文字の色 */
background-color : #fff; /* 背景の色 */
text-align : center; /* 古いIEでセンタリングする */
line-height : 1.5; /* 行間 */
font-size : x-small !important; /* 古いIEの文字サイズ */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : small !important; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
html>body {
font-size : small !important; /* Opera用の文字サイズ */
}
もうすでにコメントに何を変更すればいいのか書いてあるので、説明するまでもないかもしれないのですが、説明いたしましょう。
font-sizeというのが、文字の大きさを指定する命令です。このソース内でも3箇所ありますよね。
このfont-size、指定する方法はいくつかあります。
まず、もともとのソースのような指定方法です。
xx-small
x-small
small
medium
large
x-large
xx-large
という小さい順に並んだ7種類のワードを、font-size :の後に入力することにより、フォントのサイズをしていします。
では、実際にやってみましょう。
body {
color : #333; /* 文字の色 */
background-color : #fff; /* 背景の色 */
text-align : center; /* 古いIEでセンタリングする */
line-height : 1.5; /* 行間 */
font-size : small !important; /* 古いIEの文字サイズ */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : medium !important; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
html>body {
font-size : medium !important; /* Opera用の文字サイズ */
}
とりあえず、全体に一段階ずつ大きくしてみました。
数値により文字サイズを指定する。
では、数値による指定方法を見てみましょう。
数値による指定方法も先ほどとほとんど変わりません。キーワードなのか数値なのかの違いです。
数値による指定方法もいろいろあるのですが、とりあえずpxで指定する方法です。
font-size : 15px;
といった具合です。簡単ですね！
この数値によって文字の大きさが変わってくるので、自分の思い通りのサイズになるまで試してみるといいと思います。
タイトルの文字の大きさ。
次に、FC2ブログのタイトル部分の文字の大きさも変更してみましょう。
要領は先ほどと一緒です。
今度はCSSの中から、下のように書かれた部分を探してください。
/* タイトル */
div#branding h1 a {
padding : 0 10px;
font-size : x-large; /* 古いIEの文字サイズ */
font-weight : bold; /* 太字にする */
voice-family : "\"}\""; /* おまじない */
voice-family : inherit; /* おまじない */
font-size : xx-large; /* CSSを正しく解釈出来るブラウザ用の文字サイズ */
}
html>body div#branding h1 {
font-size : xx-large; /* Opera用の文字サイズ */
}
ここがFC2ブログのタイトルの文字を指定している部分です。
先ほどと同じように指定していきましょう。
font-sizeの部分を自分の指定したい大きさに書き換えるだけです。
Rは大げさにもfont-size : 50px;と指定したのですが。。。
なかなか悪くなかった。
まとめ
と、このような感じで今回は終わろうと思います。
あとは自分好みに見やすさなどを考えて調節していってください。
まだまだブログの直すべきところはあるので、これからも一緒に美しいブログを作っていきましょう。
