Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】

Seesaaブログのタイトル、記事タイトル、サイドバーのタイトルのカスタマイズ Seesaaブログアフィリエイトとカスタマイズ
2018.04.30

今回はブログのタイトル部分や記事タイトル、サイドバーのタイトルのカスタマイズをしていきます。ちなみにブログタイトルや説明文は非表示にしたいという方はこちらの記事の途中で書いてますので、こちらを参考にして下さい。

⇒Seesaaブログのヘッダー画像をリンクにする方法【新システム】

それでは早速カスタマイズスタート！

もしもへ https://affiliate150.com/important-point
Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由
Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...
affiliate150.com
2023.01.24

ブログタイトル部分のカスタマイズ

まずSeesaaブログの新システムではブログのタイトルが中央になっていますので、位置調整をしてから文字色とか文字の大きさを変更してみます。

せっかくなのでここで必要になるCSSの基本を幾つか紹介しておきます。これを覚えておけばブログのタイトルの位置調整は自分でできるようになります。

  • 「text-align:left」⇒文字の左寄せ
  • 「text-align:right」⇒文字を右寄せ
  • 「padding-left:●●px」⇒左に●●pxの余白（右に移動）
  • 「padding-right:●●px」⇒右に●●pxの余白（左に移動）
  • 「padding-top:●●px」⇒上に●●pxの余白（下に移動）
  • 「padding-bottom:●●px」⇒下に●●pxの余白（上に移動）

とりあえずこの6つがあればブログのタイトルは位置調整できるようになります。つまり、「text-align」で右もしくは左に寄せて「padding」で細かい位置を調整するようなイメージです。

例えばブログのタイトルを左上に持って行きたいという場合にはこんな感じ（スタイルシート編集で一番下にコードを追加）。

.header {
    padding: 0 0 160px 0;
    text-align: left;
}

.header h1 {
    margin-top: 30px;
}

元々このヘッダーには上下80pxずつの余白があるので、この上の余白80px分を下にもっていき、テキスト部分を左に寄せる「text-align:left;」を追加。これならヘッダーの高さを変えずにタイトルだけ移動した感じになります。

それでついでにタイトル部分(h1)に30px分の余白（margin-top）を空けます。これは必要ないかもですが、時々タイトルが上に行き過ぎて見切れてしまうため念のために追加。

Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ-1

前述したようにヘッダー部分には初期状態で「上下」に80pxずつの余白があります。なのでヘッダー画像を設置しない人には広すぎるますよね。という事でこのスペースを小さくしたいという場合にはこんな感じでOK。

.header {
  padding: 0;
}

すると余白が無くなってこんな感じになります。

ブログのタイトルやサイドバーのタイトルのカスタマイズ-2

以上これでブログタイトルの位置調整は自分でできるはず。

ブログタイトルの文字の大きさや文字色を変更

さて、ブログのタイトルの文字の大きさや色を変更するので管理画面から「デザイン」⇒「CSS/HTML編集」⇒「適応中のデザインタイトル」と進み、「スタイルシート編集」のタブを選択。

Seesaaブログスタイルシート編集画面

スタイルシートの一番下に次のコードを追加。

.header h1 {
  font-size: 32px;  /* 文字の大きさ */
  line-height: 1.4;  /* 行間の高さ */
  font-weight: bold; /* 文字を太字に */
}

.header h1 a {
  color: #333;  /* 文字の色 */
}

後はそれぞれ好きな大きさや色に変更しておけばOK。ついでに「ブログの説明文」も同じ要領でスタイルシートの一番下に次のコードを追加していきます。

p.description {
  font-size: 15px;     /* 文字の大きさ */
  color: #000;         /* 文字の色 */
  line-height: 1.8;    /* 行間の高さ */
  margin-bottom: 10px; /* 下のコンテンツとの余白 */
}

以上がブログのタイトルのカスタマイズです。

記事タイトルのカスタマイズ

記事タイトルは「トップページに表示される記事タイトル」と「個別記事のタイトル」を別々に装飾する必要がありそうです。

スタイルシートの一番下に次のコードを追加。

