今回はアメブロのフォント、文字の大きさ、文字の色、それから行間（行の高さ）を変更するカスタマイズです。ついでにリンクの色や装飾も変更していきます。
この部分を変更するだけでも見た目も変わりますし文字も非常に読みやすくなります。
この部分はどのブログでも必須のカスタマイズです。最初に元の状態でブログを表示しておき、カスタマイズ後のページと比べてみるとその違いがはっきり分かると思います。
一応CSSの記述の注意点などを前回書いておいたのでそれを読んでおく事をおすすめします。
⇒アメブロカスタマイズ CSSの記述の仕方基本
アメブロのフォントを変更する
まずは一番基本となる文字のフォントをカスタマイズします。CSSの一番下に次の記述を追加して下さい。
/* フォント変更 */
body{
font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
"ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande",
"Lucida Sans Unicode", Arial, Verdana, sans-serif;
text-rendering: optimizeLegibility;}沢山記述してみましたが、これはウィンドウズやMac等各デバイスで使えるフォントが違うため、それぞれに適応できるフォントを記述してあります。
アメブロの文字の大きさや色、行間を変更する
続いてフォントを変更したコードの下に文字の大きさや色、行間を調整するコードを記述していきます。
/* 通常文字 */
.skinTextColor,.skinBaseTextColor,.skinBlock,body{
font-size:14px;
color:#333333;
}
/* 行間の調整 */
.articleText {
line-height:25px;
}各数値はお好みで変更してみて下さい。ちなみに変更した点は次の項目。
- 文字の大きさ：14px
- 文字の色：#333333（グレー）
- 行間（行の高さ）：25px
文字色に関してはグレー（#333333）ですが、もっと濃いのが良い場合は「#222」や「#111」に変更して下さい。
リンクの色やアンダーラインを入れるカスタマイズ
続きましてアメブロのリンクの色を変更したり、太字にしたり、アンダーラインを入れたりするカスタマイズを解説していきます。
記事内で色々なカラーを使っている人は特にこの部分が大事。訪問者にリンクがリンクとして認識されていないとクリックもされません。そのため、私の場合はリンクの色を青色、太字にしてさらにアンダーラインを入れてリンクとして認識されるようにカスタマイズしています。
リンクのカスタマイズの基本
リンクの色を変更する時に覚えておきたいのが次の点です。
- 普通のリンクの色
- カーソルが乗ったときの色
- 訪問済みの色
この3箇所を別々に記述する必要がありますので、先に知っておいてそれぞれのカラーを変更していく事をおすすめします。
リンクの色や装飾を変更するカスタマイズ
CSSの一番下に次のコードを追加します。
/* 通常のリンク */
.articleText a:link{color:#0066cc;
font-weight:bold;
text-decoration: underline;}
/*訪問済みのリンクの色*/
.articleText a:visited{color:#0066cc;}
/*カーソルがのっている時のリンクの色*/
.articleText a:hover{color:#7a8285;}色は好きな色のカラーコードに変更して使って下さい。それから「font-weight:bold」が太字にする記述で「text-decoration:underline」がリンク部分にアンダーラインを入れる仕様になっていますので、この太字やアンダーラインが不要であればこの部分の記述を削除して下さい。
以上アメブロのフォントや文字の大きさ、リンクの色などを変更するカスタマイズでした。
次回はサイドバータイトルの文字色や背景色を変更するカスタマイズを紹介していきます。
