今回はSeesaaブログのフォントや文字の大きさ、文字の色、リンクの色、行間などをカスタマイズする方法を紹介していきます。文字のフォントや色をちょっと変更するだけでも読みやすさが違ってくるので、結果的に訪問者の滞在時間が増えたりPV（ページビュー）が増えるという効果も期待できます。
一応基本的な部分を解説してみるのでそれを読んで自分なりのカスタマイズをしてみて下さい。
リンクの色をカスタマイズ
フォントや文字の大きさ、文字の色を変更する前に全体的なリンクの色を設定しておいた方がスムーズです。というのもスタイルシート（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と無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
すぴか様
返信ありがとうございます。解決できて良かったです！人気記事に関しては自分で自由形式をカスタマイズして画像付きにもできるかと思います。ただ、どれも画像付きにしてしまうと表示速度は落ちるというデメリットもありますのでバランスが必要かなと思います。
しげぞう様
解決しました。
いつもながら、ありがとうございます！
関連記事の方はこのままにしておきます。
ところで、ブログパーツの
「最近の記事」はアイキャッチ画像付きで表示されるのですが、「人気記事」は文字のみです。
これはシーサー側の考えでそうしてあるのでしょうか。
サイドバーに「人気記事」と「最近の記事」を両方のせているのですが、両方ともにアイキャッチ画像がついているとくどくなりすぎるような気もしています。
その反面、載せてみたい気もしています…^^;
すぴか様
コメントありがとうございます。デザイン⇒デザイン設定⇒適応中のデザイン名⇒HTML編集と進み、以下のコードを探して下さい。デフォルトのままだと９０行目付近です。
この部分のtext_summary(15)という部分の数値を30に変更すれば30文字になります。半角で入力して下さい。
それから記事下のアイキャッチ画像に下の1行分のタイトルの部分ですが、こちらも文字数の変更は可能なのですが、隣のタイトルと文字が重なってしまいます。
ここは文字が重ならないようにCSSで調整してあり、隣の場所を超える文字を隠すようなコードが追加されてます。これを解除してしまうと隣のタイトルと文字が重なってしまうような感じですね。
それで改行すればいいんですが、それをするにはこの関連記事の部分のHTMLとCSSをやり直しする必要があるかと思いますし、PCやタブレットなどの切替時の表示も考えてのやり直しが必要になるかと思います。なので関連記事に関してはこのままでもOKではないかなと思います。
おひさしぶりです。
再び「まとめブルー/ブロック 両カラム」の質問をさせていただきたく思います。
記事を開くと、いちばん下に「前の記事」と「次の記事」のタイトルが、だいたい全角15文字程度に簡略化して表示されています。
この文字数を20文字程度に増やすことは可能でしょうか？
それから、記事の下に同じジャンルの記事のアイキャッチ画像と1行分のタイトルが複数表示されています。
この1行を2行に増やすことが可能かどうか、また方法などを教えていただけると嬉しいです。
ご回答ありがとうございます。
自分のブログに関しては、時間が経ったら反映されておりました…大変失礼しました。
こちらのブログに関しては、文字の太さなどがイマイチIEで見るときとChromeで見るときと異なって見えます。
たしかに、ブラウザによって見え方が違ったり色々あるようで…
良くわかりませんが、そんなに支障はないので大丈夫です。
ありがとうございました。すみませんでした。
レンレン様
コメントありがとうございます。IEで反映されるのにChromeで反映されないというはフォントでしょう？それとも文字のサイズとか行間とかでしょうか？普通は逆の事が多いんですよね、IEで反映されないって事は時々あります。特にブラウザのバージョンとかが古いと反映されないコードが結構あったりします。
それ以外でもCSSをブラウザ別に条件分岐するような記述もあるので、その条件分岐の記述ミスかと思ったのですが、Seesaaブログでそれはちょっと考えにくいです。なのでもし機会があれば別のPCとかでも確認してみるのが良いかもしれません。解決にならずすみません。
はじめまして。こちらのブログをよく参考にさせて頂いております。
このフォントの変更等なのですが、IEで見るときちんと変更されているのですが、
グーグルクロームで見るとデフォルトの文字になってしまいます。
私のブログだけでなくこちらのブログもそうなってました。
なぜでしょうか…。
read-more 続きを読む
なるほどですね～。
ありがとうございました！
変更できました♪
すぴか様
返信ありがとうございます。「続きを読む」の部分忘れてましたね（笑）
.read-more a { background: #5ad3f4; }これを追加してカラーの部分を変えてみて下さい。
しげぞう様
ありがとうございます！
おかでさまで、日付の背景色と記事の外枠の色の変更が可能になりました^^
が、「続きを読む」の背景部分は変わらず。
この部分も同色だと統一感があってよいかなと。
それらしい該当箇所がないかと探しましたが見つけられませんでした。…
何度もお手数ですがよろしくお願いいたしますm(_ _)m
すぴか様
コメントありがとうございます。
ここの水色の部分は２つのパーツに分かれています。
１．日付の背景色（水色）
２．記事の外枠（同じ水色）
おそらく両方を変更するのだと思いますのでそれぞれのパーツの色を変更します。
.article__date { background: #5ad3f4; } .entry { border: 2px solid #5ad3f4; } .article { border: 2px solid #5ad3f4; }「article__date」はトップページと個別記事の日付の部分の背景色、「entry」がトップページの記事それぞれの記事の外枠、「article」が個別ページの外枠に対応する部分なので上記をCSSに追加し、カラーナンバー（#5ad3f4になっている部分）を好きな色の番号に変更すればOKです。
前回はありがとうございました！
改めて質問です。
「まとめブルー/ブロック 両カラム」のブロックの枠線がデフォルトでは水色になっています。
この色を変えるのにはどうすればいいでしょうか？
よろしくお願いしますm(_ _)m
おかげさまで問題解決しました！
トップページと個別ページと2箇所なんですね～なるほど。
ほかにも疑問点は多数あります。…
続けて質問するのは気がひけますので、あらためて訪問させていただきます。
本当に助かりました。
ありがとうございました m(_ _)m
すぴか様
問題解決良かったです。日付の時間だけ消したいという事ですが、これは時間の部分だけというのはCSSで非表示はおそらくできませんので、HTMLを編集します。
一応念のために編集する前のHTMLメモ帳などにコピーして失敗した時に元に戻せるようにしてから作業して下さい。
デザイン設定の「HTML編集」へ進み、2箇所編集します。2箇所というのはトップページの時間の部分と、個別記事の時間の部分の2箇所です。
初期状態だと73行目付近に次のような記述があります。カスタイズしていると若干行数は前後するかも。
<p class="article__date"> <time datetime="<% article.createstamp | date_format("%Y年%m月%d日") -%>"> <% article.createstamp | date_format("%Y年%m月%d日") -%></time> <% article.createstamp | date_format("%H:%M") -%></p>この記述が「個別記事」の日付（年、日、時間）を表示させる部分ですので、ここから時間を表示させる部分だけ削除します。
時間を表示させているのが最後の部分のこの記述です。
<% article.createstamp | date_format("%H:%M") -%>この部分だけを削除すればOKです。間違えて余計な部分まで削除しないように注意です。
さて、同じ記述が126行目付近にもあります。こちらはトップページの日付の記述で、上記と全く同じ記述がありますので、時間の部分だけ削除すれば時間だけ表示されなくなるはず。
もしこれで上手く行かない場合にはまたコメント下さい。
すみません。追記です。
個別記事タイトルのフォントを変える方法について、書いてあるのを見つけました！
解決しました。
しげぞう様
こんちは！
おかげ様で本文記事のフォントサイズを変更することができました！
ありがとうございます。
引き続き「まとめブルー/ブロック 両カラム」の質問で恐縮ですが^^;
各記事の年月日時間についてです。
年月日はそのままで、時間だけ非表示にすることは可能でしょうか？
または
年月日時間すべてを非表示にすることは？
それと、欲張りで申し訳ないですが、
記事を開いたときの「タイトル」のフォントサイズを変えるにはどこを変えたらよいか、
または何か追加指示が必要なのか…。
旧システムのスタイルシートは分かりやすい仕様だったので、素人でも割合かんたんに
カスタマイズが可能だったのですが、新システムは非常に分かりにくいです。
お手数ですが、よろしくお願いいたしますm(_ _)m
すぴか様
コメントありがとうございます。なるほど、フォントを変更するとデザインが崩れるという感じだと思います。
まず、bodyというのは守備範囲が広くてブログ全体が対象になる場合がほとんどですので、これを記事内だけという範囲で適応させれば解決かなと思います。
具体的には２つありまして、トップページと個別ページそれぞれの記述をする必要があります。CSSに以下を追加です。
.entry__body { font-size: 16px; }.article__content { font-size: 16px; }文字の大きさは16pxにしてますが、好きな大きさに変更して下さい。最初の記述がトップページ用、下のが個別記事用の記述です。CSSに追加できたら保存してブログを表示。それで再読込み（リロード）して反映されるか確認してみて下さい。
もし反映されない場合には再度コメント下さい(^o^)／
こんにちは！
いつも参考にさせて頂いています^^
実は新システムのデザインを採用してからとても困っています。
「まとめブルー/ブロック 両カラム」の3カラムを使用していますが、
デフォルトのフォントサイズが14pxなのですが、小さくて見にくいため16pxか18pxに変更したいと思っています。
スタイルシートで、bodyの部分のフォントサイズを変えると、横2列のブロックが１列のみになってしまい、もう1列がまったく表示されなくなってしまいます。
サイドバー2つは崩れないので、フォントを大きくすることで「本文記事の2ブロック表示」のみに何かしらの影響を与えるのだと推測しますが、CSSの記述をみてもチンプンカンプンで。
もしかするとCSSではなくHTML編集をカスタマイズ？？？
過去記事を見やすくするために、いちいち1記事ごとにフォントを110％の強制設定をしたりしてごまかしていますが…限界です^^;
どうぞよろしくお願いいたしますm(_ _)m
緑おでん様
コメントありがとうございます。Seesaaブログは選択されたデザインによって若干違う部分があります。サイドバーのカーソルを乗せた時の色に関してですが、きちんとCSSで設定しても元々設定されている物が優先される場合もあります。
その辺を確認すれば対処ができるかと思いますので、もしよければブログのURLを教えて下さい。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。
始めまして。
いつも参考にさせていただいております。
本ページに紹介されていますタグを順番に記入してみました。
記事ページのリンクにカーソル乗せたときの文字色代わるんですけれども、
サイドバーのリンクにカーソル乗せた時の文字色の変更がうまくできません。
なにか原因があるんでしょうか？
教えていだたけたら幸いです。
ピクミン様
コメントありがとうございます。まず1つ目の質問でCSSが反映されないという問題ですが、すみません！私の記述ミスです。「.body」ではなくて「body」ですね。「.」は必要ないです。一度「.」を抜いて保存し、ブログを表示させてから「Ctrl」と「F5」を一緒に押してリロードしてから確認してみて下さい。
記事の記述も修正しておきました。言われるまで気が付きませんでした！ありがとうございます！
それとCSSやHTMLの勉強ですが、私も2年前？までは全くのド素人でHTMLとCSSの区別すら分からない状態でした（笑）。ブログは書いていたのですがカスタマイズとかは全くせずにやってました。
CSSやHTMLを勉強したきっかけは知り合いにホームページ作成を依頼された事です。全く分からない状態でしたが、何故か引き受けたんですよね（これは今でも意味不明です）。で、やり始めたら全く分からない事だらけで１つ１つ勉強しながら作成しました。元々勉強したい気持ちはあったのですが、このように後に引けない状態でないと続かなかったと思います。
そんな訳で何とかホームページを１から作成したらある程度基本的な部分が理解できて、後はそれを無料ブログやWordPressで応用した感じです。すぐに忘れてしまうので、忘れないように全部記事にしておいたのが良かったと思います。カスタマイズの記事を書くと自分の理解も深まりますし、間違っていると今回のように指摘して頂けるので非常に良かったと思っています。
という訳で私の場合は独学です。特に塾とか通う必要はないと思いますが、その熱意が続くかどうかがポイントになると思います。
後に引けない状態を作ることができれば必死にやれると思いますが、私としてはもうあんな大変な思いはできればしたくないと思っているのが正直な所です（笑）。
しげぞうさま、続けて質問させていただきます。
今、僕はシーサーブログでブログを作っておりますが初めて作るのでいろいろと悪戦苦闘しております。いつも、このサイトのCSSやHTMLの書き方を参照させていただいてます。
それで、一つ質問なのですがしげぞうさまはどうやってこのCSSやHTMLの書き方、この見やすいサイトの作り方を学んだのか気になりました。
自分ももっとこういった知識を学んでいろいろなサイトを作ってみたいです。こういった知識を学ぶにはサイト制作の塾に通う以外の選択肢はないのでしょうか？
しげぞうさま、いつもありがとうございます。
今シーサーブログで記事を書いているのですがCSSで
.body{
font-size:15px; /* 文字の大きさ */
color:#333333; /* 文字の色（グレー） */
line-height: 1.8; /* 行の高さ */
}
を書き加えたのですが、いつまで経ってもまったく反映されません。
この場合、どうしたらよいでしょうか？
ＲＥＮ様
コメントありがとうございます。まず、フォントに関してはこのファインとや文字のカスタマイズの記事に書いてますが、フォントの部分にメイリオや色々なフォントの記述があると思います。これはwindowsやmac、スマホで使えるフォントが違うため色々と書く必要があります。それでこの記述の先頭にメイリオを入れてますが、これの前に使いたいフォント名を書けば適応されるかと思います。
それとタグに関しては絶対ダメという事はありませんし、タグを表示させて良い結果になる場合もあります。ただ個人的にはサイドバーなどには設置しないという事です。各記事のタグの設定に関してはやっておいた方が良いと思います。
最後にブログの質問ですが、私の場合はある程度書きたい事を書いたら放置して3ヶ月以上は様子を見ます。早ければ1ヶ月～3ヶ月で上位にいくような記事が出てきたりします。ジャンルを絞ったミニブログだと大体20記事～40記事程度が多いです。キーワード自体はあまり変更はしません。それで書いてみて様子見して明らかにキーワードを変更した方が良いかなと思った時だけ変更するようにしてます。ミニブログの場合は無料ブログ（Seesaaブログ）を利用してます。
また、キーワードを変更するにしても元のキーワードは残すようにしてます。ミニブログでもライバルが少ないとすぐに上位まで行きますが、こればっかりはやってみないと分かりません。私自身も10ブログ作って２つ３つのブログで少しでも収益があればいいなという感じです。
お久しぶりです。私の教科書ブログいつもお世話になっております。
質問がございます。フォントについてですが、現在しげぞう様のご教授通りのフォント、メイリオなどの設定になっていますが、変えることは可能ですか？好きなフォントを使ってみたくなりまして。
それともうひとつ、以前にタグはサイドバーや記事下に付けない方がいいというコメントをいただきましたが、記事を投稿するときにもタグの設定はしない方が良いのでしょうか？最近タグはサイドバーや記事下に付けた覚えはないのですが、アクセス解析をみるとタグで検索されていることも多いようです。記事投稿時のタグも空にしてアップした方がいいのでしょうか？
ついでで申しわけありません。もうひとつ。何個かブログを持っていているという話は前にも話したことがありますが、全然検索順位が上がらないようなブログはほっといてもいいものでしょうか？また、記事は定期的に更新しているので記事数は増えてきていますので、順位が上がる可能性があるとすれば、どのくらいの期間様子をみれば善いのか？どのくらいの記事数がベストなのか。これはあくまでも、ジャンルをある程度絞ったサイトです。またキーワードのライバルが少し多い気がしますので、タイトルなどの見直しをかけた方が良いのか？
分かる範囲でお知恵を頂戴したいです！宜しくお願いいたします。
しげぞう様
返信ありがとうございます。
無事できたようでございます。
また何かあればコメントさせて頂きます。
ご教示頂きましてありがとうございました。
リグート様
返信ありがとうございます。記事タイトルの下線とサイドバーリンクの下線を消すという事でいいでしょうか？その場合はスタイルシート（CSS）の一番下に次のコードを追加して下さい。
/* 記事タイトルの下線 */ h2.entry__title a { text-decoration: none; } /* サイドバーの下線 */ aside.side.side--right a { text-decoration: none; }これを追加して保存し、ブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認して下さい。それでも反映されない場合にはお手数ですが、再度コメント頂けると助かります。よろしくお願い致します。
しげぞう様
ご返信ありがとうございます。
URLは下記となります。
まだ何もできておらず、本当にしょぼいですが＾＾；
畏れ入りますが、よろしくお願い致します。
リグート様
コメントありがとうございます。利用しているデザインによって若干違う部分はあるかもしれませんので、もしよければブログのURLを教えて頂けると原因の特定ができるかと思います。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。
初めまして。
最近ブログを始めたばかりのものです。
こちらのサイトでいつも勉強させて頂いております。
ありがとうございます。
さて、私の入力が誤っているのかもしれないのですが
こちらのページを参考にリンクの色の変更とアンダーラインの設定はできたのですが
記事タイトルとサイドバーのアンダーラインの消去等の設定がうまくできません。
何か原因など思い当たることがございましたら、ご教示頂ければ幸いです。
よろしくお願い致します。