/* 記事タイトル（トップページ用） */
.entry__title {
    font-size: 20px;  /* 文字の大きさ */
}

.entry__title a {
    color: #000;  /* 記事タイトルリンクの色 */
    text-decoration: none;  /* 記事タイトル下線無し */
}  

/* 記事タイトル（個別記事用） */
h2.article__title {
    font-size: 20px;
    color: #000;
    text-decoration:none;
}

一応文字の大きさと色だけ変更してみた例です。

個別記事の記事タイトルはリンクになっていないので、コードをまとめて書く事ができますが、トップページに表示される記事タイトルはリンクになっているので、上記のコードのように、色や文字の大きさなどは分けて書く必要があります。

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

それではサイドバーのタイトルのカスタマイズです。ここでは一応背景色を設定して文字を中央寄せにしてみました。これもスタイルシートにどんどん追加。

/* サイドバータイトル */
.module__heading {
  font-size: 16px;  /* 文字の大きさ */
  font-weight: bold;  /* 文字を太字に */
  background-color:#1F5E73;  /* 背景色 */
  color:#fff;  /* 文字の色 */
  text-align:center;  /* 文字を中央に揃える */
  margin-bottom: 15px;  /* 下に余白 */
  border-radius: 10px;        /* 角を丸く */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px; 
}

こんな感じになりました。

ブログのタイトルやサイドバーのタイトルのカスタマイズ-4

以上Seesaaブログのブログタイトル、記事タイトル、サイドバータイトルのカスタマイズでした。

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

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

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

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

