Seesaaブログのフォントや文字のカスタマイズ【新システム】

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考にして下さい。

今回はSeesaaブログのフォントや文字の大きさ、文字の色、リンクの色、行間などをカスタマイズする方法を紹介していきます。文字のフォントや色をちょっと変更するだけでも読みやすさが違ってくるので、結果的に訪問者の滞在時間が増えたりPV（ページビュー）が増えるという効果も期待できます。

一応基本的な部分を解説してみるのでそれを読んで自分なりのカスタマイズをしてみて下さい。

おすすめのASP

⇒もしもアフィリエイトの登録や使い方

1 リンクの色をカスタマイズ
2 文字のフォントや文字の大きさを変更する

リンクの色をカスタマイズ

フォントや文字の大きさ、文字の色を変更する前に全体的なリンクの色を設定しておいた方がスムーズです。というのもスタイルシート（CSS）というのは後から書いた物が優先的に反映されるので、先に全体の部分をカスタマイズし、後から部分的なカスタマイズをしていくという手順がおすすめです。

Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザインタイトル」をクリックして、「スタイルシート編集」のタブを選択します。

それでスタイルシートの一番下までスクロールして次のコードを追加します。

a:link{
color:#0066cc;
text-decoration: underline;}
a:visited{color:#0066cc;}
a:hover{color:#7a8285;}
a:link {font-weight:bold;}

リンクの色：青色でアンダーライン
訪問済みのリンクの色：青色
カーソルが乗った時の色：灰色
リンクの文字：太字

これを追加すると「記事のタイトル」とかまで青色になってアンダーラインが入りますが、これは後で変更していくのでとりあえずこれでOK。先ほども書いたようにまずは全体を変更してから部分的な変更をしていきます。それとリンクの色はお好みで変更して下さい。

文字のフォントや文字の大きさを変更する

それではフォントを変更していきましょう。フォントに関しては専門家ではないですが、基本的に複数のフォントを設定する必要があります。というのも「windows」「Mac」「Android」「iPhone」など使用するデバイスによって使えるフォントが違うので。

このフォントに関しては従来の旧システムよりも読みやすい感じになっているので初期状態のままでもいいですが、一応私が使っているフォントの設定の紹介だけしておきますね。

という訳で再度「スタイルシート編集」のタブを選択。

それでスタイルシートの一番下までスクロールして次のコードを追加。

body {font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
 "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande",
 "Lucida Sans Unicode", Arial, Verdana, sans-serif;
text-rendering: optimizeLegibility;}

これが現在個人的に使用しているフォントの設定です。

文字の大きさや色を変更する

それでは文字の大きさや色を変更する方法を紹介していきます。まずは全体の文字の大きさや文字色を変更してみましょう。スタイルシートの一番下に次のコードを追加。

body{
font-size:15px;   /* 文字の大きさ */
color:#333333;   /* 文字の色（グレー） */
line-height: 1.8; /* 行の高さ */
}

この「body」というのがブログの全体の設定になります。先ほども書いたように全体的な文字の大きさや文字色を設定しておいて、その下に部分的な（サイドバーの文字とか）変更を書いていけばOK。

ちなみにこれで全体の文字の大きさや色を変更しても記事タイトルやサイドバーのタイトルには反映されないので、それはまた別に設定が必要ですね。

記事タイトルの文字部分

先ほどリンクのカスタマイズで「記事タイトル」が青くなっているのでこれを変更してみましょう。スタイルシートの一番下にどんどん追加していきますよ。

/* 記事タイトル */
.entry__title {
  font-size: 20px;  /* 文字の大きさ */
}
.entry__title a {
  color: #000;  /* 文字の色 */
  text-decoration: none;  /* アンダーライン無し */
}

サイドバータイトル部分

/* サイドバータイトル */
.module__heading {
  font-size: 20px;  /* 文字の大きさ */
  color: #000000;   /* 文字の色 */
  font-weight: bold;  /* 太字に */
}

サイドバーのコンテンツ

.side {
  font-size: 15px;  /* 文字の大きさ */
}

.side a{
  color: #0066cc;  /* リンク文字の色 */
  text-decoration:none;  /* アンダーライン無し */
}

大体こんな感じで変更できます。後は細かい部分、例えば「ブログのタイトル部分」とか「サイドバーのタイトルに背景色」とかタイトル部分の位置調整に関しては別記事で書いてみます。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」

【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから