【WordPress】【JIN】パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、パンくずリストの設定方法と「HOME」をブログ名に変えるCSSカスタマイズをご紹介します。

デフォルト（初期設定）では、パンくずリストの最左端は「 HOME」となっていますが、これを「広瀬ユキBlog」といったように、ブログ名に変えることができます。ブログ名以外にも、CSSにコードを追加することでお好みの表記に変えることができます。

Before
After

WordPress有料テーマ【JIN】を使っている方向けの記事です。

パンくずリストって何？
パンくずリストの設定方法
パンくずリストの「HOME」をブログ名に変えるCSSカスタマイズ
- コード
- 説明
編集後記

パンくずリストって何？

パンくずリストとは、現在開いているページのリンクまでを階層順に表示する機能のことです。

WordPress有料テーマ【JIN】では、メインコンテンツの最下部、フッターの上部に表示されています。

「パンくずリスト」は英語でbreadcrumb listブレッドクランブリストと表記し、bredcrumbが「パンくず」と言う意味です。日本語でパンくずリストと言われると、ちょっと想像しずらいですね😂

ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
引用元：https://ja.wikipedia.org/wiki/パンくずリスト

パンくずリストの設定方法

まず、パンくずリストの表示・非表示の設定方法をご紹介します。

WordPressの編集画面から、「外観」→「カスタマイズ」を開きます
画面左の「その他設定」を開きます
「パンくずリストの表示」の表示にチェックを入れます
画面上部の「公開」を押します

パンくずリストの設定ができました‼

パンくずリストが表示されていることを確認してください。この設定は、パソコンでもスマホでもパンくずリストが表示されるようになります。

パンくずリストの「HOME」をブログ名に変えるCSSカスタマイズ

では、CSSにコードを追加して、パンくずリストの「HOME」をカスタマイズしてみましょう。

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

CSSにコードを追加する方法はコチラ↓

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*---パンくずリストの「HOME」---*/
#breadcrumb ul li a span[itemprop="name"] {
display:none;/*非表示*/
}
#breadcrumb ul li a .jic::after {
font-family: sans-serif;/*フォント*/
content: ' HOME';/*表記*/
}
/*---パンくずリストの「HOME」---*/

/*　*/　で囲ってある部分はメモ書きなので、削除してもOKです。
【メモ書きなしver.】

#breadcrumb ul li a span[itemprop="name"] {
display:none;
}
#breadcrumb ul li a .jic::after {
font-family: sans-serif;
content: ' HOME';
}

説明

#breadcrumb ul li a span[itemprop=”name”]

display:none;

非表示
デフォルト（初期設定）の「HOME」を非表示にします。

#breadcrumb ul li a .jic::after

font-family	フォント JINの標準設定のフォントにします。※自由に変えてOKです。
content	内容 ‘　’の中に表記したい文字を入力します。文字の前に半角スペースを入れると、デフォルト（初期設定）と同じ状態になります。

contentにはブログ名以外にも、カタカナで「ホーム」や「TOP」など自由に入力してみて下さい。

パンくずリストの「HOME」をブログ名に変えることができました‼