コメント

  1. しげぞう より:
    2017年3月27日 5:43 PM

    クニマス様

    コメントありがとうございます。私のSeesaaブログ（新デザインシステム）でチェックしてみたのですが、デフォルトでタブは「記事タイトル：ブログタイトル」という並びになっています。ここにURLが表示されるって事でしょうか？それをブログタイトルにしたいという感じですか？違ったらすみません。

    お手数ですが、再度質問もらえたら嬉しいです。もし良かったらブログのURLも教えて下さい。コメント公開時にはブログのURLは削除しますので、どうぞよろしくお願い致します。

  2. クニマス より:
    2017年3月25日 8:10 PM

    突然すいません。クニマスともうします。
    seesaaブログの設定方法について質問させて頂きたくコメントしました。

    初期設定だと、ブラウザタブのタイトルにURLが表示されているため、ブログタイトルに変更しようと試行錯誤しているところですが、方法が分かりません。
    様々なサイトで調べましたが、載っているのはバージョンが古いものばかりで、最新式の仕様での変更方法が分かりません。しげぞう様、もし方法をご存知でしたら、教えていただけないでしょうか。
    ちなみに過去の仕様でのやり方は以下のURLのようなものです。
    http://tempurememo.seesaa.net/article/78539512.html

    お手数かけますが、お返答のほどよろしくお願いします。

  3. トニー より:
    2017年3月20日 12:44 AM

    しげぞう様、返信が遅くれてしまい申し訳ありません。
    トニーです。

    CSSの件ですが、おかげさまでなんとか修復しました。
    うまくいかなかった原因ですが、
    見えない「？」マークが存在していることがわかりました。

    この「？」は見えないため、
    何が間違っているのか気付くことができないので、
    ためにメモ帳に貼り付けたコードにある空白をすべて削除し、
    再び空白をいれるとうまくいくことがわかりました。

    いろいろと丁寧に教えて頂き、
    本当にありがとうございました！

    最後に、僕の使用しているデザイン名は、
    シンプルA.ホワイト 右カラムでした。

  4. しげぞう より:
    2017年3月16日 11:28 AM

    トニー様

    返信ありがとうございます。トニー様のCSSからそのまま追加されているコードを私のSeesaaブログに貼り付けて確認したのですが、反映されているので原因がよく分かりませんね。1度追加したCSSを全てコピーしてメモ帳などに貼り付け。それで追加したCSSを全部削除して保存（初期状態に）。

    それからもう一度改めてCSSを追加してもらえないでしょうか？それと使われているデザインも教えてもらえると助かります。

  5. トニー より:
    2017年3月16日 12:25 AM

    しげぞう様、こんばんは。
    度々申し訳ありません。
    トニーです。

    コピペに問題があると聞いて、早速メモ帳に貼り付けて「？」が
    どうか確認して、再びCSSに貼り付けてはみたのですが、
    やはりうまくいきませんでした。

    うまくいかないコードはいくつかあるんですが、
    １つだけチェックして頂けないでしょうか？

    /* サイドバータイトル */
    .module__heading {
      font-size: 16px;  /* 文字の大きさ */
      font-weight: bold;  /* 文字を太字に */
      background-color:#1F5E73;  /* 背景色 */
      color:#fff;  /* 文字の色 */
      text-align:center;  /* 文字を中央に揃える */
      margin-bottom: 15px;  /* 下に余白 */
      border-radius: 10px;        /* 角を丸く */
      -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
      -moz-border-radius: 10px;
    }

    大変お手数おかけしますが、
    何卒よろしくお願い致します。

  6. しげぞう より:
    2017年3月15日 9:44 AM

    トニー様

    返信ありがとうございます。また、URLもそのままでOKという事でありがとうございます。
    トニー様のブログの追加されているCSSをそのまま私のSeesaaブログのテスト用のCSSにコピペしてみたのですが、私の方は反映されてます。

    先日も同じような質問が別の方からもあったのですが、コピペの問題があるかもしれません。

    一度追加したCSSをメモ帳にコピペしたらそれぞれの記述に「 ? 」が挿入されていたという事でした。この「 ? 」を消してから再度CSSに貼り付けたら上手く反映されたようです。

    なので、一度追加されたCSSをコピペしてメモ帳に貼り付けて「 ? 」が挿入されていないかチェックしてみてもらえますか？

  7. トニー より:
    2017年3月14日 11:51 PM

    しげぞう様、こんばんは。
    トニーです。

    迅速なご返答ありがとうございます。

    しげぞう様がおっしゃられた３つをすべて実践し、
    ミスがないかしっかり確認してみたはずなのですが、
    結果はまったく変わりませんでした。

    しかし、すべてがうまくいっていない
    わけではありません。

    うまくいったやつと、
    うまくいかなかったやつの
    ２つに分けてみました。

    【うまくいったやつ】
    ・パンくずリストの設置
    ・フッターのコピーライト表記を入れる
    ・自由形式のタイトルを表示させる方法
    ・トップページの続きを読むを削除して全文表示させる

    【うまくいかなかったやつ】
    ・ブログの背景色を変更する
    ・ブログのタイトルやサイドバーのタイトルのカスタマイズ
    ・ブログの「最新の記事」のタイトルや抜粋文のカスタマイズ

    こんな感じになります。

    ブログのURLはこちらです。（URLは削除しなくても大丈夫です）
    http://tonyjunior6478.seesaa.net/

    再びで申し訳ありませんが、
    ご教授のほうお願い致します。

  8. しげぞう より:
    2017年3月14日 8:10 AM

    トニー様

    コメントありがとうございます。原因として考えられるのはいくつかあります。

    １．CSSの優先順位

    CSSには優先順位的な物が邪魔をして反映されない場合があります。その場合には通常のコードの要素それぞれに「!importat」を付けると優先的に反映されます。

    以下は「!important」を付けた例です。

    .sample {
  text-decoration: none !important;
  color: #e37878 !important;
}

    こんな感じで「!important」を付けてみて下さい。それでも反映されない場合には次。

    ２．コードの記述ミス

    今回追加したコードに間違えがないか？再度確認。それと、それ以前に追加したコードで、間違って閉じタグ「　}　」を１つ消してしまったり、もしくは１つ多くコピペしたりすると、それ以降に書いた記述が反映されない場合がありますので、今回のコードはもちろん、以前追加したコードもチェックが必要かと思います。

    ３．再読込み

    ブラウザにキャッシュ（以前のデータ）が残っている場合があり、一時的に反映されない場合があります。その場合には「Ctrl」と「F5」を一緒に押してリロード。もしくは別のブラウザで確認をしてみて下さい。別のブラウザで反映されていれば大丈夫です。

    以上３つを試してみて反映されない場合にはまたコメント下さい。できればブログのURLも一緒に教えてもらえると助かります。もちろんコメント公開時にはURLは削除します。

  9. トニー より:
    2017年3月14日 2:42 AM

    しげぞう様、初めまして。
    いつも参考にさせて頂いております、トニーです。

    サイドバータイトル文字の中央寄せですが、
    なぜか文字が中央寄せになりません。

    確かにCSSで一番下ので上記の通りのコードを入力し、
    保存までしたのに、どういうわけか反映されずに今まで通りのままです。

    さらにいうと、背景色までも反映されていません。
    一体なにが間違っているのでしょうか？

    時間の空いている時で結構ですので、
    宜しければご教授頂けないでしょうか？

    よろしくお願い致します。

  10. しげぞう より:
    2017年2月28日 9:54 AM

    てつや様

    コメントありがとうございます。カバー画像が優先させる仕様というのはあり得るかもしれません。その辺はデザインによって違う部分もあると思いますので、もし良かったらブログのURLも教えてもらえると助かります。

    その場合、どのようにしたいのか？という部分も一緒にお願いします。もちろんコメント公開時にはURLは削除しますので、どうぞよろしくお願いします。

  11. てつや より:
    2017年2月25日 9:54 AM

    カバー画像をなくすとうまく反映されました。カバー画像をオリジナルにするとだめなんでしょうか？

  12. しげぞう より:
    2017年2月24日 8:39 PM

    てつや様

    コメントありがとうございます。スタイルシートは下に書いたもの（後に書いたもの）が優先的に反映されますので、途中の記述を変更するよりも、スタイルシートの一番下に変更したい記述を追加していく方が簡単ですし、後から元に戻すのも分かりやすいと思います。

    とりあえずスタイルシートに変更の記述を追加してみて下さい。その後ブログを表示させて「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。

    それでも反映されない場合にはお手数ですが、ブログのURLを教えて下さい。

  13. てつや より:
    2017年2月23日 6:12 PM

    タイトルの説明の文字色はあっさり変更できたのですが、タイトルの文字色が変わりません。
    .header h1 aの記述がスタイルシートの400行位にもあったのでここにも#FFF（白）に変えてみましたが黒のままです。他に変更するところがあるのでしょうか？

  14. しげぞう より:
    2015年11月9日 9:30 AM

    ICMT様

    コメントありがとうございます。サイドバーに関してですが、「新デザインシステム」のデザインかと思います。まず、サイドバーのタイトルには下にグレーの下線が付くようなスタイルが適応されてます。

    スポンサードリンクとインスタグラムの設置はサイドバーの自由形式だと思いますが自由形式のタイトルをカスタマイズして表示させるようにすると他のサイドバーのタイトルと同様のスタイルが適応されると思いますので、次の記事を参考に変更してみて下さいませ。
    ⇒Seesaaブログの自由形式のタイトルを表示させる方法【新システム】

    もしこれで上手くいかない場合には再度コメント頂けると助かります。

  15. ICMT より:
    2015年11月7日 7:05 PM

    初めまして。
    seesaaブログを始めたICMTです。
    サイドバーにスポンサードリンクとインスタグラムを追加しました。

    他のサイドバーにあるコンテンツをご覧いただければ終お分かりにいただけますが、
    グレーの下線がついています。
    同様のものをスポンサードリンクとインスタグラムにつけたいのですが、方法が分かりません。
    お手数でなければ方法をお伺いできればと思います。

    よろしくお願いいたします・

  16. にまこ より:
    2015年8月27日 7:37 PM

    しげぞう様

    しげぞう様、できました！
    本文は丸ごと消してみましたが問題なさそうです。
    こんなにご丁寧に教えていただき、心から感謝します。
    どうもありがとうございました！
    これからも参考にさせていただきます。応援しております。

  17. しげぞう より:
    2015年8月27日 12:57 PM

    にまこ様

    コメントありがとうございます。まず、Seesaaブログの管理画面からデザイン⇒デザイン設定⇒適応中のデザイン（テンプレート）と進み、「コンテンツHTML編集」のタブをクリックして下さい。この「コンテンツHTML」を編集する必要があるので、ここの記述を全部コピーしてメモ帳などに貼り付けておいて下さい。上手く行かなかった時にすぐに元に戻せるようにしておきます。

    準備ができたら「コンテンツHTML編集」の中の次の記述を探します。デフォルトで24行目付近にあると思います。

    <h4 class="recent-entry__title">
