attention admin about comments trackbacks you may also like

170404 まちづくり協議会ホームページ、スマホ対応

2017年04月04日
まち協
4
以前の記事でも紹介しました、私が事務局を務めます中間西校区まちづくり協議会のホームページですが・・・
現在「試験運用中」という形で準備中、調整中です。
やっと、検索エンジンにも登録され「中間西校区」だけの検索で上位にランクされるようになりました。
で、ホームページのそのものですが、スマホで閲覧されることは大前提で、スマホ対応を余儀なくされています。
PCでメモ帳にHTMLを記述してホームページを作っているのですが、私、ガラケーで、作ったホームページをスマホで確認できないんです。
しかも、このガラケー先月(3月)に機種替えまでして、通話のみ、携帯でのEメール、ネットも使わなくしました。
そこで、仕方なくまちづくり協議会の事務員さんのスマホで確認をさせていただいていたのですが、何とかPCでスマホの画面で見ることができないか調べてみましたら・・・
何のことはなく、グーグルのクロームでホームページを表示させて「F12」を押すと左半分に表示されます。
なんと、機種も選べます。
スマホに対応しないとこのような表示に・・・
なぜこのような表示になるかと言うと、どうもiphon5の横幅320pxの画面に、PCで表示される980pxの表示を320pxに自動縮小して表示しているようです。
左右の余白は表示させなくて、スマホの画面いっぱいに表示させたいですね。
ネットで調べ調べ、解決しました。
じゃあ、このブログは・・・
まちづくり協議会のホームページ同様、対応をします。
FC2ブログの「管理画面」から「テンプレートの設定」の「HTML編集」で、HTMLを1行追加します。
ただ、気づいたのですが、最初から表示させるコンテンツを980pxで作っていれば、この対応は要らないような・・・
980pxより小さなスマホの画面では横幅いっぱいに、980pxより大きな画面では、左右の余白に指定した背景画像なり背景色が表示される・・・
さて、協議会のホームページの方では、画面が小さい時に、画面に応じて文字の大きさ、改行にも配慮しました。
ipadやPCでは、こんな感じ。
iphone5では、こんな感じ。
ネットで、サイトやブログの記事を参考に、見よう見まねですが、画面のサイズに合わせて改行、文字の大きさを調整する事ができました。
中間西校区まちづくり協議会ホームページ
中間西校区まちづくり協議会ホームページ
ブログランキングに参加しています。応援よろしく です。
関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(4)

There are no comments yet.

ミドリノマッキー  

2017/04/13 (Thu) 20:44

お疲れさま。
ホームページスマホ対応、その後どうですか。

自分もスマホで試してみました(笑)
“中間西校区”で検索ヒット。ホームページは見れましたよ。まだ試験運用中になっているようですね。
さらに問い合わせ先の下にある記事の見出しをクリックしたら記事のページに入れました。
ただ、その下に三つ並んでいる“まちづくり協議会”などの項目はクリックしてもどこにも飛びませんでした。機種が違うのでしょうか。

余計なことかもしれませんがお節介してみました。
自分もこういうのは詳しくはないので良く分かりませんが、うまく出来て多くの人に読まれるようになることを祈っています。

遠太  

2017/04/13 (Thu) 21:54

Re: タイトルなし

ミドリノマッキーさん、コメントありがとうございました。

いやいや、貴重なご意見ありがとうございます。

ご指摘の項目は、マウスオーバーするとプルダウンメニューが表示されます。
PCで確認していただくと分かるかと思います・・・

で、お使いのスマホの機種とホームページを見るアプリ(ブラウザ)を
教えていただくと助かります。

ミドリノマッキー  

2017/04/15 (Sat) 14:23

返事が遅くなり申し訳ありません。

スマホの機種はF-06F。
ブラウザはグーグルクローム。

お役に立てれば幸いです。


確かにPCではいろいろな項目が表示され、それぞれのページに入り記事を読むことができました。

遠太  

2017/04/15 (Sat) 14:43

Re: タイトルなし

ミドリノマッキーさん、返事ありがとうございました。

参考になります。
とりあえず、マウスオーバー式を止めて、クリックしていただいて、
別ページでメニューを表示する方式に変えました。

少しずつ、改造したいと思います。