一つ前の日記へ一つ前へ |   | 次の日記へ次の日記へ

のぼみ~日記 2015

2015/09/01の2

のぼみ~日記をスマホ対応に


スマホ対応前の見え方↑


スマホ対応後の見え方↑

このところずっと取り組んでいるWEBページのスマホ対応。今日も奮闘している。
のぼみ~日記は毎年数百ページもあるので、過去の分も全部直すにはどうすればいいのか……。これから書いていく分はどのように改良したらいいのか……。

いろいろ考えたり、WEBで検索しながら勉強したりした結果、結論としては、
……ということで、1つのCSSにPCブラウザ用とスマホ用の記述を併記する方法を採用することにした。

いろんなページを参考にさせてもらったが、いちばん役に立ったのは⇒ここかな。感謝。

簡単に解説すると、まず、htmlのヘッダー内に、
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
という記述を追加する。これで、外部スタイルシートに併記されたスマホ用の内容が反映されるようになる。

次に、スタイルシートにスマホ用の記述を追加していく。
最初に、おまじないだと思って、
@media screen and (max-width: 480px) { img { max-width : 100% ; height : auto ; float : none ; } }

という記述を追加。
これは写真画像をスマホの横幅に合わせて縮小表示させるためのもの。端末のスクリーンが480ピクセル以下の場合(スマホやiPod touchなどの場合)は画像は横幅100%に表示してね、なおかつテキストの回り込みもさせないでね、という意味になる。

