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ブログのフォントや文字のカスタマイズ【新システム】”に12件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    緑おでん様

    コメントありがとうございます。Seesaaブログは選択されたデザインによって若干違う部分があります。サイドバーのカーソルを乗せた時の色に関してですが、きちんとCSSで設定しても元々設定されている物が優先される場合もあります。

    その辺を確認すれば対処ができるかと思いますので、もしよければブログのURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  2. 緑おでん

    始めまして。
    いつも参考にさせていただいております。
    本ページに紹介されていますタグを順番に記入してみました。
    記事ページのリンクにカーソル乗せたときの文字色代わるんですけれども、
    サイドバーのリンクにカーソル乗せた時の文字色の変更がうまくできません。
    なにか原因があるんでしょうか?
    教えていだたけたら幸いです。

  3. しげぞう 投稿作成者

    ピクミン様

    コメントありがとうございます。まず1つ目の質問でCSSが反映されないという問題ですが、すみません!私の記述ミスです。「.body」ではなくて「body」ですね。「.」は必要ないです。一度「.」を抜いて保存し、ブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。

    記事の記述も修正しておきました。言われるまで気が付きませんでした!ありがとうございます!

    それとCSSやHTMLの勉強ですが、私も2年前?までは全くのド素人でHTMLとCSSの区別すら分からない状態でした(笑)。ブログは書いていたのですがカスタマイズとかは全くせずにやってました。

    CSSやHTMLを勉強したきっかけは知り合いにホームページ作成を依頼された事です。全く分からない状態でしたが、何故か引き受けたんですよね(これは今でも意味不明です)。で、やり始めたら全く分からない事だらけで1つ1つ勉強しながら作成しました。元々勉強したい気持ちはあったのですが、このように後に引けない状態でないと続かなかったと思います。

    そんな訳で何とかホームページを1から作成したらある程度基本的な部分が理解できて、後はそれを無料ブログやWordPressで応用した感じです。すぐに忘れてしまうので、忘れないように全部記事にしておいたのが良かったと思います。カスタマイズの記事を書くと自分の理解も深まりますし、間違っていると今回のように指摘して頂けるので非常に良かったと思っています。

    という訳で私の場合は独学です。特に塾とか通う必要はないと思いますが、その熱意が続くかどうかがポイントになると思います。

    後に引けない状態を作ることができれば必死にやれると思いますが、私としてはもうあんな大変な思いはできればしたくないと思っているのが正直な所です(笑)。

  4. ピクミン

    しげぞうさま、続けて質問させていただきます。
    今、僕はシーサーブログでブログを作っておりますが初めて作るのでいろいろと悪戦苦闘しております。いつも、このサイトのCSSやHTMLの書き方を参照させていただいてます。
    それで、一つ質問なのですがしげぞうさまはどうやってこのCSSやHTMLの書き方、この見やすいサイトの作り方を学んだのか気になりました。
    自分ももっとこういった知識を学んでいろいろなサイトを作ってみたいです。こういった知識を学ぶにはサイト制作の塾に通う以外の選択肢はないのでしょうか?

  5. ピクミン

    しげぞうさま、いつもありがとうございます。
    今シーサーブログで記事を書いているのですがCSSで
    .body{
    font-size:15px; /* 文字の大きさ */
    color:#333333; /* 文字の色(グレー) */
    line-height: 1.8; /* 行の高さ */
    }
    を書き加えたのですが、いつまで経ってもまったく反映されません。
    この場合、どうしたらよいでしょうか?

  6. しげぞう 投稿作成者

    REN様

    コメントありがとうございます。まず、フォントに関してはこのファインとや文字のカスタマイズの記事に書いてますが、フォントの部分にメイリオや色々なフォントの記述があると思います。これはwindowsやmac、スマホで使えるフォントが違うため色々と書く必要があります。それでこの記述の先頭にメイリオを入れてますが、これの前に使いたいフォント名を書けば適応されるかと思います。

    それとタグに関しては絶対ダメという事はありませんし、タグを表示させて良い結果になる場合もあります。ただ個人的にはサイドバーなどには設置しないという事です。各記事のタグの設定に関してはやっておいた方が良いと思います。

    最後にブログの質問ですが、私の場合はある程度書きたい事を書いたら放置して3ヶ月以上は様子を見ます。早ければ1ヶ月~3ヶ月で上位にいくような記事が出てきたりします。ジャンルを絞ったミニブログだと大体20記事~40記事程度が多いです。キーワード自体はあまり変更はしません。それで書いてみて様子見して明らかにキーワードを変更した方が良いかなと思った時だけ変更するようにしてます。ミニブログの場合は無料ブログ(Seesaaブログ)を利用してます。

    また、キーワードを変更するにしても元のキーワードは残すようにしてます。ミニブログでもライバルが少ないとすぐに上位まで行きますが、こればっかりはやってみないと分かりません。私自身も10ブログ作って2つ3つのブログで少しでも収益があればいいなという感じです。

  7. REN

    お久しぶりです。私の教科書ブログいつもお世話になっております。
    質問がございます。フォントについてですが、現在しげぞう様のご教授通りのフォント、メイリオなどの設定になっていますが、変えることは可能ですか?好きなフォントを使ってみたくなりまして。

    それともうひとつ、以前にタグはサイドバーや記事下に付けない方がいいというコメントをいただきましたが、記事を投稿するときにもタグの設定はしない方が良いのでしょうか?最近タグはサイドバーや記事下に付けた覚えはないのですが、アクセス解析をみるとタグで検索されていることも多いようです。記事投稿時のタグも空にしてアップした方がいいのでしょうか?

    ついでで申しわけありません。もうひとつ。何個かブログを持っていているという話は前にも話したことがありますが、全然検索順位が上がらないようなブログはほっといてもいいものでしょうか?また、記事は定期的に更新しているので記事数は増えてきていますので、順位が上がる可能性があるとすれば、どのくらいの期間様子をみれば善いのか?どのくらいの記事数がベストなのか。これはあくまでも、ジャンルをある程度絞ったサイトです。またキーワードのライバルが少し多い気がしますので、タイトルなどの見直しをかけた方が良いのか?

    分かる範囲でお知恵を頂戴したいです!宜しくお願いいたします。

  8. リグート

    しげぞう様

    返信ありがとうございます。
    無事できたようでございます。

    また何かあればコメントさせて頂きます。
    ご教示頂きましてありがとうございました。

  9. しげぞう 投稿作成者

    リグート様

    返信ありがとうございます。記事タイトルの下線とサイドバーリンクの下線を消すという事でいいでしょうか?その場合はスタイルシート(CSS)の一番下に次のコードを追加して下さい。

    /* 記事タイトルの下線 */
    h2.entry__title a {
        text-decoration: none;
    }
    /* サイドバーの下線 */
    aside.side.side--right a {
        text-decoration: none;
    }

    これを追加して保存し、ブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。それでも反映されない場合にはお手数ですが、再度コメント頂けると助かります。よろしくお願い致します。

  10. リグート

    しげぞう様

    ご返信ありがとうございます。
    URLは下記となります。

    まだ何もできておらず、本当にしょぼいですが^^;
    畏れ入りますが、よろしくお願い致します。

  11. しげぞう 投稿作成者

    リグート様

    コメントありがとうございます。利用しているデザインによって若干違う部分はあるかもしれませんので、もしよければブログのURLを教えて頂けると原因の特定ができるかと思います。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  12. リグート

    初めまして。
    最近ブログを始めたばかりのものです。
    こちらのサイトでいつも勉強させて頂いております。
    ありがとうございます。

    さて、私の入力が誤っているのかもしれないのですが
    こちらのページを参考にリンクの色の変更とアンダーラインの設定はできたのですが
    記事タイトルとサイドバーのアンダーラインの消去等の設定がうまくできません。
    何か原因など思い当たることがございましたら、ご教示頂ければ幸いです。
    よろしくお願い致します。