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

この記事はSeesaaブログの新システム版です。旧システムを利用している方はこちらの記事を参考にして下さい。
ブログのタイトルやサイドバーのタイトルのカスタマイズ

今回はブログのタイトル部分やサイドバーのタイトルのカスタマイズをしていきます。ちなみにブログタイトルや説明文は非表示にしたいという方はこちらの記事の途中で書いてますので、こちらを参考にして下さい。
Seesaaブログのヘッダー画像をリンクにする方法【新システム】

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

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

まず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)を空けます。これは必要ないかもですが、時々タイトルが上に行き過ぎて見切れてしまうため念のために追加。

新システムタイトル-1

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

.header {
  padding: 0;
}

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

新システムタイトル-2

以上これでブログタイトルの位置調整は自分でできるはず。という事でブログタイトルの文字の大きさや色を変更していきましょう。

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

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

新デザインパンくず-3

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

.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

これでサイドバーも大体カスタマイズできると思うので自分の好きな数値や色に変更してみて下さいね。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

Seesaaブログのタイトルやサイドバーのタイトルのカスタマイズ【新システム】”に13件のコメントがあります。

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

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

  1. しげぞう 投稿作成者

    てつや様

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

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

  2. てつや

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

  3. しげぞう 投稿作成者

    てつや様

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

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

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

  4. てつや

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

  5. しげぞう 投稿作成者

    ICMT様

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

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

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

  6. ICMT

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

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

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

  7. にまこ

    しげぞう様

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

  8. しげぞう 投稿作成者

    にまこ様

    コメントありがとうございます。まず、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」が使われていますので、数値を変更することで表示させる文字数を変更できます。

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

  9. にまこ

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

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

  10. しげぞう 投稿作成者

    いまたく様

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

  11. いまたく

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

  12. しげぞう 投稿作成者

    >パパろう様

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

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

  13. パパろう

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