この記述の最初にある @media screen and (max-width: 480px) { という1行は重要で、ここからはスマホ用の記述ですよ、という命令。この記述のおかげでhtmlだけでなく、スタイルシートも1つで済む。
ブラウザの横幅を480ピクセルを境界にして、それより大きければここから先の記述は無視してね、それより小さければスマホだから、ここから先の記述に従ってね、という意味だ。

例えば、のぼみ~日記は今まで、本文テキストは <div class="d1"> ~ </div>で囲んで記述して、写真のキャプションはそれを指定せず、BODYの素のフォントを小さめにして、写真と一緒に中央揃えしていた。
写真の基本横幅を今は800ピクセルにしているので(以前は650ピクセルにしていたが、一般的に回線が速くなっているので、後から転用するときに解像度不足にならないよう、800ピクセルにした)、キャプションはたいてい1行で収まるから、中央揃えでもいいだろう、という判断だ。
ところが、スマホでは横幅が狭いのでキャプションが中央揃えになるとほとんどは改行されてしまってみっともない。
そこで、PCでは中央揃えでいいけれど、すまほだと普通に左揃えにならないかな、と考えた末に、こんな風にしてみた。
.cap{ width:800px; font-size:0.8em; font-family:sans-serif; color:#0000e8; margin-left:12px; margin-right:12px; background-color:#f0f0f0; -webkit-text-size-adjust : 100%!important ; padding-bottom:0.4em; text-align:center; } @media screen and (max-width: 480px) { .cap{ width:100%; font-size:0.8em; font-family:sans-serif; color:#0000e8; line-height:1.5em; margin-left:0px; margin-right:0px; background-color:#dfdfdf; padding-bottom:0px; -webkit-text-size-adjust : 100%!important ; text-align:left; } }

これでPCで見るとキャプションは画像に合わせて中央揃えだが、スマホだとキャプションは普通に左揃えになった。

@media screen and (max-width: 480px) {を使うときは、これの閉じカッコを忘れないように。
本来の記述用の { } があるから、スマホ用の記述の最後は } } と2つの閉じカッコがつくことになる。

そんなわけで、大変な苦労の末に、のぼみ~日記はほぼ全ページ、一気にスマホ対応になったとさ。やれやれ。

2005年1月の日記もスマホ対応で読みやすくなった↑



のぼみ~日記は1年に数百ページ書いているので、過去の分を含めると数千ページになる。これだけのhtmlファイルをすべてスマホ対応に書き換えるのはどうやったか?
例えば、 <meta name="viewport" content="width=device-width,initial-scale=1.0" />という1行をすべてのページのヘッダ部分に追加しなければいけないわけだが、入れたい場所の直前に書いてある文字列を適当に指定して、それを含めた形で<meta name="viewport" content="width=device-width,initial-scale=1.0" />という文字列に一括置換すればいい。
これができるのは、今なおすべてのhtmlをテキストエディタでしこしこソース直書きしているから。
今この日記を書いている画面はこんな感じ↓


使っているのはテキストエディタQXのαバージョン(UTF-8対応)&ねこみみさんのhtml支援マクロ

複数ファイルの一括置換にはDevasというフリーソフトを使った。これは本当にすごいソフトで、複数ファイルから指定された文字列を探しだすだけでなく、それを一覧表示して、別の文字列に一括置換してくれる。数百のファイルでも瞬時にやってくれる。しかも文字コードはUTF-8でもShift-JISでも大丈夫なので、htmlファイルの文字コードを問わない。

こういう作業は、Windowsが多数のフリーソフト作家たちによって支えられていたよき時代の産物。僕は今では、音楽と動画はMacを使っているが、文章関連の作業をMacではまったくやれない。QXや秀丸のような日本語環境を重視したテキストエディタ(縦書き表示に対応して、さまざまなマクロが発表されている)や使いやすいファイラーが見つからない。探せばあるのかもしれないが、とても今からそれをやる気にはならないし、やる意味も見つけられない。
重い処理をする動画や音楽の作業をMacにやらせることで、コンピュータの役割分担ができ、それぞれに特化した環境設定ができるというのもWindowsとMacを使い分けるメリットだ。
それでも、Macで動画編集などをしていると、キャプションやタイトル文字を入れるだけでWindows環境の何倍もの時間がかかって難儀している。ファイルのコピーや移動も慣れない。作ったはずのフォルダがなかなか表示されなかったり……Finderだけはどうしても受け入れられないなあ。

tableタグは使うな!

というわけで、話が少し脱線したが、のぼみ~日記が終わったので、引き続き、日光どっと倶楽部日光クリックのページにも着手。
考えてみると、こういう地域ガイドのサイトこそ、出先でスマホで情報を得たいと思うケースが多いはずで、もっと早く気づくべきだった。
しかし、こちらは表組が多く、入り組んだレイアウトにしてあるページばかりなので、CSSだけで対応するのは無理で、htmlを相当手直しする必要がある。
大変な作業になってしまった。

日光クリックの中の1ページ。スマホで見ると細かくて読めない



TABLEタグによる横配列レイアウトを外して、縦に並べるようにhtmlを変更し、なおかつCSSでスマホ対応に



トップページはこんな風になった






iBooks図書館ガイド

Kindleアプリで本を読む

更新が分かるように、最新更新情報をこちらの更新記録ページに極力置くようにしました●⇒最新更新情報



一つ前の日記へ一つ前へ |  | 次の日記へ次の日記へ


    
Kindle Booksbooks    たくきの音楽(MP3)music    目次へ目次    takuki.com homeHOME


tanupack音楽館  よいサイト 41.st  たくき よしみつの本 出版リストと購入先へのリンク  デジカメと写真撮影術のことならここへ! ガバサク道場


「福島問題」の本質とは何か?


『3.11後を生きるきみたちへ 福島からのメッセージ』(岩波ジュニア新書 240ページ)
『裸のフクシマ』以後、さらに混迷を深めていった福島から、若い世代へ向けての渾身の伝言。
複数の中学校・高校が入試問題(国語長文読解)に採用。大人にこそ読んでほしい!

第1章 あの日何が起きたのか
第2章 日本は放射能汚染国家になった
第3章 壊されたコミュニティ
第4章 原子力の正体
第5章 放射能より怖いもの
第6章 エネルギー問題の嘘と真実
第7章 3・11後の日本を生きる

今すぐご注文できます 
アマゾンコムで注文で買う
⇒立ち読み版はこちら
裸のフクシマ  『裸のフクシマ 原発30km圏内で暮らす』(講談社 単行本352ページ)
ニュースでは語られないフクシマの真実を、原発25kmの自宅からの目で収集・発信。驚愕の事実、メディアが語ろうとしない現実的提言が満載。

第1章 「いちエフ」では実際に何が起きていたのか?
第2章 国も住民も認めたくない放射能汚染の現実
第3章 「フクシマ丸裸作戦」が始まった
第4章 「奇跡の村」川内村の人間模様
第5章 裸のフクシマ
かなり長いあとがき 『マリアの父親』と鐸木三郎兵衛

今すぐご注文できます 
アマゾンコムで注文で買う
⇒立ち読み版はこちら



Google
abukuma.us を検索 tanupack.com を検索