SWELL│パンくずを記事名まで表示させるカスタマイズ

swell-breadcrumb-add-article-name

実はSWELLのパンくずには記事名があえて非表示にされてます。

パンくずはブログにおいての住所に当たるものなので、記事名まで表示させたいという意見がたまにあがります。

それこ本記事ではSWELLのパンくずを記事名まで表示させるカスタマイズを紹介します。

目次

SWELLのパンくずを記事名まで表示させるカスタマイズ

SWELLのパンくずを記事名まで表示させるカスタマイズは簡単です。

下記のCSSを追加するだけです。

WordPressの管理画面 > 外観 > テーマファイルエディター > style.cssを開いて、下記のコードを挿入しましょう。

.p-breadcrumb__list {
    flex-wrap: wrap; //記事名が長い場合は折り返す
}
.p-breadcrumb__text {
    display: block!important; //記事名の表示
}
.p-breadcrumb__item:last-child span {
    opacity: 1; //記事名を半透明にしない
}

まとめ

本記事ではSWELLのパンくずを記事名まで表示させるカスタマイズを紹介しました。

before
after

小さなカスタマイズですがブログ記事の階層が分かりやすい表示になりますので、ぜひ試してみてください。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる