今日は最近気になっていたはてなブログのレスポンシブデザインの話。
このぶな記は、はてなブログのデフォルトのデザインである「smooth」を、CSSやウェブフォントを駆使してぶな色(ぶな色)に染めている。
レスポンシブデザインを許可すると、PC版で設定したブログデザインがいい感じにスマホにも反映されるものだと思い込んでいたのだが、
なんぞこの空白は。
右側にはブログでもなんでもない、さながらポケモンのダイヤモンド・パールの謎の場所のような空白が居座っている。
端的にかっこ悪い。
後ちょっと右にスライドしちゃった時に見辛くなるのが大変いただけない。
これを解決しよう〜〜〜と奮闘した。
viewportを追記[解決できず]
まず、meta要素のname属性値としてviewportというものが存在することを見つけた。
使用するデバイスごとに画面の広さが異なってくるので、その辺を制御するための属性値である。PCの大きさと比較すると、縦持ちスマホの大きさは4分の1以下になってしまう。
これを適切に設定しないと、スマホでサイトをみた時にPC表示の4分の1しか見ることができない。そのため全体像を見るために縮小したり、右にわざわざスクロ〜〜〜ルしないといけなくなる。
言われてみればたまに数学や物理の解説サイトとか掘ってるとそういうスマホへ配慮のないサイトを見る気がする。viewportの所為だったのかと納得する。
ともかくそういった設定を全く触れていなかったので
管理画面 > 設定 > 詳細設定からheadに要素を以下のように追記しておいてみた。
<meta name="viewport" content="width=device-width, initial-scale=1.0 , minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes">
参考にしたのはこれ。
seolaboratory.jp
contentの中に設定したいものをモリモリ書いていく形式らしい。
上記で設定したのは
- 画面の広さをデバイスの広さに合わせる
- サイトを開いた時の初期拡大値を1(等倍)にする
- サイトを見ている人がサイトを拡大縮小することを許可し、縮小は1倍まで(実質縮小の非許可)、拡大は2倍まで
の三つである。拡大縮小の許可までできるとはhtml、恐れ入る。
写真を拡大したいなぁと思っても拡大できないサイトがあるのはこれが理由なのだろう。スクショを撮ってそれを拡大して意地でも大きく見ようと思ったことも多々ある。
ここまで頑張ってviewportを設定したものの、右側の謎の空白は解決できなかった。許せない。
ぼちぼち他の人のブログ見てると、一度縮小しないとスライドしてる時にズレるものが多い気がする。
これは余白があるわけではなく、単に初期設定の拡大値がズレてるからなのだろうか。
initial-scaleだけでも1.0にしておいた方が良さそう。
検索検索ゥ[解決まで後一歩]
「はてなブログ スマホ 右側 謎の空白」で検索すると、おあつらえむきのようにサイトが出現してきた。
自分、検索上手かもしれない。
参考にしたのはこれ。
ocws.jp
全く同じ症状で笑ってしまった。少なくとも、ぶな記内のデザインCSSでwidth=100%は用いていないので、最後の解決法で対処が可能そうだ。しかし、また聞き慣れない単語が生じている。
- wrapper
- overflow:hidden
どうやらこれをうまく使えば解決できるようだが、どこに埋め込めばいいのかわからず、少々迷ってしまった。
ゴリラ戦法[解決]
要は表示の余ってしまった部分をoverflow:hiddenでなかったことにしてしまうことが重要なのだろう。
そして、それはhtmlタグで入れ込みたいので、head以下全ての記事部分をdivで囲んでしまうことで、実質的にブログ全体への処理が可能になる。
そのdivの処理でoverflow:hiddenを埋め込めば解決、という流れだ。理解。
このdivで囲ってしまうことをwrapといい、クラス名やidにwrap(wrapper)を入れて使うらしい。先人の知恵である。
しかし、全ての記事に毎回divを埋め込むわけにはいかないし、何よりナビゲーションバーや、関連記事までをdivで入れ込むため、少々力技でねじ込んだ。
headタグの直後にdiv
まず、divの開始位置、すなわちwrapperの始まりを指定する。
先ほどviewportをいじったheadに要素を追加の末尾に
<div id="wrapper">
を追記する。これでwrapperというidで始まりを指定した。これより下に記述される物は全部overflow:hiddenの対象になる。
フッタにdiv
そして肝心のdivの終了位置だが、ぶな記の場合はこれでどうにかできた。
デザイン > カスタマイズ > フッタのhtml記述ボックスに
</div>
これだけ。
