▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

はてなブログ「CONTENTS」で背景画像を設定するとどうなるか

 

f:id:bless-you:20161210225110j:plain

 

真っ白な背景に黒い文字が並ぶ。

大抵のブログは、そうなんだけどね。

乱視のせいなのかもしれないけど、もの凄く疲れる▼・ェ・▼。

目と心に優しい配色が好き!

 

そんな▼・ェ・▼が、次にチャレンジしたのは背景画像の設定でした。

 

 

 

 

背景画像の設定・・・ 違う、ソウジャナイ感

別のブログで以前使っていた壁紙の一部を利用しよう!

そう思い付いた▼・ェ・▼。

 

 

ダッシュボード → デザイン → カスタマイズ → 「背景画像」

画像をアップロードして、変更を保存。

 

 

✧ฺ+(0゚・∀・) + ワクテカ✧ฺ+

 

 

設定を反映させて、ブログを確認してみると。

 

 

f:id:bless-you:20161210231248j:plain

 

反映されていたのは、ブログのタイトル部分と・・・

 

f:id:bless-you:20161210231620j:plain

 

フッター部分の一部のみでした。

 

 

違う! そうじゃない! (。・ˇ_ˇ・。)ムゥ…

 

 

▼・ェ・▼はね!

もっとこぉ、ブログの背景全部が指定した壁紙になると思ったの!

 

 

プリプリしながらググルカス。

 

 

dokuwohaku.hateblo.jp

 

そうそう!

コレコレ!

 

 

こんな風になるって思うじゃん?

そして、設定の方法は、▼・ェ・▼のやった方法と同じでした。

 

 

うーむ。

 

 

諦めた! (๑•̀ㅁ•́๑)✧ チーン

 

 

先生はね、すごい人だからね。

▼・ェ・▼ごときの駄犬では、いじくれない設定をしてるんだよ。

考えたり悩むだけ時間の無駄!

他にもやりたいこといっぱいだからね。

次行くよ!次!

 

 

そのうちなんかいい方法見つかるかもだしね!

もっと簡単に色々変更できるデザイン出してくれるかもしんないしね!

 

 

今できることで楽しむことにする!(๑•̀ㅂ•́)و✧

 

 

▼・ェ・▼、いいことゆった!

 

 

記事欄に背景色と影を設定する

 

とりあえずさ。

背景画像は、コレでいいよ。

とにかく▼・ェ・▼は、白地を少しでも減らしたいわけ。

 

 

だから、次は面積の広い記事欄の背景を変えることにしたよ!

 

 

/*記事欄に背景色と影*/ 
.entry-inner{
background-color:#EDE1D6;
padding:5px;
}

 

f:id:bless-you:20161206235437j:plainこのコードを

ダッシュボード → デザイン → カスタマイズ → 「CSS」に貼り付けると。

 

 

f:id:bless-you:20161211003805j:plain

 

 

記事欄の内側に色が付いた。

 

またしても、コレジャナイ感が滲むけども。

まぁいいや。

この状態をなんとか活かすために影をつけ足すことを思い付いた!

 

 

www.xn--28j2a0gvbiy.com

 

コードは上の記事のときのものを利用。

 

 

/* 記事欄に背景色と影*/ 
.entry-inner{
background-color:#EDE1D6;
padding:5px;
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;

-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;

box-shadow: 1px 3px 7px 2px #C5C5C5;
}

 

さっきのコードに、影を付けるコードを付け足す。

 

 

f:id:bless-you:20161211010515j:plain

 

 

記事タイトル欄のラインがはみ出してるけどさ。

ま、まぁ、これでいいコトにするよ!

 

 

サイドバーに背景色と影を設定する

 

設定の方法は、記事欄のときと同じだよ。

 

/* サイドバーに背景色と影 */
#box2-inner{
    background-color:#EDE1D6;
    padding:5px;
-moz-box-shadow: 1px 3px 7px 2px #C5C5C5;

-webkit-box-shadow: 1px 3px 7px 2px #C5C5C5;

box-shadow: 1px 3px 7px 2px #C5C5C5; }

 

f:id:bless-you:20161206235437j:plainこのコードを

ダッシュボード → デザイン → カスタマイズ → 「CSS」に貼り付ける。

 

 

f:id:bless-you:20161211011924j:plain

 

 

余白が気になるっちゃなるけども。

白い面積減ったからね!

良しとしておく。

 

 

ふぅ。

 

 

今日も色々とお勉強になりました!

シェアしてくださった皆さんありがとう♡

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

 

 

Thank you.

I love you.

 

 

 

 

 

保存

保存