初心者ブロガーのフリーマンです。未経験から始めたワードプレスやSTINGER8などの使い方からカスタマイズ方法、アフィリエイト関連の内容を中心に、雑記にわたって気になることを楽しく発信するブログです。

スティンガー8

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

  2017/08/27  2017/11/06

 

どうも、「きにぶろぐ.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などを活用してカスタマイズすることで負担を軽減し、ブログやサイトの軽量化を行ってコストパフォーマンスを向上させていきましょう。

スポンサーリンク







この記事が気に入ったら
いいね!して頂けると喜びます

気になる最新情報をお届けします

フォロー・シェアする
最新情報を受け取る

-スティンガー8

Related article -関連記事-
この記事を書いた人
フリーマン
フリーマン
1988年生まれで現在は滋賀県に在住しています。このブログは2017年8月から本格的にスタート。ブログ運営に関する内容を中心に興味のある情報を書いています。
New article -新着記事-

  1. […]  きにぶろぐ.com  2 shares 1 userパンくずリストをデザイン!STINGER8でわかりやすく表示させる方法http://kiniblog.com/breadcrumb-design-stinger8/ […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサーリンク

管理人のフリーマンです。
29歳で現在は滋賀県に在住しています。
ブログ運営に関する内容を中心に興味のある情報を書いています。
役立つ記事があれば参考にして下さい。