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

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

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

コメント

  1. しげぞう より:

    fuku様

    コメントありがとうございます。重要なご指摘ありがとうございます。確かにトップページと個別記事でCSSは別に書く必要があるみたいです。後で記事も修正しておきます。

    まず、記事の領域の左右に余白を作るコードですが、トップページならfuku様の書かれていたコードでOKです。これです。

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

    これはトップページ用ですね。個別記事の場合はさらにこちらも追加が必要かと思います。

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

    それとh2タグに関しても同じようにトップページ用と個別ページと別々で設定する必要がありそうです。

    個別記事には「h2.article__title」とトップページ用に「.entry__title」でそれぞれ同じコードを追加すれば反映されると思われますので、一度試して頂けると助かります。どうぞよろしくお願い致します。

  2. fuku より:

    しげぞう様

    いつもお世話になっております。fukuです。

    アドバイス通り()内のコードを修正したところ、背景画が設定されました。ありがとうございます。

    いつも申し訳ございませんが、また質問があります。。
    下記コードを追加したところ、トップページには記事の左側スペースを調性する設定が反映されているのですが、記事一覧から各記事のページに飛ぶと設定が反映されていないように見えます。

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

    また、別記事で掲載されているh3タグの装飾についても、設定がうまくいっていないように感じます。
    こちらに関しては、トップページはh2タグの装飾がされておらず、記事一覧から飛んだページには反映されています。何か設定ミスがあるのでしょうか。。

  3. しげぞう より:

    fuku様

    返信ありがとうございます。画像のURLだけでなく、リンクのコードも一緒に入れているのが原因かと思います。

    背景画像の部分は次のように画像のURLだけを入れないと反映されません。また、画像のURLを囲む「 ” 」も半角である事を確認してみてください。

    background-image: url("http://●●");
  4. fuku より:

    しげぞう様

    ご回答ありがとうございます。fukuです。

    >以前送ってもらったURLと同じブログですよね?
    以前お伝えしたブログです。
    画像が背景に設置されていなかったため、コードを削除してました。。

    今コードを追加しましたが、やはり背景に画像が見えません。。
    お手数ですがご確認いただけますでしょうか。

    お忙しいところ恐れ入りますが、よろしくお願いします。

  5. しげぞう より:

    fuku様

    コメントありがとうございます。以前送ってもらったURLと同じブログですよね?今確認したのですが、CSSにコメントで書いていただいたコードが見えません。なので、コードが間違いなく「スタイルシート」に追加されているかをまず確認してみて下さい。もしスタイルシートの編集に追加されているのであればその状態で再度コメントを頂けると助かります。どうぞよろしくお願い致します。

  6. fuku より:

    しげぞう様

    お世話になります。fukuです。
    いつも記事を参考にさせていただいてます。

    本記事のコードを入力したのですが、背景画が変わりません。
    使用したコードは以下です。

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

    使用しているデザインは シンプルA.ホワイト 右カラム です。

    また、合わせて質問です。

    記事の枠線に、ドロップシャドウをつけたいのですが、コードをご存知でしたら
    ご教授いただけますでしょうか。

    以上です。お忙しいとは存じますが、よろしくお願いします。

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