WordPress

【WordPress】カテゴリー、アーカイブ一覧の上下方向の余白・マージンの取り方(Affinger、Stinger)

リンクが近すぎてモバイルフレンドリーにならない問題

本サイトをモバイル端末で閲覧した場合、カテゴリーやアーカイブ一覧の上下方向の余白、隙間が少ないため、ユーザビリティが損なわれていました。

それが原因が分かりませんが、サーチコンソール上で本サイトのインデックス状況を見ているとモバイルフレンドリーになりません。

今回はこちらの直し方を備忘録もかねてまとめます。

影響を与えているstyleを特定する

まず、パソコンでChromeで余白の状態を確認したい対象ページを開き、「F12」でデベロッパー・ツールモードにします。

次の手順でstyle指定をしている箇所を特定します。

①クリックマークを押下

②余白設定をみたい箇所をクリック

③右側のStyles上で影響を与えているmarginを特定。

【Affingerの場合】子テーマのstyle.cssを修正する

WordPressのダッシュボードを開きます。

①外観>テーマエディタ

②style.cssを選択

③先ほど目盛ったclassのmarginを指定。(今回は10pxと指定。)

#side aside ul li {
margin: 10px;
}

修正後

無事に上下方向の余白が取れました。

上記のようにサイトのカスタマイズをしたい方は、紹介した手順を参照ください。

以上、ワーカホリックダイアリーでした。

---- 当サイトのPRをさせてください ----

当サイトは「社会人に役立つ仕事術、生活術、スキルアップ術」を発信しております。また来ていただけたらたいへん嬉しいです。

ぜひブックマークをお願いします。

iPhoneの方:
ブラウザ下部の[↑]ボタン > [ホーム画面に追加]もしくは[ブックマーク追加]

Androidの方:
ブラウザ右上の [︙]ボタン > [ホーム画面に追加(アプリをインストール)] もしくは[☆タップ]

PCの方:
ブラウザ 右上の[☆]ボタン、もしくはキーボード[Ctrl]+[D]

またのお越しをお待ちしております。

\面白かったらシェアお願いします/
記事タイトルとURLをコピー

-WordPress
-, ,

Copyright© ワーカホリックダイアリー , 2022 All Rights Reserved.