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

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

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

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

  1. しげぞう 投稿作成者

    クニマス様

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

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

  2. クニマス

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

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

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