みそブログ

読者です 読者をやめる 読者になる 読者になる

みそブログ ~相棒とマラソン編~

多摩川で彼女とマラソンを頑張ってるサブスリーランナーのブログ。コンビニや漫画、たまにライフハックも。

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

f:id:komiso:20160117162432p:plain

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

 

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

 

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

 

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

 

本日は、

 

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

 

では、順番通りいきまーっす!ヾ(*´∀`*)ノ

 

1.背景色の変更

変更内容

白 → グレー(#f3f3f3)に変更しました。

やり方

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

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

 なんて簡単(´▽`)

 

2.記事本文とサイドバーの幅変更

変更内容

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

やり方

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

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

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

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

 ぇええっ!!・・・簡単すぐる【o´゚□゚`o】アワワワ

 

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

変更内容

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

やり方

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

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

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

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

っていうかコピペのみじゃないですかぁ!ヾ(*´∀`*)ノ

 

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

f:id:komiso:20160117164740p:plain

変更内容

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

やり方

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

/*記事エントリ一覧のカスタマイズ*/
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】

 

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

 

ご参考までにどうぞ

 

 

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