HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
デフォルトの状態では、本文の文字サイズが小さすぎると思っていましたので、記事の部分の文字サイズを少し大きめに調整してみました。
これまで何度か触れてきましたが、文字サイズを設定するには、font-sizeというプロパティに対して設定を行います。設定方法はいろいろあるのですが、アメブロの元々の設定と後々の調整も考えて簡単な設定方法をとっていますので、ご説明したいと思います。
アメブロの元々の設定内容
アメブロの編集可能CSSでは、大元のhtmlに次のような設定が行われています。
html {
font-size:75%;
}これは、「何も設定しないときにブラウザが表示する文字の大きさの75％の大きさで表示しなさい」という意味になります。ページの内容はhtmlのなかに全部含まれていますから、ページ全体に対して適用されています。
これとは別に大きくしたい所、小さくしたい所は個別に設定されています。
分かりやすい文字サイズの設定変更方法
こうした設定の元でいちばん分かりやすい方法は、元々の設定を基準に文字の大きさを調整することではないかと思い、私は下記のソースをCSSの最後のブロックに追加しています。
/* 文字サイズの調整（元々の75％に対する設定） */
.skinMainArea { /* ←記事カラム */
font-size: 120%;
}
.skinSubArea { /* ←両サイドバーカラム */
}
記事部分は、120％設定としていますが、これでも75％の1.2倍。つまりブラウザのデフォルトの文字サイズの90％ということですので、極端に大きいわけではないと思います。
サイドバーでは、最新の記事一覧の記事タイトルなどはなるべく1行で表示させたいので、何も設定せず元々の大きさのままにしています。ここに値を入れることでサイドバーカラムの文字サイズを任意の大きさに変更することができます。
元に戻ししたければ、上記数行のソースを削除するだけ。他に調整したい部分があれば、この下に追加してゆけば、後々分かりやすくていいと思います。