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

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

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

1 リンクの色をカスタマイズ
2 文字のフォントや文字の大きさを変更する
- 2.1 スマホのCSSも忘れずに
3 記事タイトルのカスタマイズ
- 3.1 トップページ（記事一覧ページ）のタイトル
- 3.2 個別記事の記事タイトル
4 サイドバータイトル部分
- 4.1 サイドバーのコンテンツ

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

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

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

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

a, a:visited {
  color: #0044cc;  /* リンクの色 */
  text-decoration: underline;   /* リンク部分にアンダーライン */
  font-weight:bold;  /* リンク部分を太字に*/
}

 /* リンク部分カーソルが乗った時の色 */
a:hover {color:#7a8285;}

a, a:visited {

color: #0044cc; /* リンクの色 */

text-decoration: underline; /* リンク部分にアンダーライン */

font-weight:bold; /* リンク部分を太字に*/

}

/* リンク部分カーソルが乗った時の色 */

a:hover {color:#7a8285;}

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

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

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

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

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

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

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

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

/* 全体のフォントと文字の大きさ */

body{

font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳＰゴシック', 'MS PGothic', sans-serif;

font-size:16px; /* 文字の大きさ */

color:#403b3b; /* 文字の色 */

font-weight: 500;

line-height: 1.8; /* 行の高さ */

}

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

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

スマホのCSSも忘れずに

SeesaaブログのCSSはPCとスマホのCSSが分かれているので、スマホのCSSにも同じように記述を追加しておきます。

デザイン⇒スマホ⇒CSS/HTML編集⇒適応中のデザイン⇒CSS編集と進めます。

スマートフォンのCSSの一番下にも先程PC版と同じCSSコードを追加しておけばOKです。

記事タイトルのカスタマイズ

記事タイトル部分ですが、トップページ（記事一覧ページ）と個別記事でそれぞれカスタマイズが必要です。

トップページ（記事一覧ページ）のタイトル

先ほどリンクのカスタマイズでリンクの色を青にしたらトップページの「記事タイトル（リンク）」が青くなってしまいましたのでこれを黒っぽく変更してみます。

h2.entry__title a {
  color: #333;
  text-decoration: none;
  font-size: 25px;
}

h2.entry__title a {

color: #333;

text-decoration: none;

font-size: 25px;

}

記事タイトルの色：#333（黒っぽいグレー）
アンダーライン：なし
文字の大きさ：25px

個別記事の記事タイトル

個別記事の記事タイトルのカスタマイズは以下です。

.article__title {
    font-size: 20px;
    border-bottom: 1px dotted #ccc;
    color: #333;
}

.article__title {

font-size: 20px;

border-bottom: 1px dotted #ccc;

color: #333;

}

文字の大きさ：20px
記事タイトルの下にドット線
文字の色：#333（黒っぽいグレー）

サイドバータイトル部分

サイドバーのタイトル部分のカスタマイズ。

/* サイドバータイトル */
.module__heading {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}

/* サイドバータイトル */

.module__heading {

font-size: 20px;

color: #333;

font-weight: bold;

}

文字の大きさ：20px
文字の色：#333
文字の太さ：太字

サイドバーのコンテンツ

ついでにサイドバーのコンテンツ部分。

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

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

.side {

font-size: 15px; /* 文字の大きさ */

}

.side a{

color: #0044cc; /* リンク文字の色 */

text-decoration:none; /* アンダーライン無し */

}

大体こんな感じで変更できます。