サポート » テーマ » アーカイブリンクの領域を広げるCSSの記述

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっています。
    下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

    【質問の主旨】

    ヘルプが必要なページのサイドバーにあるアーカイブリンクのタップ領域について、Lighthouseから「狭い」と指摘されます。この指摘を受けない程度に領域を広げるためにはstyle.cssにおいてどのような記述をすれば良いでしょうか?

    【質問の補足】

    1. アーカイブリンクとLighthouseの注意喚起

    現在、ヘルプが必要なページのサイドバーにWordPressのウイジェット機能で月別のアーカイブリンクを表示させています。GoogleのLighthouseでこのページの評価を確認するとSEOの項目で”Tap targets are not sized appropriately”という注意喚起が表示がされます。

    2.注意喚起を消すためのCSS

    この注意喚起を消すためにサイドバーにあるアーカイブリンクのpaddingを広げるためのコードを下記の通り記述しました。

    .widgettitle li a {
      padding: 10px;
    }

    ですが実際にはアーカイブリンクのpaddingは広がっているようには見えません。なおstyle.cssはGitHubで公開しています。

    3. キャッシュの削除

    ヘルプが必要なページではプラグインの1つとしてWP Super Cacheを使っています。style.cssを追記したあとにログインした状態でキャッシュを削除していますが、それでもなお追記したコードの内容が反映されません。

    4. padding: 10pxの根拠

    paddingを10pxにすることでLighthouseの注意喚起を消せるという理由はこちらのブログ記事を参考にさせてもらっています。

    以上、ご確認のほどよろしくお願い申し上げます。

    ヘルプの必要なページ: [リンクを見るにはログイン]

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • こんにちは

    アーカイブ(月別)のリンクの場合は、

    .widget_archive li a {
      padding: 10px;
    }

    では、ないでしょうか?

    最新記事のリンクの場合は、

    .mymenu .new_article a {
      padding: 10px;
    }

    こんな感じではないでしょうか?

    トピック投稿者 echizenya

    (@echizenya)

    @ishitaka さん。
    いつもコメントありがとうございます。

    アドバイスに基づき以下の通り対応しました

    1. アーカイブ(月別)のリンク

    .widget_archive li a {
      padding: 10px;
    }

    .widget_archive li a のクラスに対して10pxのpaddingを取ったところ、リンク間の間隔が広くなり、かつLighthouseからの注意喚起もなくなりました。

    2. 最新記事のリンク

    最新記事のリンクの箇所では1つの記事について、3つのaタグを使っていました。sidebar.phpでそのうち2つのリンクを解除すると、Lighthouseの注意喚起がなくなりました。教えていただいたコードは参考にさせていただきます。

    なお、いただいた回答はGitHubで変更を反映させました。お手すきのときにでもご確認をいただけると幸いです。

    今後ともどうぞよろしくお願いします。

    トピック投稿者 echizenya

    (@echizenya)

    先の回答で「解決済み」をチェックすることを忘れていました。この質問は解決済みとします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「アーカイブリンクの領域を広げるCSSの記述」には新たに返信することはできません。