Hatenaカスタマイズ実験室

いつか回収してくれると嬉しいな

【MinimalGreen】記事とサイドバーの間に背景

この記事のコメント欄にて質問があったので回答します ✌︎('ω'✌︎ )

Q.記事とサイドバーの間に背景を入れたいのですが、どうすればいいでしょうか?使っているテーマは「Minimal Green」です。

完成イメージ(ヘッダーは別コードです)

f:id:th16037:20170705160611j:plain

画像を編集でくっつけて縦長にしているので歪な部分がありますが本当はちゃんと真っ直ぐになっています。

CSSコード 

「MinimalGreen」は、"#content"の背景がデフォルトで"#ffffff"に設定されているので"!important"を足してCSSの優先順位を変えることが必要です。

コードに「ここ間違ってるよ!」とか「もっと簡単に変更できるよ!」等々あればコメント欄よりお願いします 。

#container-inner{

width:100% !important;

padding:0px !important;

margin:0px !important;

}

#container{

padding:0px !important;

}

#content{

width:100% !important;

background-color:transparent !important;

padding:0px !important;

margin-bottom:0px !important;

}

#main{

width:750px;

background-color:#ffffff;

border:10px solid #ffffff;

}

#box2{

width:750px;

background-color:#ffffff;

border:10px solid #ffffff;

}

難点

この方法だとサイドバー、又は記事のどちらかが一方より短いと下に空白が空いてしまいます。"空白のブロックを設置する"なんていう方法があるのか知りませんが、間に線を引くにしてもやはり納得のいくデザインになりません。

もしやり方を知っている方がいたら教えて頂けるとありがたいです。

記事幅等について

上のコードだと記事幅、サイドバー等の幅は変わりません。

これについてはテーマ作成者の方のブログにて紹介されています。

 ↓  こちらがその記事です

ということで、質問への解答でした ✌︎('ω'✌︎ )

人それぞれ、元々カスタマイズしてた場合幅とか違うので多少弄ってもらわないといけない部分が出てくると思います。

ではまた。