Simplicityを少し改造してみた 番外編 part6 post-metaのカテゴリー区切りを変更する

Google PageSpeed insightでは、スマホなどでリンクが近すぎる場合注意されます。
誤タップを防ぐためのものだと思いますがなかなかどうやって修正すべきか悩む所です。なんせ、区切り部分には何かしらのタグ(spanとかdivとか)が入っていないので、どうやってリンク同士を離すべきか考えてしまいます。

修正する場所は、entry-card.phpの以下の部分なのですが、これは親テーマの変更になるため必ずバックアップをとっておいて下さい。※ 親テーマアップデート時に消えてしまうので注意が必要です。

わかりやすいようにインデントとブロック自体を整形しています。post-metaの部分で、

を修正します。

このthe_category()は中に何かしら文字列があればそれで区切ってくれますが、何も入れずカッコだけで使用するとリスト表示になります。

リスト表示で取得して、そのリストをcssで整形するのも方法です。その場合は、親要素に<span class=”category”>とありますが、the_category()を何かしらのブロック(divやらspanやら)で囲んでおくと便利かも知れません。

今回は上記スクリプトのように、区切り部分に直接タグを挿入して、そのタグにクラスを付けCSSで編集するという手法をとっています。

.category_separateのcssは極単純に、

このようにしてみました。区切り線自体のスタイルなので注意して下さい。

こうすることで、調整は必要でしょうが、リンク同士のタップ位置が近すぎると言われることは無くなると思います。

the_category()でリストを取得した場合は、floatやflex-boxあるいはinline-blockなどでリストを横並びにしてボタンのようにスタイルすると良いかも知れません。今回のポイントとしては「タップ ターゲットのサイズを適切に調整する」を解消するわけですから、カテゴリのリンク同士をなるべく離したり大きくするようにデザインする必要があります。

「タップ ターゲットのサイズを適切に調整する」は、この部分だけではないかも知れませんが、変更しにくい部分かと思いましたので番外編として紹介しました。

スポンサーリンク

シェアする

フォローする