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

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

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

sigezo

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

リンクの色をカスタマイズ
文字のフォントや文字の大きさを変更する
1. スマホのCSSも忘れずに
記事タイトルのカスタマイズ
1. トップページ（記事一覧ページ）のタイトル
2. 個別記事の記事タイトル
サイドバータイトル部分
1. サイドバーのコンテンツ
ブログを収益化するならWordPress利用がおすすめ

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

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

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

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

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」というのがブログの全体の設定になります。先ほども書いたように全体的な文字の大きさや文字色を設定しておいて、その下に部分的な（サイドバーの文字とか）変更を書いていけば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;
}

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

個別記事の記事タイトル

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

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

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

サイドバータイトル部分

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

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

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

サイドバーのコンテンツ

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

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

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

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

ブログを収益化するならWordPress利用がおすすめ

無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。

また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。

WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。

こらそんより:

2017年11月20日 9:15 PM

返信ありがとうございます.
無事解決しました！
しげぞうより:

2017年11月20日 7:53 PM

こらそん様

コメントありがとうございます。Seesaaブログの管理画面からデザイン⇒スマートフォンのタブを選択⇒デザイン設定⇒適応中のデザインをクリック。

スタイルシートが表示されますのでその一番下に以下のコードをコピペして保存してみて下さい。

[css]
.article-body {
font-size: 18px;
}
[/css]

保存できたらスマホで表示を確認し、反映されてなければページを再度読み込み（リロード）してもう一度確認して下さい。
こらそんより:

2017年11月20日 6:56 PM

はじめまして,こんにちは．

最近SEESAAブログを始めたのですが,イマイチ理解しきれずここに辿り着いたのですが,それでも解決できなかったので質問させてもらいます．

スマホ版の方の,スタイルシート編集でブログ記事本文の文字の大きさだけを変えたい場合なのですが,分かりますでしょうか．
デザインは最初にあるbasicです．

« 前へ 1 2