【WordPress】スマートフォン閲覧時にパンくずの記事タイトルを非表示にするcss
WordPress2018年1月8日
Web屋の芝生DIYでは、どんなデバイス環境やスクリーンサイズでもワンソースのhtmlで対応しているいわゆる「レスポンシブWebデザイン」で実装しています。基本的にはPCであれスマートフォンであれページを構成する要素は同じなのですが、先日記事ページのパンくずだけ、少しカスタマイズを加えました。
PCはこれまで通り「トップページ > マイホームブログ > 該当カテゴリ > 記事タイトル」と表示していますが、スマートフォン（正確にはスクリーンサイズ540px以下）での閲覧時は記事タイトルのみ非表示にしました。そこで本記事では、WordPressでスマートフォン閲覧時のみパンくずの記事タイトルのみを非表示にする方法をご紹介させていただきたいと思います。
なぜスマートフォン閲覧時のパンくずから記事タイトルを非表示にしたか
パンくずの役目は言わずもがな、以下の2点に集約されるかなと思います。
- SEO対策
- サイトにおける現在地の明示
当然このWeb屋の芝生DIYでもパンくずは上記の役目を担っていますが、スマートフォンでの閲覧時、パンくず内の記事タイトルとH1の記事タイトルは密接した位置にありました。現在地の明示という観点で検討した結果、スマートフォン閲覧時において、パンくず内に記事タイトルがなくても、現在見ているページが何の記事であるかは、パンくずのすぐ下にあるH1で十分事足りると考えました。
また、スマートフォンはPCに比べて当然画面のコンテンツ表示領域が狭いこともあり、パンくずの縦幅を減らすことでコンテンツ（H1以下）にユーザーが若干辿り着きやすくなります。PCでは記事タイトルを非表示にしようがしまいが1行の縦幅に収まりますが、スマートフォンではそうはいきません。
そこでスマートフォン閲覧時のみパンくずの記事タイトルを非表示にしファーストビューの縦幅を減らしつつ、記事タイトル以外の上位階層のパンくずは残すという形にカスタマイズすることにしました。
カスタマイズ内容
single.phpで記事タイトルのliのみにclassを付与
まずは記事ページのテンプレートであるsingle.phpのカスタマイズを行います。パンくず部分のマークアップを変更します。
カスタマイズ前
<div id="breadcrumb">
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/blog/">マイホームブログ</a></li>
<li><?php $category = get_the_category();if ($category[0]) {echo '<a href="'.get_category_link( $category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';}?></li>
<li><?php the_title(); ?></li>
</ul>
</div><!--/#breadcrumb"-->カスタマイズ後
<div id="breadcrumb">
<ul>
<li><a href="/">トップ</a></li>
<li><a href="/blog/">マイホームブログ</a></li>
<li><?php $category = get_the_category();if ($category[0]) {echo '<a href="'.get_category_link( $category[0]->term_id ).'">'.$category[0]->cat_name.'</a>';}?></li>
<li class="title"><?php the_title(); ?></li>
</ul>
</div><!--/#breadcrumb"-->記事タイトルのliに、「title」というclassを付与しました。
cssでパンくずの記事タイトルのみを非表示に
single.phpで付与したセレクタに対し、スマートフォン閲覧時（スクリーンサイズ540px以下）のみ表示となるよう、以下のcssを追加します。
@media screen and (max-width:540px){
#breadcrumb{
ul{
li.title{
display:none;
}
}
}
}- ※Web屋の芝生DIYの設計でブレイクポイントが元々540pxだったので、それに合わせて追加
- ※サイトに応じて適宜ブレイクポイントは変えてOKです
まとめ
何となく設置しているパンくずですが、スマートフォンでクリックされることは少ないのではないでしょうか。少なくともWeb屋の芝生DIYではGoogleアナリティクスでクリックイベントの計測結果を見ると、1000PVあたり1回クリックされるかどうかです。それくらいしかクリックされない要素でテキスト2行分もファーストビューでとってしまうと、ちょっともったいない気がしますよね。
かといって全部消すのも忍びないですし、逆にSEO上の評価が下がる可能性もあります。そこで、パンくずを設置するメリットを享受しつつもスマートフォンでのエリアを最小限にするべく、あくまでWeb屋の芝生DIYというサイトに限定しての話ですが、スマートフォン閲覧時のパンくずにおいて記事タイトルまでは必要ない、と判断して今回のカスタマイズを行いました。
サイトの設計における非常に細かい部分にはなりますが、ブログのレスポンシブWebデザインの考え方において、1つのケーススタディとしてご参考になれば幸いです。