パンくずリストとは？書き方を解説

ブログやWebサイトを閲覧する時、よく目にするのが「パンくずリスト」。サイト内で「今、どこのページを閲覧しているのか」を一目で把握することができます。

そこで、今回は「パンくずリストの書き方」を解説していきます。

パンくずリストとは？

パンくずリストとは、サイトのページ内位置をツリー構造として持ったリンクの一覧のことを指します。

パンくずリストは、基本的にはページ内の上部に設置されていることが多いです。

パンくずリストを設置するメリット

パンくずリストを設置するメリットとしては、以下の通りです。

閲覧者がどのページを見ているか、パッと分かる

サイトを見ているユーザーが、今どこのページを見ているか一目で分かりやすくなります。

検索エンジン・SEO対策に効果がある

検索エンジン側のクローラーによる巡回も反応しやすくなり、またパンくずリストは内部リンクが集まりやすくなるので、SEO対策にも一定の効果が見込まれます。

パンくずリストの書き方

パンくずリストは、以下のように書きます。

HTML

1<ul class="breadcrumb">
2<li><a href="#">ホーム</a></li>
3<li><a href="#">ハイキング</a></li>
4<li><a href="#">「青春18きっぷ」でハイキング</a></li>
5</ul>

CSS

1.breadcrumb {
2    padding-left:0;
3    margin-left:0;
4}
5.breadcrumb li{
6    display:inline;
7    list-style:none;
8    font-weight:bold;
9}
10.breadcrumb li:after {
11    content: '>';
12    padding: 0 3px;
13    color:#000;
14}
15.breadcrumb li:last-child:after {
16    content: '';
17}
18.breadcrumb li a{
19    text-decoration:none;
20    color:#000;
21}
22.breadcrumb li a:hover{
23    text-decoration:underline;
24}

divタグで囲んでパンくずリストをデザインすることもできますが、この方法ではulタグでパンくずリストをデザインしています。

実際にブラウザで表示すると以下のように表示されます。

WordPressでパンくずリストを設置する場合

WordPressでは、デフォルトではパンくずリストはありません。

したがって、WordPressでパンくずリスト設置したい場合は、以下の方法で設置する必要があります。

みきてぃ

プラグインを使う場合は、「Breadcrumb NavXT」がオススメだよ！

まとめ

というわけで、今回は「パンくずリストの書き方」を解説していきました。

パンくずリストを設置すると、ユーザー側や検索エンジンにおいてもメリットにつながります。

検索エンジンに認識され、ユーザー側においても一目で分かりやすいパンくずリストをデザインしておくことをオススメします。

この記事を書いた人

みきてぃ

みきてぃ

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら