Seesaaブログの背景色を変更する方法【新システム】

Seesaaの背景色を変更する方法Seesaaブログアフィリエイトとカスタマイズ

今回はSeesaaブログの新デザインシステムの背景色を変更するカスタマイズを紹介していきます。

ただ、使うデザインによってはちょっと違う部分もあるかもしれないので、もし反映されない場合は利用している「デザイン名」をコメントで教えて貰えたら対応して追記していきたいと思います。

背景色を変更する前の準備

今回は背景色を変更していきますが、背景に画像を利用したいという場合には先に画像をアップロードして画像のURLをメモ帳などに貼り付けておきましょう。

シーサーブログの画像URLを調べる方法

準備ができたらまずは背景色を変更するための基本的な部分を把握しておきます。

先に知っておくべきポイントは次の通り。これは後で実際にやりながら見せますので一応参考までに。

  • 「body」:これは表示される画面全体の領域
  • 「.l-wrapper」:ヘッダー、メインコンテンツ、サイドバーを含む領域
  • 「.l-content」:メインコンテンツとサイドバーを含む領域
  • 「.header」:ヘッダーの領域
  • 「.entry」:記事タイトルと記事本文の領域
  • 「.side–right」:右サイドバーの領域
  • 「.side–left」:左サイドバーの領域

別に覚える必要はないので、このように分かれているという事だけ知っておけばOK。

背景色を変更する方法

背景色を変更する場合には色々なケースがありますが、上記で紹介したポイントを知っておけば難しい事はありません。上記ポイントの組み合わせで自由に背景色を変更できるようになるので、幾つか実際にやってみましょう。

左右のスペースの背景色を変更するケース

まずはブログの左右に空いたスペースの背景色を変更してみましょう。ブログの周りの部分?というか赤で囲っている「灰色」の部分に注目。左右のスペースを灰色に変更してみます。

Seesaaブログの背景色を変更する方法-1

このケースはスタイルシート(CSS)の編集で次のコードを一番下に追加して保存すればOK。

/* 全体の領域 */
body {
  background-color:#eee;  /* 灰色 */
  background-image: url("ここに画像のURL"); /* 画像を使う場合に記述*/
  background-repeat:repeat;  /* 画像の繰り返し */
}
/* ヘッダー・メインコンテンツ・サイドバーを含む領域 */
.l-wrapper {
  background-color:#fff;  /* 白 */
}

これを追加して保存し、ブログを表示。一応「Ctrl」と「F5」を一緒に押してリロードし、反映されているか確認して下さい。

ちょっと説明しておくとまず全体「body」を灰色にしておいてから左右のスペース部分以外の部分つまり「.l-wrapper」を白にする事で左右のスペースの背景色だけを変更することができます。

ただ、このように背景色を変更すると記事の文字やタイトルが左側にくっついていますよね。

Seesaaブログの背景色を変更する方法-2

なので次のコードをスタイルシートに追加して左に余白を作っておきます。ついでに右側にも余白を取ってバランスを取ります。

/* 記事タイトルと記事本文の領域 */
.entry {
  padding-left: 20px !important;  /* 左に余白 */
  padding-right: 20px !important; /* 右に余白 */
}

これでトップページの左右に余白ができますが、個別ページ用にさらにこちらも同じように追加。

article.article {
padding-left: 20px !important; /* 左に余白 */
padding-right: 20px !important; /* 右に余白 */
}

サイドバーの右側も余白ないので、こちらも追加。

.side--right {
  padding: 0 15px !important;
}

これで余白ができるので数値は変更しながら自分で調整してみて下さい。

サイドバーの背景色を変更するケース

次にサイドバーの背景色だけを変更する場合です。例えば右サイドバーの背景色を変更する場合には「.side–right」つまり右サイドバーの領域の背景色を変更すればいいので、スタイルシートに以下を追加。

/* 右サイドバーの背景色 */
.side--right{
  background-color:#eee;
}

これを追加して保存し、ブログを表示。一応「Ctrl」と「F5」を一緒に押してリロードし、反映されているか確認して下さい。

ただ、注意点としてはこれはサイドバーのコンテンツ部分の背景色です。こんな感じになります。

Seesaaブログの背景色を変更する方法-3

このように「サイドバーのコンテンツがある部分」は背景色が反映されますが、その下(コンテンツのない部分)は反映されないので、その点はちょっと微妙なので、サイドバーだけ背景色を変更するのはあまりおすすめはしません。

このように最初に紹介したポイント(領域)を知っておけば組み合わせで自由に変更ができます。それぞれ自分で考えながら背景色を変更してみてね。

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

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

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

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

コメント

  1. fuku より:

    しげぞう様

    お世話になります。fukuです。

    返信おくれまして申し訳ございません。ご教示いただいたコードで解決しました。
    ありがとうございます。

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