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

Seesaaブログアフィリエイトとカスタマイズ

2020.07.29 2018.04.30

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

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

リンクの色をカスタマイズ
文字のフォントや文字の大きさを変更する
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です．
しげぞうより:
2017年7月14日 3:47 PM
すぴか様
返信ありがとうございます。解決できて良かったです！人気記事に関しては自分で自由形式をカスタマイズして画像付きにもできるかと思います。ただ、どれも画像付きにしてしまうと表示速度は落ちるというデメリットもありますのでバランスが必要かなと思います。
すぴかより:
2017年7月13日 4:50 PM
しげぞう様
解決しました。
いつもながら、ありがとうございます！
関連記事の方はこのままにしておきます。
ところで、ブログパーツの
「最近の記事」はアイキャッチ画像付きで表示されるのですが、「人気記事」は文字のみです。
これはシーサー側の考えでそうしてあるのでしょうか。
サイドバーに「人気記事」と「最近の記事」を両方のせているのですが、両方ともにアイキャッチ画像がついているとくどくなりすぎるような気もしています。
その反面、載せてみたい気もしています…^^;
しげぞうより:
2017年7月13日 9:58 AM
すぴか様
コメントありがとうございます。デザイン⇒デザイン設定⇒適応中のデザイン名⇒HTML編集と進み、以下のコードを探して下さい。デフォルトのままだと９０行目付近です。
```
<div class="permalink">
<% if:previous_article -%>
<a href="<% previous_article.page_url -%>" class="prev"><% previous_article.subject | tag_break | text_summary(15) -%></a>
<% /if -%>

<% if:next_article -%>
<a href="<% next_article.page_url -%>" class="next"><% next_article.subject | tag_break | text_summary(15) -%></a>
<% /if -%>
</div>
```
この部分のtext_summary(15)という部分の数値を30に変更すれば30文字になります。半角で入力して下さい。
それから記事下のアイキャッチ画像に下の1行分のタイトルの部分ですが、こちらも文字数の変更は可能なのですが、隣のタイトルと文字が重なってしまいます。
ここは文字が重ならないようにCSSで調整してあり、隣の場所を超える文字を隠すようなコードが追加されてます。これを解除してしまうと隣のタイトルと文字が重なってしまうような感じですね。
それで改行すればいいんですが、それをするにはこの関連記事の部分のHTMLとCSSをやり直しする必要があるかと思いますし、PCやタブレットなどの切替時の表示も考えてのやり直しが必要になるかと思います。なので関連記事に関してはこのままでもOKではないかなと思います。
すぴかより:
2017年7月12日 4:46 PM
おひさしぶりです。
再び「まとめブルー/ブロック両カラム」の質問をさせていただきたく思います。
記事を開くと、いちばん下に「前の記事」と「次の記事」のタイトルが、だいたい全角15文字程度に簡略化して表示されています。
この文字数を20文字程度に増やすことは可能でしょうか？
それから、記事の下に同じジャンルの記事のアイキャッチ画像と1行分のタイトルが複数表示されています。
この1行を2行に増やすことが可能かどうか、また方法などを教えていただけると嬉しいです。
レンレンより:
2017年5月27日 6:28 PM
ご回答ありがとうございます。
自分のブログに関しては、時間が経ったら反映されておりました…大変失礼しました。
こちらのブログに関しては、文字の太さなどがイマイチIEで見るときとChromeで見るときと異なって見えます。
たしかに、ブラウザによって見え方が違ったり色々あるようで…
良くわかりませんが、そんなに支障はないので大丈夫です。
ありがとうございました。すみませんでした。
しげぞうより:
2017年5月25日 10:14 AM
レンレン様
コメントありがとうございます。IEで反映されるのにChromeで反映されないというはフォントでしょう？それとも文字のサイズとか行間とかでしょうか？普通は逆の事が多いんですよね、IEで反映されないって事は時々あります。特にブラウザのバージョンとかが古いと反映されないコードが結構あったりします。
それ以外でもCSSをブラウザ別に条件分岐するような記述もあるので、その条件分岐の記述ミスかと思ったのですが、Seesaaブログでそれはちょっと考えにくいです。なのでもし機会があれば別のPCとかでも確認してみるのが良いかもしれません。解決にならずすみません。
レンレンより:
2017年5月24日 5:21 PM
はじめまして。こちらのブログをよく参考にさせて頂いております。
このフォントの変更等なのですが、IEで見るときちんと変更されているのですが、
グーグルクロームで見るとデフォルトの文字になってしまいます。
私のブログだけでなくこちらのブログもそうなってました。
なぜでしょうか…。
すぴかより:
2017年5月11日 9:01 PM
read-more　続きを読む
なるほどですね～。
ありがとうございました！
変更できました♪
しげぞうより:
2017年5月9日 11:37 AM
すぴか様
返信ありがとうございます。「続きを読む」の部分忘れてましたね（笑）
```
.read-more a {
    background: #5ad3f4;
}
```
これを追加してカラーの部分を変えてみて下さい。
すぴかより:
2017年5月8日 10:48 PM
しげぞう様
ありがとうございます！
おかでさまで、日付の背景色と記事の外枠の色の変更が可能になりました^^
が、「続きを読む」の背景部分は変わらず。
この部分も同色だと統一感があってよいかなと。
それらしい該当箇所がないかと探しましたが見つけられませんでした。…
何度もお手数ですがよろしくお願いいたしますm(_ _)m

« 前へ 12