サイトのスマホ対応を開始しました４ [IT/PC関係]
ＧＷに入りました。外出もしないでサイトのメンテナンスしています。
サイトのスマホ対応の努力継続していますが、何とか少しは見る気になりそうなレベルになってきました。
ＰＣ閲覧用とスマホ閲覧用のスタイルシート切り替える方法です。その方法を整理したので、興味ある人は見てやってください。
色んな端末が出てきて、それぞれに対応する必要があり、サイト運営も中々大変です。ブログやＳＮＳを利用したくなる気持ち良く分かってきました。
サイトのスマホ対応の努力継続していますが、何とか少しは見る気になりそうなレベルになってきました。
ＰＣ閲覧用とスマホ閲覧用のスタイルシート切り替える方法です。その方法を整理したので、興味ある人は見てやってください。
色んな端末が出てきて、それぞれに対応する必要があり、サイト運営も中々大変です。ブログやＳＮＳを利用したくなる気持ち良く分かってきました。
サイトのスマホ対応を開始しました３ [IT/PC関係]
サイトのスマホ対応の続きです。
今日の記事は、Googleウェブマスターエラーメッセージ「Flash が使用されています」についての対応策についてです。私のメインサイト記事に追記しました。詳細は、サイトの記事見て下さい。
今日の記事は、Googleウェブマスターエラーメッセージ「Flash が使用されています」についての対応策についてです。私のメインサイト記事に追記しました。詳細は、サイトの記事見て下さい。
要約すると、Apple系、Android系スマホともに、デフォルトの状態では Flash 動画の再生出来ないようです。対応策としては、html <video> タグを使って、h.264形式の動画を埋め込むのが良さそうです。
私が確認した範囲では、Apple系、Android系スマホやＰＣ用の主要ブラウザ最新版（IE、Chrome、Firefox）で動画再生出来ました。試してみてください。
私が確認した範囲では、Apple系、Android系スマホやＰＣ用の主要ブラウザ最新版（IE、Chrome、Firefox）で動画再生出来ました。試してみてください。
サイトのスマホ対応を開始しました２ [IT/PC関係]
前記事でスマホ対応上の問題点として挙げた「ビューポートが設定されていません」で、ビューポートという用語に初めて接したので、少し調べてみました。
ビューポート（Viewport）というのは、スマートフォンでWeb サイトを表示する際の仮想的なウィンドウサイズといえる機能の事という事です。この機能は、ウェッブサイトhtmlの <head> 内に、<meta> として設定できるようです。ビューポート（Viewport）には幾つか属性があり、その設定によってサイトの見え方が変わります。設定をいくつか変えて、スマホからの見え方を調べてみました。詳しくは、下記リンクのページを見てください。
同じく問題点として挙げられていた「フォントサイズが小です」も、現状サイト構成で出来る範囲で対応してみました。
「タップ要素同士が近すぎます」への対応は、暫定的対応としては諦めとなりました。俗に言う３ペインのページでは、対応難しそうです。本格的にスマホ対応掛けるときに、この要素も十分考えたいと思います。
サイトのスマホ対応を開始しました１ [IT/PC関係]
スマホ対応全く考慮せずにこのサイト構築してましたが、やはりスマホ対応が必要と感じてその研究始めました。Googleのウェブマスター ツールにも「モバイル ユーザビリティ上の問題が検出されました」と出てくるようになり、より一層スマホへの対応が重要と思いその対応を始めた次第です。
ウェブマスター ツールで指摘があった問題点は、
ウェブマスター ツールで指摘があった問題点は、
- ビューポートが設定されていません
- フォントサイズが小です
- タップ要素同士が近すぎます
- コンテンツのサイズがビューポートに対応していません
- Flash が使用されています
私自身がガラパゴスの生き物なので、依然としてガラゲー族です。なのでスマホでの閲覧環境無いのが最初のつまづきなのですが、スマホ画面をエミュレートしてくれるツール発見しました。Chromeがエミュレータを提供してくれます。エミュレーターの起動方法をサイトにupしたので、必要の方は以下のURLを見てください。
サイトも少しずつスマホ対応していきます。上のリンクページも少しずつ拡充していきます。
