【コピペのみ】はてなブログでやってみたデザインカスタマイズ！其の弐 【記事の幅や背景色の変更】

こんにちは、こみそです。

記事もいい感じに溜まってきたので、この土日にコソコソとブログデザインのカスタマイズをしてました(´▽｀)ﾜｵｯ

一気にダラダラ書くと・・・うん、疲れるな(´c_,｀lll)

ですので、小出しで載せてきますm(_ _)m

本日は、

【記事の幅や背景色の変更】

では、順番通りいきまーっす！ヾ(*´∀｀*)ﾉ

１．背景色の変更

変更内容

白　→　グレー（#f3f3f3）に変更しました。

やり方

ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS　を開いて、以下をコピペ。

/* 背景画像のカスタマイズ */
body {
background-color:#f3f3f3;
}

 なんて簡単(´▽｀)

２．記事本文とサイドバーの幅変更

変更内容

記事本文とサイドバー合わせて960pxしかなかったので、合わせて1073px（記事728px、サイドバー320px）になるように変更しました。

やり方

ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS　を開いて、以下をコピペ。

/*本文＋サイドバー*/
#container {
width: 1073px;
}

/*本文*/
#main
{
width: 728px;
}

/*サイドバー*/
#box2 {
width: 320px;
}

 ぇええっ！！・・・簡単すぐる【o´ﾟ□ﾟ`o】ｱﾜﾜﾜ

３．記事本文とサイドバーの背景色変更

変更内容

１．２までの状態だと多分グレーになってるので、記事本文とサイドバーは白になるように変更しました。

やり方

ダッシュボード＞デザイン＞カスタマイズ＞デザインCSS　を開いて、以下をコピペ。

/*記事エントリ一覧のカスタマイズ*/
section {
background-color:#ffffff;
padding:20px;
}

/*サイドバーのカスタマイズ*/
#box2-inner {
background-color:#ffffff;
padding:5px;
}

/*記事のカスタマイズ*/
.entry-inner {
background-color:#ffffff;
padding:5px;
}

っていうかコピペのみじゃないですかぁ！ヾ(*´∀｀*)ﾉ

４．記事本文の枠に影みたいのつけて立体的にする

変更内容

そのままだとただの四角い枠なので、影みたいのをつけて浮き出るようにする。

やり方

３．で紹介したコードに赤字をコピペするだけ。

/*記事エントリ一覧のカスタマイズ*/
section {
background-color:#ffffff;
padding:20px;

box-shadow:0px 0px 10px 1px rgba(8,64,53,0.5);
}

/*記事のカスタマイズ*/
.entry-inner {
background-color:#ffffff;
padding:5px;

box-shadow:0px 0px 10px 1px rgba(8,64,53,0.5);
}

・

・

・

ラクショッ（楽勝）！！！【o´ﾟ□ﾟ`o】

いかがでしたでしょうか？初心者の私でも楽勝でした。

ご参考までにどうぞ

過去のカスタマイズ記事はコチラ