今回はSeesaaブログの新デザインシステムの背景色を変更するカスタマイズを紹介していきます。
ただ、使うデザインによってはちょっと違う部分もあるかもしれないので、もし反映されない場合は利用している「デザイン名」をコメントで教えて貰えたら対応して追記していきたいと思います。
背景色を変更する前の準備
今回は背景色を変更していきますが、背景に画像を利用したいという場合には先に画像をアップロードして画像のURLをメモ帳などに貼り付けておきましょう。
準備ができたらまずは背景色を変更するための基本的な部分を把握しておきます。
先に知っておくべきポイントは次の通り。これは後で実際にやりながら見せますので一応参考までに。
- 「body」：これは表示される画面全体の領域
- 「.l-wrapper」：ヘッダー、メインコンテンツ、サイドバーを含む領域
- 「.l-content」：メインコンテンツとサイドバーを含む領域
- 「.header」：ヘッダーの領域
- 「.entry」：記事タイトルと記事本文の領域
- 「.side–right」：右サイドバーの領域
- 「.side–left」:左サイドバーの領域
別に覚える必要はないので、このように分かれているという事だけ知っておけばOK。
背景色を変更する方法
背景色を変更する場合には色々なケースがありますが、上記で紹介したポイントを知っておけば難しい事はありません。上記ポイントの組み合わせで自由に背景色を変更できるようになるので、幾つか実際にやってみましょう。
左右のスペースの背景色を変更するケース
まずはブログの左右に空いたスペースの背景色を変更してみましょう。ブログの周りの部分？というか赤で囲っている「灰色」の部分に注目。左右のスペースを灰色に変更してみます。
このケースはスタイルシート（CSS）の編集で次のコードを一番下に追加して保存すればOK。
/* 全体の領域 */
body {
background-color:#eee; /* 灰色 */
background-image: url("ここに画像のURL"); /* 画像を使う場合に記述*/
background-repeat:repeat; /* 画像の繰り返し */
}
/* ヘッダー・メインコンテンツ・サイドバーを含む領域 */
.l-wrapper {
background-color:#fff; /* 白 */
}
これを追加して保存し、ブログを表示。一応「Ctrl」と「F5」を一緒に押してリロードし、反映されているか確認して下さい。
ちょっと説明しておくとまず全体「body」を灰色にしておいてから左右のスペース部分以外の部分つまり「.l-wrapper」を白にする事で左右のスペースの背景色だけを変更することができます。
ただ、このように背景色を変更すると記事の文字やタイトルが左側にくっついていますよね。
なので次のコードをスタイルシートに追加して左に余白を作っておきます。ついでに右側にも余白を取ってバランスを取ります。
/* 記事タイトルと記事本文の領域 */
.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」を一緒に押してリロードし、反映されているか確認して下さい。
ただ、注意点としてはこれはサイドバーのコンテンツ部分の背景色です。こんな感じになります。
このように「サイドバーのコンテンツがある部分」は背景色が反映されますが、その下（コンテンツのない部分）は反映されないので、その点はちょっと微妙なので、サイドバーだけ背景色を変更するのはあまりおすすめはしません。
このように最初に紹介したポイント（領域）を知っておけば組み合わせで自由に変更ができます。それぞれ自分で考えながら背景色を変更してみてね。
ブログを収益化するならWordPress利用がおすすめ
無料ブログでは利用規約の変更やアカウント停止、サービス終了などのリスクがあります。
また、表示速度も重く、スマホのページには消す事のできない広告が多いためブログでの収益化を考えているならWordPressの利用が圧倒的におすすめです。
WordPressと無料ブログの違いや必要な料金などは以下記事でまとめてます。
コメント
しげぞう様
お世話になります。fukuです。
返信おくれまして申し訳ございません。ご教示いただいたコードで解決しました。
ありがとうございます。
fuku様
返信ありがとうございます。サイドバーのタイトル部分も実は「h3」なので、h3の装飾がサイドバーにも影響していると思います。なので、サイドバータイトルでは文字の下のピンクの線を消すようなCSSを追加しておけば解決する気がします。
.module__heading { border-bottom: none; }これを追加することで解決すると思いますが、もしそれでも解決しない場合には再度コメント下さい。それからもう１つの質問コメント頂いてますが、ちょっと用事があり、返信は午後になりそうです。どうぞよろしくお願い致します。
しげそう様
お世話になります。fukuです。
しげぞう様のご指摘通りコードを追加したところ、トップページのh3にも装飾することができました。ありがとうございます。
しかし、また別の問題が。。；
ご教示いただいたコードを追加したところ、右サイドバータイトルにも文字装飾がされています；
具体的に申し上げますと、現在h3には「文字の下枠をピンクにする」装飾をしているのですが、ご教示いただいたコードを追加すると、右サイドバータイトルの枠線の下の部分もなぜかピンクになっているのです。
この事象の原因をご存知でしたら、ご教示いただけますでしょうか。
以上です。よろしくお願いします。
fuku様
返信ありがとうございます。ホントですね！私も今気が付きました。h3のスタイルは「.article__content h3」で装飾していると思いますが、これは個別記事で反映されますね。同じ装飾を「h3」で書けばトップページにも反映されると思います。一度試してみて下さい。記事も修正しておきますね。毎回ご指摘ありがとうございます！
しげぞう様
お世話になっております。fukuです。
しげぞう様のアドバイス通りにコードを追加したところ、うまく反映されました。
いつもありがとうございます。
一点補足です。
以下の質問コメント
＞また、別記事で掲載されているh3タグの装飾についても、設定がうまくいっていないように＞感じます。
＞こちらに関しては、トップページはh2タグの装飾がされておらず、記事一覧から飛んだペー＞ジには反映されています。何か設定ミスがあるのでしょうか。。
ですが、文中のh2はh3です。（タイプミスしました、すいません。。）
要約すると、トップページのh3は装飾されず、記事ページのh3は装飾されている状態です。
質問する記事が違うかもしれませんが、今回質問させていただいた質問と同じようなことが原因で起きているのではないかと思っています。
以上です。お手数おかけしますが、よろしくお願いします。
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」でそれぞれ同じコードを追加すれば反映されると思われますので、一度試して頂けると助かります。どうぞよろしくお願い致します。
しげぞう様
いつもお世話になっております。fukuです。
アドバイス通り()内のコードを修正したところ、背景画が設定されました。ありがとうございます。
いつも申し訳ございませんが、また質問があります。。
下記コードを追加したところ、トップページには記事の左側スペースを調性する設定が反映されているのですが、記事一覧から各記事のページに飛ぶと設定が反映されていないように見えます。
/* 記事タイトルと記事本文の領域 */
.entry {
padding-left: 20px !important; /* 左に余白 */
padding-right: 20px !important; /* 右に余白 */
}
また、別記事で掲載されているh3タグの装飾についても、設定がうまくいっていないように感じます。
こちらに関しては、トップページはh2タグの装飾がされておらず、記事一覧から飛んだページには反映されています。何か設定ミスがあるのでしょうか。。
fuku様
返信ありがとうございます。画像のURLだけでなく、リンクのコードも一緒に入れているのが原因かと思います。
背景画像の部分は次のように画像のURLだけを入れないと反映されません。また、画像のURLを囲む「 ” 」も半角である事を確認してみてください。
background-image: url("http://●●");しげぞう様
ご回答ありがとうございます。fukuです。
＞以前送ってもらったURLと同じブログですよね？
以前お伝えしたブログです。
画像が背景に設置されていなかったため、コードを削除してました。。
今コードを追加しましたが、やはり背景に画像が見えません。。
お手数ですがご確認いただけますでしょうか。
お忙しいところ恐れ入りますが、よろしくお願いします。
fuku様
コメントありがとうございます。以前送ってもらったURLと同じブログですよね？今確認したのですが、CSSにコメントで書いていただいたコードが見えません。なので、コードが間違いなく「スタイルシート」に追加されているかをまず確認してみて下さい。もしスタイルシートの編集に追加されているのであればその状態で再度コメントを頂けると助かります。どうぞよろしくお願い致します。
しげぞう様
お世話になります。fukuです。
いつも記事を参考にさせていただいてます。
本記事のコードを入力したのですが、背景画が変わりません。
使用したコードは以下です。
/* 全体の領域 */
body {
background-color:#eee; /* 灰色 */
background-image: url(“ここに画像のURL”); /* 画像を使う場合に記述*/
background-repeat:repeat; /* 画像の繰り返し */
}
/* ヘッダー・メインコンテンツ・サイドバーを含む領域 */
.l-wrapper {
background-color:#fff; /* 白 */
}
使用しているデザインは シンプルA.ホワイト 右カラム です。
また、合わせて質問です。
記事の枠線に、ドロップシャドウをつけたいのですが、コードをご存知でしたら
ご教授いただけますでしょうか。
以上です。お忙しいとは存じますが、よろしくお願いします。