仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

ブログのスマホデザイン変えました

明日から三男は登山部の県総体。というわけで、登山用にミネラルウォーターを買ってきたさっこさんですこんにちは。食材は今日部活で買い出しに行ってるはず。でも個人用の荷物は全部自前で準備しなくちゃならないですからね。登山用具も長男のを半分はお下がりしたけど、それでも結局3万ぐらいかかってしまった。痛い出費だわさ…。

さて、以前こちらのエントリーを拝読したのですが。
今私が使ってるブログのテーマはレスポンシブデザインなんですが、私がゴリゴリ自分好みにいじってしまったので、レスポンシブを適用すると見づらくて仕方ない。というわけでスマホ用のデザインはそのまま放置してたんですが、なんだー!スマホ用デザインってヘッダにCSS記述できるのか!じゃあいじろう…と思いつつずるずる今日まできてしまい、ようやくスマホデザインを変えました。と言ってもご紹介したエントリーにあるCSSを引っ張ってきてちょっといじってるだけですが。

f:id:plutan:20160603164133j:plain:w300

f:id:plutan:20160603164212j:plain:w300

f:id:plutan:20160603164259j:plain:w300

ご紹介したエントリーではヘッダ画像ははてなブログのヘッダ画像を使ってますが、私はそちらを使わず直接背景画像を指定してその上にタイトルとブログの説明文を載せてます。そのほうが楽ちんかなと思って。タイトル画像の指定はこんな感じ。

#header {
    margin:0;
    width:100%;
    padding:15px 0px;
    background:url(http://cdn-ak.f.st-hatena.com/images/fotolife/p/plutan/20160602/20160602205658.jpg) left top no-repeat #000;
    background-size: cover;
}

他にも文字色を変えたりしてますが、そこら辺はUser-Agent Switcher for Chromeを使ってスマホデザインのソースを眺めながら適当に変えてます。適当でもなんとかなる!

まだちょっといじり足りないところもありますが、とりあえずこれでいこうと思います。

追記

結局背景画像使ってしまった…いつものあれです、ええ。

f:id:plutan:20160603213126j:plain:w300