2 flat logo on transparent 256
2018-06-22

Bootstrapでパンくずリストを設定する|コピペで動くサンプル付き

Nav03123120909

パンくずリストはSEO上でも非常に有効になります。 Bootstrapではパンくずリスト用のクラスも用意されていますので、今回はその設定を紹介します。

そもそもパンくずリストとは

パンくずリストは現在のページの階層を表示する設定になります。

イメージとしては以下のような感じです。

ゼロイチ-TOPへ▷初心者向け▷Bootstrap▷Bootstrapでパンくずリストを設定する|コピペで動くサンプル付き

パンくずリストのSEO効果

パンくずリストへ対策を行いたいキーワードをアンカーテキストとして設定する事によって、内部リンク対策で有効になります。

例えばプログラミング言語というキーワードを上位に設定したい場合はrubyの記事へ以下のようなパンくずリストを設定することによって、内部リンク対策となります。

なおSEOの効果があるからといって、パンくずリストを複数設定しても意味はありません。

ゼロイチ-TOPへ▷プログラミング言語▷ruby

■SEO系関連記事■

SEO対策の前に学ぼう!検索エンジンの歴史

初心者向けに解説|SEOの内部対策(内部リンク対策)とは?

初心者向けに解説|SEOの外部対策(外部リンク対策)とは?

パンくずリストのサンプルコード

<html>
<head>
    <meta charset="utf-8">
    <title>テストパンくずリスト</title>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/yeti/bootstrap.min.css" rel="stylesheet">
    <style>
        /*背景のCSS あまり関係ない*/
        .bk-color {
            background-color: bisque;
        }
    </style>
</head>

<body>
<ol class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">プログラミング言語</a></li>
    <li class="active">Ruby</li>
</ol>

<ol class="breadcrumb bk-color">
    <li><a href="#">Home</a></li>
    <li><a href="active">プログラミング言語</a></li>
    <li class="#">Python</li>
</ol>


</body>
</html>

サンプルコードの解説

クラス設定について

Bootstrapのcssである breadcrumb を設定すればBootstrapのパンくずリスト用のCSSが設定されます。 パンくずリストの中身はli要素で設定していますが、div要素でも問題ございません。

activeについて

CSSのactiveを設定すれば、背景の色が灰色になりますので、 記事の名称など、現在選択されている内容の名称を表示する場合に利用します。

以上になります。

その他関連記事

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

LocalStorageとBootstrapのモーダルを利用する

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

SEOは「キーワード選定」が超絶肝!知らないとマジでやばい「開封率の法則」とは!?

Bootstrapでコンテンツを強調する

前の記事
次の記事