COCOONタップターゲットのサイズ変更をしました。

Google Search Consoleで「改善が必要」が大量に出て困っていませんか？
特に多いのが「タップターゲットのサイズが適切に設定されていません」という警告。
今回は、Cocoonテーマを使っている方が管理画面からCSSを追加するだけで直せる方法を解説します。

contents

✅Google Search Consoleで大量の改善が必要が出た
✅「タップターゲットのサイズが適切に設定されていません」の原因
✅解決：追加するCSSコード
1. 調整ポイント
✅手順（スクリーンショット参照不要でできる簡単手順）
✅チェック結果（私のケース）
✅注意点・トラブル対処
1. 注意点まとめ
✅まとめ

✅Google Search Consoleで大量の改善が必要が出た

「今すぐ開始」をクリックして診断を進めると、PageSpeed Insightsのリンクが出ます。そこでチェックすると該当の指摘がズラリ。私の場合、修正しても一部は再度「要改善」になったり、逆に別の機能（ブログ村のPVバナーやサイドバーのスクロールボタン）が動かなくなったり……ということがありました。

なので作業は１つずつ。何を直したら不具合が起きたか分かるように、変更→確認を繰り返すのがおすすめです。

Google Search Consoleで今すぐ開始をクリックすると

改善が必要なURLが86件にも💧

PageSpeed Insightsを試すとあるので試します

改善が必要なURLが86件もありましたが、1つずつ修正して少しずつ減らしました。ところが後日また増えてしまい、安定しませんでした。

✅「タップターゲットのサイズが適切に設定されていません」の原因

今回の原因は、CocoonのプロフィールウィジェットにあるSNSフォローボタンでした。

Cocoonのプロフィール設定ではURL入力しかできず、ボタンサイズを管理画面から変更できません。
そのため、アイコンが小さくてモバイルで押しにくい状態になり、PageSpeed Insightsで“改善が必要”として検出されます。

URLを削除すると他の場所（サイドバーなど）のフォローボタンまで消えてしまうので、見た目を保ったままCSSでサイズ調整するのが安全です。

これはプロフィールのSNSフォローのアイコンです

Cocoonのプロフィールの設定では作りたいボタンのURLを入力することしかできません💧

それじゃいらないから消そうとSNSボタンのURLを削除したらサイドバーに設定した「SNSフォローボタンからも消えてしまいました・・・

✅解決：追加するCSSコード

外観 → 「追加CSS」に下記を貼るだけでOK。

■ 四角くして大きくするCSS

/* 四角で少し大きくする場合 */
.widget_author_box .sns-follow-buttons.sns-buttons a {
  width: 2.8rem;
  height: 2.8rem;
}
.widget_author_box .sns-follow-buttons.sns-buttons a span {
  font-size: 2.5rem;
}

■ 丸いボタンにするCSS

/* 丸くしたい場合 */
.widget_author_box .sns-follow-buttons.sns-buttons a {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50% !important;
}
.widget_author_box .sns-follow-buttons.sns-buttons a span {
  font-size: 2.5rem;
}

調整ポイント

width / height の 2.8 を大きくすればアイコンは大きく、小さくすれば小さくなります。お好みで調整してください。
border-radius: 50% で完全な丸になります。角丸の度合いを変えたいなら％を小さくしてください（例：12px 等）。
上のコードはアイコンがフォント（span）で表示される前提です。画像で表示される場合は img に対するスタイル調整が必要になることがあります。

✅手順（スクリーンショット参照不要でできる簡単手順）

WordPress 管理画面 → 「外観」→「カスタマイズ」→「追加CSS」または「外観」→「追加CSS」を開く。
既に入れているCSSの末尾に1行空けて、上記のコードを貼り付ける。
「公開」または「保存」をクリック。
PageSpeed Insightsやモバイル表示でアイコンの見た目とタップしやすさを確認する

ダッシュボードの外観の「追加CSS」を開いて

追加CSSの3までは前に入れていたので4を1行開けて5から貼り付けました

公開をクリック

大きくなりました

✅チェック結果（私のケース）

変更前：PageSpeed Insightsで「タップターゲットのサイズが適切に設定されていません」と表示。
変更後：該当項目が「タップターゲットのサイズは適切に設定されています」に変わりました！🎉

ただし、他の要素が原因で別箇所に別の改善指摘が出ることはあるので、引き続き一つずつ対応していく必要があります。

タップターゲットのサイズは適切に設定されていますになりました♪

✅注意点・トラブル対処

CSSで見た目を整えた結果、一部のプラグイン（例：SNS系のプラグイン）と干渉して動作が変になることがあります。もしボタンの表示がおかしくなったら、直近で導入したプラグインを疑って無効化してみてください。私の場合、ブックマークボタンが消えた原因はプラグイン設定でした。
変更後に効果が反映されない場合、キャッシュ（ブラウザ・WPキャッシュプラグイン）をクリアして再確認を。
アイコンが画像で出ているケースや、テーマカスタムでHTML構造が違う場合はセレクタ（.widget_author_box .sns-follow-buttons.sns-buttons a）が合わないことがあります。そのときはブラウザの検証ツールで正しい要素を探してください。