パンくずリストをデザイン！STINGER8でわかりやすく表示させる方法

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

「パンくずリスト」とは、webサイトのどこのページにいるのかをわかりやすく表示してくれるナビゲーション機能です。

今やワードプレス(WordPress)のテンプレートにも、パンくずリストが初期から実装されているほどの必要不可欠なものです。

ブログやサイトの内部SEOや検索エンジンにも影響を与えるので、パンくずリストを意識した運営を行うことも必要になってきます。

STINGER8でも初期実装されていますが、デフォルトの状態のままだとパンくずリストがあることに気がつかないユーザーもいるかもしれません。

なのでパンくずリストをデザインして、現状よりもわかりやすく表示させていきたいと思います。

初期状態のパンくずリスト

STINGER8で導入済みのパンくずリストは、以下のようなデザインとなっています。

テキストリンクと「>」の部分の色合いがかなり薄いので、もう少しはっきりと確認できるようにカスタマイズしていきます。

カスタマイズにはSTINGER8の子テーマ「スタイルシート(style.css)」を使いますので、親テーマしかダウンロードされていない方は、「STINGER公式ページ」から子テーマをダウンロードしておきましょう。

STINGER8の「パンくずリスト」をデザイン

パンくずリストのデザインをカスタマイズするにあたって、CSSコードを編集していきますので万が一不都合が発生した場合にすぐ対処できるよう、ファイルのバックアップなどを取っておく方がいいかと思います。

また、CSSの編集内容が反映されない時はキャッシュの削除を試してから、改めて設定の更新と確認をするようにしましょう。

style.cssでデザインをカスタマイズ

まず初めにワードプレスの管理画面から、「外観」⇒『テーマの編集』をクリックします。

「STINGER8 Child: スタイルシート (style.css)」に以下のコードを追記します。

/*-- パンくずリスト --*/
#breadcrumb ol {
    padding:0px 0px 2px;/*周りの余白*/
}

#breadcrumb ol li {
    color: #000000;/*記号の色*/
    font-size: 15px;/*記号のサイズ*/
    display: inline-block;/*横並びに均等配置*/
}

#breadcrumb ol li a {
    font-weight: bold;/*文字を太字に*/
    text-decoration: none;/*下線なし*/
    color: #fff;/*文字色*/
    font-size: 14px;/*文字サイズ*/
    background: #00bfff;/*背景色*/
    padding: 0px 5px 0px;/*ボックス内の余白*/
    padding-right: 0px;/*ボックス内右側の余白*/
    border-radius: 5px;/*角の丸み*/
    margin-right: 1px;/*ボックス右側の間隔*/
    margin-left: -5px;/*ボックス左側の間隔*/
}

#breadcrumb ol li:first-child a {
    padding: 0px 5px 0px 5px;/*1列目ボックス内の余白*/
    margin-right: -4px;/*1列目ボックス右側の間隔*/
}

上記コードに記載している文字色や背景色の部分を変更することで、簡単にアレンジできますので試してみて下さい。

するとこのようにはっきりとパンくずリストが認識できるようになります。

カーソルホバーで色を変化

パンくずリストにカーソルが乗った時に、色が変化するように設定したい場合は以下のコードを追記して下さい。

#breadcrumb ol li a:hover {
    color: #fff;/*ホバー時の文字色*/
    background-color: #0000ff;/*ホバー時の背景色*/
}

カーソルがホバーした際に色が濃くなるように設定しています。

この辺はお好みで各ブログやサイトの最適な色に調整してお使い下さい。

これでパンくずリストの基本的なデザインは完了となりますが、アイコンマークも追加したいという方も多いかと思いましたので、アイコンの挿入方法をご紹介しておきます。

パンくずリスト内にアイコンを挿入する方法

アイコンマークに使用する画像は「Font Awesome」内にあるものになります。

Font Awesomeは、幅広く使用できるアイコンが揃っているサイトなので非常に便利です。

英字と数字が書かれた画像コードをCSS編集時に使用します。

アイコンをリスト別に設定

パンくずリストの「HOME」や「カテゴリ」に使用するアイコンを、Font Awesomeでそれぞれ選んだら以下のCSSコードに画像コードを追加して下さい。

#breadcrumb ol li:first-child a:before{/*1列目のアイコン*/
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f015";/*アイコンコード*/
    color: #fff;/*アイコン色*/
    font-weight: normal;/*アイコンの太さ*/
    font-size: 1.1em;/*アイコンサイズ*/
    margin-right: 2px;/*文字との間隔*/
}

#breadcrumb ol li a:before{/*2列目以降のアイコン*/
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f07c";/*アイコンコード*/
    color: #fff;/*アイコン色*/
    font-weight: normal;/*アイコンの太さ*/
    font-size: 1.0em;/*アイコンサイズ*/
    margin-right: -3px;/*文字との間隔*/
}

上記のアイコンコード「f015」や「f07c」のところに、追加したいコードを入力して使用します。