賢威7のパンくずリストでは、PC表示ではパンくずリストの最後に記事タイトルが入りスマホ表示ではパンくずリストの最後に記事タイトルが入りません

これはスマホ表示の際は、パンくずリストの次に記事タイトルが続き、「パンくずリストの最後に入る記事名」と「記事のタイトル」との同じ文言が重複して続くため、スマホ表示のみCSS(スタイルシート)で非表示になっています。

PC表示でもデザインによっては、スマホ表示と同様に記事名が続いて表示され、見づらい場合がありますので、PC表示でもパンくずリストの最後に表示される記事名を非表示にする方法をご紹介します。

PC表示もCSSで非表示にしてあげるだけ!

賢威7のCSS構造は「base.css」がPC表示を含むレイアウト管理のCSSファイルとなっており、「rwd.css」がスマホ用のレイアウト管理をするCSSファイルとなっています。

そのため、今回は既にスマホ表示では、パンくずリストの最後の記事名が非表示となっているので、PC表示用の「base.css」のみ修正をすればOKです。

CSSに追記する内容

当サイトでは賢威の子テーマで運用しているため、子テーマフォルダの「base.css」を以下のように追記します。

/*--------------------------------------------------------
パンくずリスト
--------------------------------------------------------*/
.breadcrumbs-in{
margin-bottom: 0.5em;
}
.breadcrumbs-in li:last-child{
display: none;
}

これで、PC表示用もパンくずリストの最後にあった記事名が非表示になり、

.breadcrumbs-in{
margin-bottom: 0.5em;
}

の部分によって、パンくずリストの下の余白が詰まります。