はてなブログのレスポンシブデザインで「タイトル画像をスマホでもいい感じ」にするもっとも簡単な方法！！ - とまじ庵

ちわっす！どうもとまじぃです♪ いままで結構悩んでCSSいじったりして 解像度480以下ではこのタイトル画像表示して～ PCではこの画像表示して～ みたいな感じで小難しいCSSを使っていたのですが・・・。 よく考えたら もっと簡単に考えれば楽にできちゃった！！！ そんなお話です レスポンシブデザインでのタイトルの切り取られ方 では今回設定したタイトル画像を御覧ください。 横１０００PX 縦２００PXの画像を使っています。 これを PCで表示した場合はこうなります。 普通に画像の全面が使われている状態ですね。 次にスマホ表示を見てみましょう 「真ん中が表示される」を意識すればOK 結局どういうことかというと スマホでは真ん中が表示されている！！ってことです これを考えないで画像を設定してしまうと・・・・。 たとえば PCで左側に文字入っていい感じになるなぁ～ってんでこんな画像を設定したとしま

[tomag]

なかなか「真ん中だけ切り取ってもいい感じの画像」がみつからないんですけどねｗ

[watto]

あー、これ苦労しました。うちは椎茸殲滅ですが。

[AzuLitchi]

このテーマ使えば1500×500pxのヘッダ画像が切れずにPCでもスマホでもレスポンシブ表示されますぜー http://blog.hatena.ne.jp/-/store/theme/98012380862694448