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

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

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

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

有料だけど個人的におすすめの商材

⇒初心者のための商標サイト設計図

1 ブログタイトル部分のカスタマイズ
- 1.1 ブログタイトルの文字の大きさや文字色を変更
2 記事タイトルのカスタマイズ
3 サイドバータイトルのカスタマイズ

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

まず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;
}

.header {

padding: 0 0 160px 0;

text-align: left;

}

.header h1 {

margin-top: 30px;

}

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

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

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

.header {
  padding: 0;
}

.header {

padding: 0;

}

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

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

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

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

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

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

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

.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; /* 下のコンテンツとの余白 */
}

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;
}

/* 記事タイトル（トップページ用） */

.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; 
}

/* サイドバータイトル */

.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;

}

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

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