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

Seesaaの背景色を変更する方法

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

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

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

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

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

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

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

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

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

背景色を変更する方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最終更新日:2018/01/24

WordPressの始め方
 にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

ブログの更新はこちらから

Seesaaブログの背景色を変更する方法【新システム】”に11件のコメントがあります。

コメントの反映には時間がかかる場合があります。

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

CAPTCHA


  1. fuku

    しげぞう様

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

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

  2. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。サイドバーのタイトル部分も実は「h3」なので、h3の装飾がサイドバーにも影響していると思います。なので、サイドバータイトルでは文字の下のピンクの線を消すようなCSSを追加しておけば解決する気がします。

    これを追加することで解決すると思いますが、もしそれでも解決しない場合には再度コメント下さい。それからもう1つの質問コメント頂いてますが、ちょっと用事があり、返信は午後になりそうです。どうぞよろしくお願い致します。

  3. fuku

    しげそう様

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

    しげぞう様のご指摘通りコードを追加したところ、トップページのh3にも装飾することができました。ありがとうございます。

    しかし、また別の問題が。。;
    ご教示いただいたコードを追加したところ、右サイドバータイトルにも文字装飾がされています;
    具体的に申し上げますと、現在h3には「文字の下枠をピンクにする」装飾をしているのですが、ご教示いただいたコードを追加すると、右サイドバータイトルの枠線の下の部分もなぜかピンクになっているのです。
    この事象の原因をご存知でしたら、ご教示いただけますでしょうか。

    以上です。よろしくお願いします。

  4. しげぞう 投稿作成者

    fuku様

    返信ありがとうございます。ホントですね!私も今気が付きました。h3のスタイルは「.article__content h3」で装飾していると思いますが、これは個別記事で反映されますね。同じ装飾を「h3」で書けばトップページにも反映されると思います。一度試してみて下さい。記事も修正しておきますね。毎回ご指摘ありがとうございます!

  5. fuku

    しげぞう様

    お世話になっております。fukuです。
    しげぞう様のアドバイス通りにコードを追加したところ、うまく反映されました。
    いつもありがとうございます。

    一点補足です。

    以下の質問コメント

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

    ですが、文中のh2はh3です。(タイプミスしました、すいません。。)

    要約すると、トップページのh3は装飾されず、記事ページのh3は装飾されている状態です。
    質問する記事が違うかもしれませんが、今回質問させていただいた質問と同じようなことが原因で起きているのではないかと思っています。

    以上です。お手数おかけしますが、よろしくお願いします。