iPhoneとiPod touchのPCビューでfc2blog閲覧時の操作性を改善

更新
2012年12月20日(木)

iPhoneとiPod touchで、スマートフォン表示ではなくPCビューで閲覧時の操作性を改善する方法です。当サイト作者が作成した次のテンプレートについてです。

追記:このページで述べる方法ではiPadの操作性を改善できなかったようです。よって、記事タイトルから「iPad」という文言を削除しました。

結論(CSSコードを追加して重なりを調整)

  1. CSSコードを追加するだけです。

  2. CSS編集の最後あたりに次のコードを追加します。

    /*iPhoneとiPod touchのPCビューで記事の前に広告を表示暫定コード(ver1.0.0.121220)*/
    .adlantis_sp_sticky_container{z-index:100;}
  3. 上記コードで、後ろに表示されている広告を前にします。当サイト作者が作成したテンプレートは、iPod touchなどの端末でブログを表示すると、記事の後ろにfc2さんが自動挿入する追尾式広告が表示されます。この重なりを調整します。

  4. ちなみに、次のサイトに上記コードを追加しましたので、そのサイトをiPhoneなどでご覧いただいてからコードを追加してもいいかもしれません。

    121220ipod-touch-pcview.png

導出過程

iPadでの操作性

  1. テンプレート利用者さんによると、当テンプレートを使用しているブログをiPadで表示し、画面をスクロールさせようとしても思うように操作できない、とのことです。

  2. 作者はiPadを利用できる環境にないので上記症状を確認していません。ただし、iPod touch 5のPCビューで表示し、画面スクロール時に0.5~1秒程度のひっかかりのようなものは確認しました。

前提事項

  1. テンプレート利用者さんにiPadで確認いただいたことは次のとおりです。

    • テンプレートのカスタム前後で変わりない。これにより、カスタムではなくテンプレート自体に原因があると分かる。
    • JavaScriptを無効にすると快適に操作できる。これにより、JSにより操作性が変更されているのが分かる。
    • 複数のブラウザで同じ症状になる。これにより、safari固有の現象でないと分かる。
    • iPadの状態や設定による影響はなさそう。これにより、iPad自体に原因がなさそうだと分かる。
  2. 作者として事前に知っていたことは次のとおりです。

    • ご利用いただいているテンプレート(valid-seo-3c)には外部JavaScriptファイルは未使用。
    • iPod touchのPCビューだとfc2さんの追尾広告がJavaScriptで挿入される。
    • 当テンプレートでは広告が記事の後ろに表示される。
  3. iPod touch 5で調べたことは次のとおりです。

    • 他のfc2blog用テンプレートでは、当テンプレートと同じ症状(0.5秒ひっかかり)があるものもあれば、ないものもある。
    • 追尾広告が表示されてもひっかかりが全くないブログもある。
    • 追尾広告が全く表示されないブログもある。
    • 追尾広告が表示される場合、当テンプレート以外で記事の後ろになるものはない
    • iPod touch 5では、追尾式広告が表示されない時の操作は快適。なぜか、同じ記事であっても追尾式広告が表示される時とされない時がある。
    • iPod touch 5でもJSを無効にすると操作が快適。

前提に基づく推測

  1. 以上より、当テンプレートではfc2さんの追尾広告(JavaScript)があると操作性が変更される、と推測しました。

当テンプレート固有の点に注目

  1. 当テンプレートのみの状況である、「広告が記事の後ろ」に着目し、広告の表示を記事の前にしたところiPod touch 5ではひっかかりが解消し操作が快適になりました。

  2. iPadでも同じように改善するとは限りませんが、これがもっとも可能性が高いので冒頭のとおり結論付けました。

試行錯誤を列挙

  1. 上記結論に至るまでに、当テンプレートと他テンプレートとの相違点をもとに検証したものを列挙しておきます。

  2. HTML5で作成されているテンプレートではひっかかりがなかったので、当テンプレートを即席でHTML5にしましたが奏功しませんでした。

  3. XML宣言を削除しましたが奏功しませんでした。

  4. HTMLのmeta viewportを削除しましたが奏功しませんでした。

  5. jQueryなど外部JSファイルを読み込まないようにしましたが奏功しませんでした。

  6. IE8以下用CSSを読み込まないようにしましたが奏功しませんでした。

  7. HOMEページなどで記事部分ホバー時に枠線が太くなるCSS設定を機能しないようにしたところ、若干の改善がありました。iPod touchなどのタッチディスプレイでは、通常のPC利用時のhoverによるエフェクトが正常に表現されないので、それが関係あるのかなと思います。

今後のテンプレート改訂時には

  1. 上記説明で述べた方法をデフォルトで採用する予定です。よって、改訂版ではこのページで述べた方法が不要であったり、相違がある可能性があります。

他サイトの参考になるページへのリンクです。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)