Drupal 8でパンくずリストの表示形式の変更方法(CSSのみで対応)

--広告--

ポイント

Drupal 8 のパンくずリストの表示方法変更方法です。

今回はCSSのみでの対応方法を説明します。

閲覧数 193 回

Drupal 8 のパンくずリストの表示形式の変更方法を説明します。

デフォルトでは、Drupal 8 のパンくずリストは下記のように表示されます。

breadcrumb_step1

<ol>と<li>タグに囲まれているので、「1.」「2.」と順序付きのリストで表示されます。

今回はこちらを変更し、下記のような一般的なパンくずリストの「>」でつなぐように変更します。

breadcrumb_step2

現状のパンくずリストのソースを確認すると、下記のようなソースになっています。

<nav aria-labelledby="system-breadcrumb" class="breadcrumb" role="navigation">
<h2 class="visually-hidden" id="system-breadcrumb"><code><code>パンくず</code></code></h2>
    <li><code><code><a href="/demo/">ホーム</a> </code></code></li>
    <li><code><code><a href="/demo/niyusu/7">path auto モジュールインストール</a> </code></code></li>
</ol>
</nav>

こちらより、パンクズリストで使用している「ol」と「li」のスタイルを変更します。

cssに下記追加します。

.breadcrumb ol li {
        display: inline;
        list-style-type: none;
}
.breadcrumb ol li:before {
        content: " > ";
}
.breadcrumb ol li:first-child:before {
        content:"";
}

cssを解説しますと、

.breadcrumb ol li {
        display: inline;
        list-style-type: none;
}

こちらで横並びにし、装飾を非表示にしています。

.breadcrumb ol li:before {
        content: " > ";
}

こちらで「li」の前に「>」を表示させるようにしています。

また、こちらだけだと先頭に「>」が入ってしまうので

.breadcrumb ol li:first-child:before {
        content:"";
}

こちらを追加することにより、先頭の「>」が表示されないようにしています。

以上で下記のような表示方法に変わります。

breadcrumb_step2

 

以上で完成です。

Drupal 7までは、Custom Breadcrumbsという便利なモジュールが利用できたのですが、まだDrupal8には対応していないようなので

対応するまではこのようにCSSやテンプレートで対応する必要がありそうです。

カテゴリ

関連タグ

--広告--

同じカテゴリのコンテンツ

Drushを利用してDrupalのマイナーバージョンアップする方法を説明し…

ここではDrupal.org からテーマをインストールして利用する方法を説…

ここでは管理画面でテーマを変更する方法を説明します。

Dr…

ここではDrupal 管理画面より、

コンテンツを投稿する…

コンテンツタイプの追加方法を説明します。

フィールドの追加…