<% if:article.first_image -%>
<% article.subject | tag_strip | shorten(26) -%>
<% else -%>
<% article.subject | tag_strip | shorten(36) -%>
<% /if -%>
</h4>

    これが「最近の記事」のタイトルを表示させる部分です。ここに「shorten(数字)」という記述が2箇所あります。

    1番目の「shorten」は画像がある場合。2番目の「shorten」は画像が無い場合の設定です。

    数字は何文字表示させるか？という数字で、半角で計算されます。つまり、最初のshortenは26になってますので、全角で13文字表示されるという事です。

    なので、ここの数値を変更することで記事タイトルの文字数を変更する事ができます。一応両方変更しておくと良いと思います。変更したら保存し、ブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードして確認して下さい。

    また、先ほどの記述のちょっと下に次の記述があります。

    <p class="recent-entry__body">
<% if:article.first_image -%>
<% article.body | tag_strip | shorten(58) -%>
<% else -%>
<% article.body | tag_strip | shorten(74) -%>
<% /if -%>
</p>

    これが本文抜粋部分で同じく「shorten」が使われていますので、数値を変更することで表示させる文字数を変更できます。

    本文の抜粋が必要ないという場合にはこの部分をまるごと削除してもいいかも知れません。一応前述したようにバックアップはしておいてから試して見てください。

  18. にまこ より:
    2015年8月27日 11:51 AM

    はじめまして。
    いつも参考にさせて頂いております。
    もし場違いの質問でなければお教えいただきたいのですが、
    シーサーブログのサイドバーに「最近の記事」を載せています。
    その最近の記事の表示形式が、タイトル１行、本文２行と設定されています。
    本文よりもタイトルを目に留めてもらいたいので、できるならタイトルが多く表示されるか、タイトルのみ表示されるようにしたいのです。
    その方法がわからずこちらにコメントさせて頂きました。
    ご教授頂ければ幸いです。
    参考までに私のブログです

    よろしくお願い致します。

  19. しげぞう より:
    2015年7月30日 9:10 AM

    いまたく様

    コメントありがとうございます。時々設定しても反映されない事がありますので、一度自由形式に追加した内容を削除して「保存」し、保存できたら再度内容を追加して「保存」で試してみて下さい。それでもダメなら再度コメント頂けると助かります。よろしくお願い致します。

  20. いまたく より:
    2015年7月29日 4:23 PM

    久しぶりにSeeSaaを使うと変わっていて困っていたので非常に助かりました
    あとアマゾンのアソシエイトの作ったHTMLを自由形式で追加しても反映されなく困っているのでなぜでしょうか？
    数年前にやった時は普通に表示されていたのですが・・・

  21. しげぞう より:
    2015年6月23日 9:46 AM

    ＞パパろう様

    コメントありがとうございます。実際のブログに反映されない場合には自分のブログを表示させて「F5」を押してリロードしてみて下さい。それでだめなら「Ctrl」と「F5」を押して再度リロードします。もしそれでもダメな場合にはお手数ですが、一度追加したスタイルシートを削除して「保存」し、再度コードを追加し、改めて「保存」をしてみてください。

    以上を確認してダメなら再度コメント頂けると助かります。どうぞよろしくお願い致します。

  22. パパろう より:
    2015年6月22日 6:34 PM

    参考にさせていただいているんですが、
    プレビュー画面ではうまく編集できているのですが、実際のブログ画面は変化がありません、どうしてでしょう？
    シーサーブログシンプルD.ホワイト 右カラムを使用しています

タイトルとURLをコピーしました