本稿はCocoonセッティングにおけるTipsです。
とりあえずLighthouseでチェックしてみましょう。
もし引っ掛かっていたら対処しましょう。
作業自体は１分掛からないと思います。
Lighthouseとは？
Lighthouseは、ざっくり言うとGoogle謹製のサイトチェックツール。
サイト速度やSEOなどについて調べられます。
本稿はLighthouseについて知っていることを前提に記していますので、これ以上の説明は割愛します。
知らなかった方はこちらをどうぞ。
Chromeにインストールしておくと便利です。
Tap targets are not sized appropriatelyの指摘
Lighthouseで当サイトを検証したところ、SEOで指摘をされました。
ざっくり言うと、
今回の場合は「メニューの高さが足りていない」ということです
指摘では48px48pxが必要とありますが、当サイトは40pxしかない。
よって対処します。
修正方法
子テーマのstyle.cssに次の記述をします。
#navi .navi-in>.menu-mobile li {
width: 50%;
height: 50px;
line-height: 50px;
}
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer li.menu-item {
min-height: 50px;
}
}
ヘッダーとメニューの高さを50px（以上）にするというCSSです。
セレクタ指定はChromeのデベロッパーツールそのまま。
面倒くさかったからなのは内緒です。
修正結果
指摘が消えて、スコアが１上がりました。
ちなみに「Links are not crowlable」は無視してOKです。
（SNSシェアボタンのリンク先が辿れないという指摘なので）
参考URLはこちらです。
Lighthouseの”Links are not crawlable”という注意喚起を削除する方法を教えてください。
まとめ
ぶっちゃけ、あまり気にすることもないと思います。
でも、ナビの高さを修正するだけのこと。
手間は掛かりませんし、もし引っ掛かっていたら修正しておきましょう
私はConoHa以外を勧めない。
2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。
レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。
※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。