WordPress

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

2019年7月26日

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

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

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

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

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

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

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

①クリックマークを押下

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

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

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

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

①外観>テーマエディタ

②style.cssを選択

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

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

修正後

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

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

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

\記事リクエスト募集中/


【お願い】
ワーカホリックダイアリーでは「社会人に役立つ仕事術、ライフハック情報」を毎日23時50分に発信しております。

社会人の方はぜひブックマークしていただき明日もお越しいただけたら嬉しいです。

[ブックマーク手順]
iPhone Safariの方:
 下部の[↑](共有ボタン) > [ホーム画面に追加]もしくは[ブックマーク追加]

Android Chromeの方:
 右上の [︙](縦3点リーダー) > [ホーム画面に追加] もしくは[☆タップ]

パソコンの方:
 キーボードの[Ctrl]+[D] もしくは 右上の[☆クリック]

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

-WordPress
-, ,

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