ちわっす！どうもとまじぃです♪
いままで結構悩んでCSSいじったりして
- 解像度480以下ではこのタイトル画像表示して～
- PCではこの画像表示して～
みたいな感じで小難しいCSSを使っていたのですが・・・。
よく考えたら もっと簡単に考えれば楽にできちゃった！！！
そんなお話です
レスポンシブデザインでのタイトルの切り取られ方
では今回設定したタイトル画像を御覧ください。
横１０００PX 縦２００PXの画像を使っています。
これを PCで表示した場合はこうなります。
普通に画像の全面が使われている状態ですね。 
次にスマホ表示を見てみましょう
「真ん中が表示される」を意識すればOK
結局どういうことかというと
スマホでは真ん中が表示されている！！ってことです
これを考えないで画像を設定してしまうと・・・・。
たとえば PCで左側に文字入っていい感じになるなぁ～ってんでこんな画像を設定したとしましょう。
ところが・・・スマホだと真ん中が切り取られてしまうのでただの野原の画像になってしまいます（笑）
そこらへんを考えて画像を設定すればCSSなど難しい設定をしなくても見栄えのするタイトル画像が使えると言うことになります。
今回の場合は「自転車」が表示されていないとカッコがつかないわけですから、画像をトリミングする際に「中央４００PX程度」に自転車を配置しておくと破綻しません。
文字入りタイトル画像の場合も同じで。
たとえばこんな画像を使っちゃった場合 
スマホ表示の際には文字が切れてしまうことになります。
文字入り画像の場合も「魅せたい部分」、つまりこの場合も「文字」を 中央４００PXくらいに固めておくとスマホでも無難に表示されるということになります。
まとめ
はてなブログを使ってる方は色んな裏技を開発してくれたりしていただいいていて、便利に使わせてもらってましてありがたいかぎり。
ただ そんな「便利ワザ」を積み重ねていくうちに「自分が何をどうしているのか？」がわからなくなったりしてきます。
はてなのデフォ状態がどうなっているのか？を把握しているだけで、「工夫次第」でむずかしい技を使わずとも解決できたりしますので、今一度「デザイン画面」の見直しをしてみると幸せになれるかもしれませんよ♪
コメント