THE THOR（ザ・トール） パンくずリストの解説とカスタマイズまとめ【WordPress】

「パンくずリスト？なにそれおいしいの？」という方。

もしくは

「THE THOR（ザ・トール）のパンくずリストのカスタマイズ方法が知りたい！」

という方へ

この記事では以下のことについて解説します

• パンくずリストとは何か？　意味はあるのか
• THE THORのパンくずリストのカスタマイズ方法

（飯テロ注意）

パンくずリストの解説

（このとってもおいしそうなメロンパンとは何の関係もありません）

パンくずリスト（Breadcrumb）とは、記事の上部または下部に設置し、記事の階層構造を表現する内部リンクたちのことです。

具体的に言うと、この記事のパンくずリストはこれですね

たいていはこのようにトップページからカテゴリ階層順に内部リンクを並べたもののことをパンくずリストと言います。

パンくずリストの重要性

パンくずリストを設置する大きなメリットは二つあります。

• SEO対策に効果がある
• サイト回遊率upが見込める

SEO対策に効果がある

パンくずリストは階層構造を示す内部リンクなので、適切な階層構造に設定してあれば検索エンジンはサイトの構造を素早く判断できるので、検索順位決定において評価が上がります。

Google公式の検索エンジン最適化（SEO）スターター ガイドでも、パンくずリストの設置は推奨されているので絶対設置するべきだということがわかります（Google以外は関係ないかもね）

サイト回遊率upが見込める

パンくずリストはサイトの階層構造を示した内部リンクなので、設置すれば記事を読んで関連記事が知りたくなった読者様がパンくずリストがをたどって上の階層を訪れてくれる可能性が上がります。

実際に私がブログを始める前は結構パンくずリストをクリックしていましたので効果があることは絶対ですね！（あると意外とわかりやすいですよね）

THE THORのパンくずリストのカスタマイズ方法まとめ

THE THORでパンくずリストは標準で設定されている

他のWordPressのテーマではパンくずリストが設定されておらず、プラグインから導入する必要があることが多いですが、

さすがはSEO最強、我らのTHE THORは違います。標準でSEO対策は完璧なのでパンくずリストは当然のごとく導入済みです。トップページ以外のすべてのページにパンくずリストが設定済みです

パンくずリストの表示方法のカスタマイズ

背景色・文字色・文字サイズの変更

カスタマイズの追加CSSに以下のコードを追加します。（もちろん色や値はお好みで調整してください）

/**パンくずリスト**/
.breadcrumb{
	background-color: white;  /*背景色を白色*/
        
}
.breadcrumb__item {
        font-size: 10px;  /*文字サイズを10ピクセル*/
        color: black;     /*文字色を黒色*/ 
}

CSSを使ったカスタマイズはこちらの記事で詳しく解説しています。参考にどうぞ

関連記事

CSSをスマホにだけ適応させて文字サイズ・行間を修正する方法

THE THOR（ザ・トール）で書いた記事がテーマのカスタマイズだけだと、スマホで読みにくいと感じたので直す方法を解説します。 他のブログと比較すると、THE THORの記事がスマホで読みにくい原因は、 文字が大きい […]

【WordPress上級者向け】パンくずリストの設定ファイル

パンくずリストの設定が書かれたphpファイルはテーマエディターでは inc/front/breadcrumb.php にあります。魔改造をしたい方はここを変更すればできそうです。（私はいじろうとしましたが、うまくできませんでした…）

まとめ

パンくずリストは食べ物ではないですが、

ブログでは絶対設定しておくべき項目のひとつです。

が、

THE THORは標準でパンくずリストが設置してあるので、特に何もしなくて大丈夫！！

そしてカスタマイズをしたい場合は、文字サイズや色をCSSを使って簡単に変更できます