アメブロのフォントや文字、リンクの色を変更するカスタマイズ

今回はアメブロのフォント、文字の大きさ、文字の色、それから行間（行の高さ）を変更するカスタマイズです。ついでにリンクの色や装飾も変更していきます。

この部分を変更するだけでも見た目も変わりますし文字も非常に読みやすくなります。

この部分はどのブログでも必須のカスタマイズです。最初に元の状態でブログを表示しておき、カスタマイズ後のページと比べてみるとその違いがはっきり分かると思います。

一応CSSの記述の注意点などを前回書いておいたのでそれを読んでおく事をおすすめします。

⇒アメブロカスタマイズ　CSSの記述の仕方基本

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2020.04.21

アメブロのフォントを変更する

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

まずは一番基本となる文字のフォントをカスタマイズします。CSSの一番下に次の記述を追加して下さい。

/* フォント */
body{
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size:16px; /* 文字の大きさ */
color:#403b3b; /* 文字の色 */
line-height:1.75; /* 行間の調整 */
font-weight: 500;
}

フォントは沢山記述してみましたが、これはウィンドウズやMac等各デバイスで使えるフォントが違うため、それぞれに適応できるフォントを記述してあります。

リンクの色やアンダーラインを入れるカスタマイズ

続きましてアメブロのリンクの色を変更したり、太字にしたり、アンダーラインを入れたりするカスタマイズを解説していきます。

記事内で色々なカラーを使っている人は特にこの部分が大事。訪問者にリンクがリンクとして認識されていないとクリックもされません。そのため、私の場合はリンクの色を青色、太字にしてさらにアンダーラインを入れてリンクとして認識されるようにカスタマイズしています。

リンクのカスタマイズの基本

リンクの色を変更する時に覚えておきたいのが次の点です。

• 普通のリンクの色
• カーソルが乗ったときの色
• 訪問済みの色

この3箇所を別々に記述する必要がありますので、先に知っておいてそれぞれのカラーを変更していく事をおすすめします。

リンクの色や装飾を変更するカスタマイズ

CSSの一番下に次のコードを追加します。

/* 通常のリンク */
.skin-entryBody a:link{color:#0066cc;
font-weight:bold;
text-decoration: underline;}
 
/*訪問済みのリンクの色*/
.skin-entryBody a:visited{color:#0066cc;} 
 
/*カーソルがのっている時のリンクの色*/
.skin-entryBody a:hover{color:#7a8285;}

色は好きな色のカラーコードに変更して使って下さい。それから「font-weight:bold」が太字にする記述で「text-decoration:underline」がリンク部分にアンダーラインを入れる仕様になっていますので、この太字やアンダーラインが不要であればこの部分の記述を削除して下さい。

以上アメブロのフォントや文字の大きさ、リンクの色などを変更するカスタマイズでした。

次回はサイドバータイトルの文字色や背景色を変更するカスタマイズを紹介していきます。

• ⇒アメブロのサイドバータイトルとその周辺のカスタマイズ
• ⇒アメブロカスタマイズまとめページに戻る
• ⇒無料ブログを続ける事のデメリットと危険性
• ⇒アメブロアフィリエイトのやり方と稼ぐコツ
• ⇒アフィリエイトで稼ぐ方法まとめページへ