私ども平和の絵本の、日々の活動日誌です。

スマホ対応終了:「平和の絵本で-和を地球へ」活動日誌

TOPへ-活動日誌(平和の絵本から)

私どもの平和と癒しの運動の、日々の活動日誌です。

スマホ対応終了


日本語版の本体WEBのスマホ対応が、ようやく終了。
過去の活動日誌を見ると、今年の1月6日に、スマホへの対応は検討課題とある。この時点では、どうすればスマホ対応に出来るのか、さっぱり分からなかった。
2月8日の活動日誌を見ても、やり方が分からないとある。ただこの時点でグーグルのモービルフレンドリーテストをしており、実際、このテストの存在を知って、やり方が少し見えてきた。その後、試行錯誤を繰り返し、4か月超、ほとんどかかりきりになって、ようやく終了!

行なった作業の内容を、以下、ざっと備忘録としてまとめておく。

●view portの指定をWEB全頁で。scale=1とした。最初はscale指定無しでやってみたのだが、色々試して、結果、やはり1が一番、表示が綺麗と結論。
●作業の途中でページの読み込みスピードという概念も知り、mod_pagespeedの圧縮によって、読み込みのスピードアップを行なった。
●今までSNSのクリックボタンについては、外部のjava scriptを利用していたのだが、ページ読み込みスピードを速め、スマホ対応の点数アップのために、自分でボタンを設置するように変更した。
●cssファイルについて、今まで本文ページと表紙ページ用として各絵本で2つのcssファイルを使っていたのだが、よりシンプルにするために、各絵本で1本に統一した。
●cssファイルについて、読み込みスピードをあげるために、出来るだけ簡略な記述へと変更。
●SEO目的で、絵本と解説を、htmlベースでは上下逆転していたのだが、それではどうしても画面の大きさで、枠が崩れるために、上下逆転をやめて、よりシンプルな表示方法へ変更。 これは全絵本のトップ頁。
●CSS配信の最適化もトライしたが、スピードアップの結果が得られず、今回は見送りとした。
●PHPを利用し、各絵本の本文下にある目次の修正。これは全絵本の本文の修正。
●絵本の絵は、スマホ用に小さく出来ず(スマホ用の別のページを作る必要があり、膨大な作業量となる)、代わりにPDFファイルで読んでもらうこととした。 そこでPDFの絵本をスマホで読みやすいように、PDFの文字を大きくし、絵本全てのPDFファイルを書き直し。
●トップ頁目次などで使用する画像を、スマホ表示に合わせて、小さく変更。大きさの統一。
●Table表示ももスマホ表示ではマイナスになることが多いので、なるべく行なわないように変更。
●画面が大きい時は、テーブル/画像表示が、横に並び、画面が小さいときには、縦に並ぶようにcssを工夫。display: inline-block;を活用。始めblock指定をせず、枠が崩れた理由が分からず、しばらく苦労した。^^;
●画像へ、vspaceとhspace(これも今回初めて勉強した)を利用し、表示幅などの調整。
●スマホ表示に合わせて、contentの幅を左右から2%だったものを1%へ変更。
●ヘッダー、フッターの表示幅も修正。PC用に行っていたheight指定をやめて(表示が崩れるため)、line-heightなどで調整。ヘッダーについては、margine-bottom指定を行い、brによる改行を減らすこととした。
●スマホ表示時に折り返し文字が重ならないように、line-heightやpaddingを調整。
●スマホ表示に合わせ、箇条書きの幅を指定。liにmargin-top:0.8em; margin-bottom:0.8em指定をつけることとした。またlist-style-position:inside指定も。


この後は英語版WEBの修正もある。スマホ対応の修正ばかりやっていても、つまらないので、英語版については時間を掛けてゆっくりやろうと思っている。
関連記事

  1. 2016/06/27(月) 14:05:56|
  2. 日誌|
  3. トラックバック:0|
  4. コメント:0
<<一生分の絵本のアイデア | HOME | 辞世の句>>

コメント

コメントの投稿。 ☆スパムはご遠慮くださいね。

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://peaceactivity.blog50.fc2.com/tb.php/1690-0cb87b69
















































当サイトと無関係の広告;[

FC2Ad