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

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

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

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

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

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

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

新デザインパンくず-3

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

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」など使用するデバイスによって使えるフォントが違うので。

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

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

新デザインパンくず-3

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

body {font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro",
 "ヒラギノ角ゴ Pro W3", "MS Pゴシック", "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;  /* アンダーライン無し */
}

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

Seesaaブログのフォントや文字のカスタマイズ【新システム】”に26件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. レンレン

    ご回答ありがとうございます。

    自分のブログに関しては、時間が経ったら反映されておりました…大変失礼しました。
    こちらのブログに関しては、文字の太さなどがイマイチIEで見るときとChromeで見るときと異なって見えます。

    たしかに、ブラウザによって見え方が違ったり色々あるようで…
    良くわかりませんが、そんなに支障はないので大丈夫です。
    ありがとうございました。すみませんでした。

  2. しげぞう 投稿作成者

    レンレン様

    コメントありがとうございます。IEで反映されるのにChromeで反映されないというはフォントでしょう?それとも文字のサイズとか行間とかでしょうか?普通は逆の事が多いんですよね、IEで反映されないって事は時々あります。特にブラウザのバージョンとかが古いと反映されないコードが結構あったりします。

    それ以外でもCSSをブラウザ別に条件分岐するような記述もあるので、その条件分岐の記述ミスかと思ったのですが、Seesaaブログでそれはちょっと考えにくいです。なのでもし機会があれば別のPCとかでも確認してみるのが良いかもしれません。解決にならずすみません。

  3. レンレン

    はじめまして。こちらのブログをよく参考にさせて頂いております。
    このフォントの変更等なのですが、IEで見るときちんと変更されているのですが、
    グーグルクロームで見るとデフォルトの文字になってしまいます。
    私のブログだけでなくこちらのブログもそうなってました。

    なぜでしょうか…。

  4. すぴか

    read-more 続きを読む
    なるほどですね~。

    ありがとうございました!
    変更できました♪

  5. しげぞう 投稿作成者

    すぴか様

    返信ありがとうございます。「続きを読む」の部分忘れてましたね(笑)

    .read-more a {
        background: #5ad3f4;
    }

    これを追加してカラーの部分を変えてみて下さい。

  6. すぴか

    しげぞう様

    ありがとうございます!
    おかでさまで、日付の背景色と記事の外枠の色の変更が可能になりました^^
    が、「続きを読む」の背景部分は変わらず。
    この部分も同色だと統一感があってよいかなと。
    それらしい該当箇所がないかと探しましたが見つけられませんでした。…
    何度もお手数ですがよろしくお願いいたしますm(_ _)m