暇人社会人の徒然日記

あまり暇ではないですが、徒然なるままに日記を書いています。 Yahooブログから移転しました。

タグ:レスポンシブデザイン

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

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

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

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


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


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


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


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


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

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

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

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


最近サイトのレスポンシブ化にお熱な私。
現在のサイトは3カラム構成。
メインコンテンツの中央のカラムを表示、左右のカラムを非表示にすることで、レスポンシブ化を狙っていました。当然、メインカラムや親のdiv要素の表示幅は100%以下に設定。

しかし、スマホで見るとなぜか横が収まりません。
横幅が少し表示画面からはみ出しているようです。

cssとにらめっこすること数十分。
見つけました。
bodyタグにwidth 100%の指定が入っていました。
謎です。意味不明です。
なんでこんなことをしたのか…思い出せません。

この表記を削除したところ、めでたくはみ出しがなくなりました。
何が言いたいかというと、人の記憶はあいまいなので、
やはり備忘録は必要ということです。

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

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



Google Search Consoleに登録してみました。
すると、お前のサイトはモバイルユーザビリティに欠けていると言われました。

「ビューポートが設定されていません」

ビューポート?なんじゃそりゃ?と思い、ググりました。
こいつを設定していないとスマホで見たときに、
スマホ画面の横幅に合わせて縮小表示されるようで。

とりあえずheadに、
<META name="viewport" content="width=device-width,initial-scale=1">
をぶち込みました。
これでこの問題は解決。

後は、「テキストが小さすぎる」、
「コンテンツの幅が画面の幅を超えている」、
などを指摘されています。

今時はレスポンシブデザインでスマホの画面に合わせて、
サイトが最適表示されるように設定するらしいです。

とは言えども、
スマホ用のサイトの最適なwidthについては、
みなさんバラバラなご様子。

とりあえず、うちのサイトは、
スマホは750pxで固定にしました。
攻略サイトという性質上、
大きな表があるので横幅はそれなりにほしかったです。

その代わり、
スマホでは左のカラムと右のカラムは非表示にしました。
メインコンテンツのみを載せています。

試行錯誤でやっていますが、
こんなんでアクセス数が伸びるのかはわかりません…。


↑このページのトップヘ