スティンガー8

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

 

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

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

 

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

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

 

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

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

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

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

 

 

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

 

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

 

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

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

 

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

 

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

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

 

 

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

 

 

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

 

 

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

 

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

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

 

 

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

 

 

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

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

 

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

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

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

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

 

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

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

 

 

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

 

 

アイコンを表示すると先ほどよりもしっかりとしたパンくずリストになりました。

アイコンの種類や色などは自由に変更できますので、必要に応じて編集しながら活用していきましょう。

 

「パンくずリスト」まとめ

ワードプレスではプラグインを使ってパンくずリストを簡単に導入することも可能ですが、もともとテンプレートにパンくずリストが入っていることが多いので、わざわざプラグインを導入する必要もありません。

 

むやみにプラグインを導入しすぎてしまうと、不都合が起きてしまう原因にもなりかねないことと、ワードプレスのサーバーにも負担がかかってしまいます。

できる限りCSSなどを活用してカスタマイズすることで負担を軽減し、ブログやサイトの軽量化を行ってコストパフォーマンスを向上させていきましょう。

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール