iPad,iPhone,iPod Touchでの表示に配慮し、CSSのhoverを使わない設定

更新
2012年12月28日(金)

マウス操作用のCSS擬似クラスhoverを取り除く方法です。記事本文を表示するエリアに設定している部分に関してです。当サイト作者が作成した次のテンプレートについてです。

概要

  1. fc2blogをiPadで閲覧時、hoverによるエフェクトが操作性を損ねる要因の1つになります。

  2. hoverによるエフェクトが設定されている部分をフリックやスワイプしても、快適に操作できません。

  3. よって、iPadでの閲覧に配慮し、CSSによるhover時の設定を変更します。

  4. この記事公開時には、iPod Touch 5での操作性改善を確認しています。iPhoneやiPadに関しては追記する予定です。追記:iPhoneでは改善、iPadでは改善なしだったようです。

テンプレートのCSSを編集

  1. 次のコードを探します。

    /*記事 > 各記事を囲っている枠線*/
    .entry,#sticky,#single .entry:hover{
    border:1px dashed #ddd; /*この行を丸ごと削除すると記事ごとに囲われている枠線を消去できます*/
    padding:9px; /*1行上を1行まるごと削除した場合、ここの9pxを10pxにした方がいいです(ガタつき防止)*/
    margin:0 0 1em;
    box-shadow:none;
    }
    .entry:hover,#sticky:hover{border:3px dashed #ccc;padding:7px;box-shadow:3px 3px 5px #777;}/*ie6非対応*/
      /*1行上を1行まるごと削除すると、マウスオーバーしても枠線が変化しなくなります。*/
  2. 次のコードに変更します。グレイの部分は不要ですが、変更した部分がわかりやすいようにグレイアウトで残しておきました。

    /*記事 > 各記事を囲っている枠線*/
    .entry,#sticky{/*,#single .entry:hover*/
    border:1px dashed #ddd; /*この行を丸ごと削除すると記事ごとに囲われている枠線を消去できます*/
    padding:9px; /*1行上を1行まるごと削除した場合、ここの9pxを10pxにした方がいいです(ガタつき防止)*/
    margin:0 0 1em;
    box-shadow:none;
    }
    /*.entry:hover,#sticky:hover{border:3px dashed #ccc;padding:7px;box-shadow:3px 3px 5px #777;}*//*ie6非対応*/
      /*1行上を1行まるごと削除すると、マウスオーバーしても枠線が変化しなくなります。*/
  3. valid-seo-2c と valid-seo-3c は以上です。customtemplate と customtemplate-3c では次のコードを探します。

    /*¶マウスオーバーしている段落のライトアップ*/
    
    .h3>li,.h4>li,.h5>li,.lightup>li{margin-bottom:18px;margin-left:0;}
    .h3>li:hover,.h4>li:hover,.h5>li:hover,.lightup>li:hover{
    outline:3px double #3cc;background:#ffe;margin:0 -10px 18px;padding:0 10px;}
    .entry-content .h3,.entry-content .h4,.entry-content .h5,.entry-content .lightup{margin-left:0;list-style:none;}
    .h3 p:before,.h4 p:before,.h5 p:before,.h3 .p:before,.h4 .p:before,.h5 .p:before,.h3 dt:before,.h4 dt:before,.h5 dt:before{color:#999;font-size:70%;}
  4. 次のコードに変更します。ここでもグレイの部分は不要ですが、変更した部分がわかりやすいようにグレイアウトで残しておきました。

    /*¶マウスオーバーしている段落のライトアップ*/
    
    .h3>li,.h4>li,.h5>li,.lightup>li{margin-bottom:18px;margin-left:0;}
    /*
    .h3>li:hover,.h4>li:hover,.h5>li:hover,.lightup>li:hover{
    outline:3px double #3cc;background:#ffe;margin:0 -10px 18px;padding:0 10px;}
    */
    .entry-content .h3,.entry-content .h4,.entry-content .h5,.entry-content .lightup{margin-left:0;list-style:none;}
    .h3 p:before,.h4 p:before,.h5 p:before,.h3 .p:before,.h4 .p:before,.h5 .p:before,.h3 dt:before,.h4 dt:before,.h5 dt:before{color:#999;font-size:70%;}

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

  1. 上記説明で述べた方法もしくは今後改良したものをデフォルトで採用するかもしれません。よって、改訂版ではこのページで述べた方法が不要であったり、相違がある可能性があります。

以上です。

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