ヘッダーメニューやページタイトルを英語表記にしていても、パンくずリストは日本語にしたい。
そんなケースに対応するため、ページごとにパンくず末尾のテキストだけを差し替える方法を実装しました。
今回やりたかったこと
サイト全体のデザイン上、ページタイトルは英語で統一したい一方、パンくずは訪問者にとってわかりやすい日本語にしたいという要望がありました。
基本の実装方法
各ページの末尾テキストを font-size: 0 で一度消し、::after で日本語を出しています。
実際のCSS例
.page-id-101 .p-breadcrumb__item:last-childspan{
font-size:0;
}
.page-id-101 .p-breadcrumb__item:last-childspan::after{
content:”会社概要”;
font-size:11px;
}
同じ考え方で、事業内容・施工事例・私たちの取り組み・お知らせ・お問い合わせ・採用情報・プライバシーポリシーまで個別対応できます。
ページ別に設定した表記例
- 会社概要
- 事業内容
- 施工事例
- お知らせ
- お問い合わせ
まとめ
「英語で見せたい部分」と「日本語の方が親切な部分」を分けて設計できるのが、この方法の強みです。
コーポレートサイトでも使いやすい調整です。
