アーカイブリンクの領域を広げるCSSの記述
-
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。【質問の主旨】
ヘルプが必要なページのサイドバーにあるアーカイブリンクのタップ領域について、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の注意喚起を消せるという理由はこちらのブログ記事を参考にさせてもらっています。
—
以上、ご確認のほどよろしくお願い申し上げます。
ヘルプの必要なページ: [リンクを見るにはログイン]
- トピック「アーカイブリンクの領域を広げるCSSの記述」には新たに返信することはできません。