(cache) 【新テーマ「Naked」をちょっとカスタム】＆【facebookページ作りました】

＊短めの記事です＊

先日、結構時間をかけてcustomizeした当ブログのテーマ。 f:id:tomag:20160519073856p:plain

結構がんばったし愛着も湧いていたので
「しばらくは変えないぞ～！！」って決意してたのですが！！

www.yukihy.com

普段からcustomize関係でむっちゃお世話になってるYukihyさん謹製のテーマが発表されたとあっては、使わないわけにはいかないでしょ？

って事で、あっさりと乗り換えました（笑）

ちょっとだけいじってます。

f:id:tomag:20160522205309p:plain

背景画像は普通に「デザイン設定」からファイルをアップロードしています。

ただ、この状態だと「ブラウザ幅によって、見せたい部分が見えない」場合が出てきます。

今回の画像の場合は「ボルト」を見せたいとしましょう。

ブラウザ幅が広い場合はボルトが表示されていますが。 f:id:tomag:20160522210000p:plain

ブラウザ幅を狭めるとボルトが消えてしまいます。
f:id:tomag:20160522210740p:plain

ということで！！
上記のように背景画像を設定すると「デザインCSS」の２ブロック目に「背景画像」用のCSSが自動で挿入されます。

/* <system section="background" selected="custom"> */
body{
  background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/t/tomag/20160522/20160522202235.jpg'); 
  background-repeat: repeat;
  background-color:transparent; 
  background-attachment: fixed; background-position: center top;
}
/* </system> */

↑こんな奴ね！

これの各項目の最後に

background-size:100% auto;

ってのを挿入します。あとは「fixed」を「scroll」に変更します。

挿入したのがこんな感じ。

/* <system section="background" selected="custom"> */
  body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/t/tomag/20160522/20160522202235.jpg'); 
  background-repeat: repeat;
  background-color:#fff; background-attachment: scroll;
  background-position: center top; 
  background-size:100% auto;}
/* </system> */