当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

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

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

≫お問い合わせはこちら

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

アイキャッチ画像
みきてぃ東西線

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

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

パンくずリストとは?

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

パンくずリスト
パンくずリストの例。

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

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

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

  • 閲覧者がどのページを見ているか、パッと分かる
  • 検索エンジン・SEO対策に効果がある

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

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

検索エンジン・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つである観賞魚などの記事を書いています。

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

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました