ホーム > 亀の子記（日記）ど素人が独学でHTMLやPHPを勉強してサイトを作る日記

【230日目】「リンク同士が近すぎる！」とGoogleに指摘されたので対応してみた

Posted:2021.04.17　 Last Update:2021.04.17

先日から初めたブログの利便性を整える作業。今日はGoogleに指摘されている「フッタ部分のリンクが近すぎてユーザーフレンドリーじゃない！」という指摘に対応していきたいと思います。他サイト様のフッタ部分、何となく座りが悪いと思っていましたが、実はユーザーフレンドリーだったんですね…。

一大プロジェクトの間に寄り道中

こんにちは「亀の子」です。自力でサイトを構築してブログを運営しています。

実はここ4か月くらい、裏側の仕組みを作っていました。というか、作ろうとしていました。ブログを簡単に入力できるフォームを作ろうと奮闘していたんですよね。仕組みにJavaが必要なので、Javaの勉強をしていたのですが、飽きちゃった！

飽きちゃったので、現在は息抜き中。ブログの利便性を向上しようと、やることを洗い出したのが昨日。やりたいことは今のところ次の3つです。

今日は「Google Lighthouseに指摘された事項を解決したい」に取り組みたいと思います。

Google Lighthouseというのは、Google Chromeで提供されている拡張機能です。サイトのユーザビリティ（使い勝手のよさ）を評価してくれます。悪い点も指摘してくれる優秀な奴です。

私のサイト、いろいろ指摘されているのですが、困ったことが…。指摘のほとんどが「Googleのサービスのjavaが遅い！」という指摘なんですよね。Googleアドセンスとか、Googleアナリティクスとか。そこはGoogleにどうにかしてほしい…。

で、いま指摘されていて対応できそうな問題を探してみました。前から気になっていたものが一つありました。SEOのところ、こんな記載があります。

英語ですが、指摘は2つあります。1つ目「リンク同士の距離が近すぎて、スマホだとタップしずらい」。2つめ「リンクのサイズが小さすぎてタップしずらい」

なんかさ、下の方のリンク一覧にやけに場所をとっているサイトあるじゃないですが。なんてこんな無駄に場所を使うんだろうと思っていたのですが、スマホに対応するためだったのかな…。

はい、とりあえず、ここ、対応しましょう！

まずは現在の状況をお見せしましょう。確かにスマホだとクリックしにくいかな…？リンクの境目が分かりにくいですね。

スマホ表示では、真ん中ぞろえで縦に並ぶようにしましょうか。

スタイルシートを弄って…。こうなりました！

とりあえず「リンク同志の距離が近すぎて、スマホだとタップしずらい」という問題は解決できたと思います。

おっと、今日はここで時間が来てしまいました。とりあえず今日やったものを本番環境に反映させて様子を見てみましょう。そのほかについては後日また考えます。

では、できればまた明日作業します！