今回はCSSをいじって、ページ構成を変えました。

①div要素の位置調整
うちのサイトの場合、bodyの中にでっかいdivのブロックをどーんと置いて、その中にいろいろなコンテンツを入れ込んでいます。
その場合、スマホで閲覧すると、上下左右に謎の余白が発生。
気になったので調べてみると、こんな記事がありました。

ヘッダーの上に出来る謎の隙間の「理由」と「対処法」 - アイデアハッカー
http://ideahacker.net/2015/08/21/10357/

ブラウザ上で勝手に余白を作る設定だったみたいです。
無事、解除成功。


②メニューの表示
スマホサイトではメニューの表示をオフにしていましたが、復活させました。
不便ですから。
文字サイズを小さくして、表示も2段に分けました。


③右のカラムの表示
スマホサイトではメニューと同じく、右側のプロフィールなどを載せたカラムの表示を切っていました。
今回はfloat: none;で表示をメインコンテンツの下側に持ってきています。


以上です。
スマホサイトの表示確認は、Chromeのデベロッパーツールで確認しました。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


ホームページ更新関連で備忘録として残しています。
ホームページをお持ちの方は、何か参考になるかもしれません。

ゲーム攻略の歩き方
https://gamekoryaku.okoshi-yasu.net