レスポンシブデザインっていうの忘れてました
スマフォで表示されるデザインが寂しいとずっと思っていたのですが、やっと変更できました。
はてなブログユーザーの皆さん、レスポンシブデザインのチェックボックスをちゃんと設定してます？
レスポンシブデザイン
はてなブログで、設定から「デザイン」を選択して
スマートフォンのマークを選択します。
画面の一番下の詳細のところに、レスポンシブデザインというのがあるので、これをしっかり設定しましょう。
ただし、「自分が使っているテーマが対応している」ことが必須です。
対応しているかどうかは、下の画像にあるように、上のメニューから、「このブログのテーマを見る」を選んで、自分が使っているテーマを確認しましょう。
私は、最初にブログを始めるときに、気にしていたつもりだったのですが、あまり説明を読まなかったので、どうしてスマートフォンで、同じ表示ができないのか、ずっと気になっていました。
私は、今日まで、この設定がOFFだったのを気づいていなかったのです。てへっ
設定前の画面
設定していないと、スマートフォンからブログを見ている人には、このように見えていました。
これでも十分綺麗ですが、若干殺伐としています。
パソコンのブラウザ上ではサイドバーに表示されている「カテゴリー」や、「話題のリスト」等の肝心な情報が一切提供されていませんでした。
設定後の画面
レスポンシブデザインを有効にした後のスマートフォンの画面は、これです。
先日のブログのタイトルが長すぎて、画面いっぱいにタイトルです。
いいのか、悪いのか、わかりませんね ^^;
一応画面を下にスクロールしていくと、レスポンシブデザイン無効のときには表示されていなかった画面がスマートフォンにも表示されるようになりました。
まだ、試していない方は、ぜひ有効にするのをオススメします。
レスポンシブデザインとの変化点
文字サイズが、いままでよりも大きい
上の例では、画面いっぱいにタイトルが表示されているので、「ダメじゃん」と思われるかもしれませんが、実際にスマートフォンで見てみると、今までよりも文字が大きく読みやすくなった感じはしています。
ヘッダーの画像が大きい。
ヘッダーの画像が大きすぎて、私のお気に入りの写真はスマートフォンを横にしないと表示されません。
少しサイズを小さくして、はみ出しても大丈夫な写真に差し替えしてみました。
まだ、改善の余地ありです。
ヘッダーのタイトルがはみ出す。
CSSを修正するとタイトルの文字のサイズが調整できます。
#title{
font-size: calc(112.5% + 0.5vw)
}#h1{
font-size: calc(112.5% + 0.5vw)
}
もっと良い方法がありそうなのですが、勉強不足です。
こちらの方が少し見栄えが良くなりましたので修正 (2019/3/10）
テーマ毎に様々な設定ができる
私は「CONTENTS」というテーマを使わせていただいています。
「このブログのテーマを見る」で、皆さんが使っているテーマの紹介ページが表示されると思いますので、作者さんのページを是非見に行ってください。
テーマ作者の皆さん、いずれもいろいろな工夫をされていて、すばらしいデザインになっています。
DREAMARKさんのページは、とても格好良いです。
私も、ちょっと時間ができたら、もう少し勉強してカスタムしていきたいと思います。
スマートフォンから読んでくれるユーザーは大切にしよう。
当ブログは、モバイル54.4％、タブレット6.8％、パソコン38.8％です。
これは、グーグルアナリティクスで確認することができます。
半分以上がモバイルです。
スマートフォンユーザーも意識した表示に気をつけましょう。
反省。
自分がパソコンでしかブログを書きませんし、見ないので、気が付きませんでした。
以降、気をつけます。
