attention admin about comments trackbacks you may also like

レスポンシブ対応

2018年01月05日
ブログいじり
4

当ブログ、一応、レスポンシブに対応しているつもりなのですが・・・

当ブログの右サイドのリンクに、スマホや、タブレットでの表示を確かめられるサイトがあります。

180105-00.jpg

そこで、確認してみます。URLを書き込んで・・・

180105-01.jpg
180105-02.jpg
スマホの画面サイズに応じて縮小せず、そのまま表示されています。

しかし、グーグルクロームの「F12」デベロッパーツールで表示すると画面に応じて縮小しています。

180105-03.jpg
横幅320PXで、左右の余白もなく綺麗に表示されています。

実際どうなのかと、私はガラケーなので、人様のスマホで確認させていただくと・・・

180105-04.jpg

綺麗に表示されていました。・・・で、安心していたのですが、奥さんのタブレットで偶然見てみた時に、

180105-05.jpg

これってスマホの小さな画面でも、タブレットの大きな画面でも画面いっぱい(100%)で表示されています。

当ブログは記事の部分が500PX、右サイドが200PX、左右とその間に30PXずつのスペースを入れて総幅790PXになります。

790PX以下の画面では、画面いっぱいに表示。字が小さいと思われた方は、拡大して読んでいただく。そして790PX以上の画面では、790PXを超える部分は余白とする様にしたかったのです・・・

試行錯誤の結果、現在は解決していると思います。

180105-06.jpg

HTMLにmetaタグで指定しているのですが、今いち理解できていない部分と、先ほどのレスポンスチェッカーでは表示されないことが解決していませんので解決しましたら、また紹介したいと思います。

関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(4)

There are no comments yet.

hige  

2018/01/05 (Fri) 17:22

 ちょっと気になったので、お気を悪くされるかも知れませんが、あえてコメントさせていただきます。
 遠太さんのテンプレはレスポンシブ対応になってませんよ。
 レスポンシブ対応になってるかどうかは、ブラウザを分割表示にさせて、横幅を狭めていけば分かります。
 その時、ヘッダー画像やメインカラムが横幅に応じて縮小されたり、サイドカラムは記事の最後に移動して2カラムから1カラムになる等の手法がとられます。
 私のブログはレスポンシブ対応で、上記のような形になってます。
 ちなみにFirefoxで遠太さんのブログを拝見し、ブラウザの横幅を縮めてみると
 https://blog-imgs-110.fc2.com/b/l/g/blgid1974/20180105902.jpg
 の様に切れてしまいます。
 また、スマホのFirefoxでも同様です。
 https://blog-imgs-110.fc2.com/b/l/g/blgid1974/20180105901.jpg

 スマホのChromeでは全体表示されますが、PC画面がそのまま表示されるのでレスポンシブとは言えません。そのままでは文字が小さくて読めない。
 レスポンシブ対応のテンプレでは、文字の大きさはそのままで横の文字数が少なくなり折り返しが移動していきます。
 ぜひ、テンプレの変更をされては。
 FC2公式テンプレで、レスポンシブ対応と言いながらそうなってないテンプレもあるので注意が必要です。
 例:white_card_resp
 参考記事:https://vanillaice000.blog.fc2.com/blog-entry-633.html

 色々お付き合いいただいてますので、あえてコメントさせていただきました。
 

遠太  

2018/01/05 (Fri) 19:18

higeさん

こんばんは。

ご指摘ありがとうございました。全然大丈夫ですよ。

言われていることは全て分かります。
一番肝心なチェック方法を怠っていましたね。(笑)

事務局を務めます、まちづくり協議会のホームページ制作と並行に行っていまして、
このチェック方法も試したはずなのですが・・・

テンプレート自体は対応でないので、自分で改造したいと思っております。
2カラムから一列に並べるまではまだ至っていませんが、トップページに
載せる記事数にもよるでしょうが、右サイドのメニューがずっと下の方へ行くと、
見てもらえない可能性もあるかなと思い、790PXまではそのまま表示、
字が小さいと思われる方は左の記事部分を画面いっぱいに拡大していただいて
見ていただくこともありかなと思います。(拡大してみる人がいるかは別にして)

ちなみに、まちづくり協議会のホームページのアドレスを掲載しておきますので、
こちらも検証してみてください。
https://nakamanishikouku.sakura.ne.jp

また見直してみたいと思います。
記事はこのままにしておきます。


hige  

2018/01/05 (Fri) 20:24

 ホームページを拝見させていただきました。
 表示画面の横幅に対応させておられるので良いんだと思います。

 レスポンシブを可能にするには Media Query を使用する事になりますよねぇ。
 サイドカラムをどれだけ確保するかと云うのが切り目になると思います。
 私は以前、サイドカラムも可変にしたのですが、めっちゃ難しかったです。

 遠太さんもリンクされているブログ
 The other way round さんはめっちゃ参考になりますね。
 自力と云うこと。応援しています。頑張ってください。

遠太  

2018/01/05 (Fri) 22:51

Re: タイトルなし

higeさん

再度こんばんは。

はい、ホームページの方は Media Queryを使用して、改行や文字の大きさを
変えています。

ブログの方は、また、対応して記事にしたい思っております。
ご指摘のサイトはhigeさんのブログから知りました。

今回はコメントありがとうございました。(感謝)