デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

投稿日:2018年8月24日 更新日:

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。
デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています

今回はいつものstyle.css、single.phpのほかにindex.php、page.php、archive.phpも手を加えます。

コピペで使えますが、子テーマ内のファイルをカスタマイズしましょう。

「HOME」をカスタマイズ

検索エンジンはパンくずリスト上「HOME」はサイトトップと認識してくれます。
なので、視覚上「HOME」でも支障はないのですが、少しでもサイト名を認識してほしいなぁと思いまして「HOME」をサイト名に変更しました。
ホームアイコンも追加しているので、誤認することもないと思います。

single.php、index.php、page.phpを編集

< ! -- ぱんくず -- >の4行下あたりに

[crayon-5e2760387092f752509140/]

があるので、以下に差し替え。
「デジモノ大好き+」は適宜変更ください。
「HOME」のままでも問題ありません。

[crayon-5e27603870935350976758/]

archive.phpはさらに編集

archive.phpは上記内容のほかに以下の箇所も変更が必要になります

[crayon-5e27603870936886288820/]

を以下に変更。

[crayon-5e27603870938953256629/]

style.cssを編集

  • フォントの調整
  • アイコンの追加
  • hoverの追加

差分は以下のようになります。

[crayon-5e27603870939221136593/]

まとめ

これで、記事ページ、固定ページ、カテゴリー一覧、タグ一覧のパンくずリストが変更できました。
デフォルトだと文字色が薄かったので、記事タイトル上のスペースが妙に広かったように感じましたが、だいぶ締まって見えます。

自分はよくパンくずリストを使うので、視認しやすいパンくずリストを目指してみました。

スポンサーリンク

-WordPress
-, , , ,

関連記事

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

AmazonJSの画像が表示されないときの回復方法 [WordPress]

AmazonJSはAmazonアソシエイトのリンクを張るときに投稿画面から商品検索ができ、しかもショートコードで貼り付けてくれて、さらに格好良く表示してくれるプラグインなので、ちょーおススメなプラグイ …

Stinger8のページトップボタンを目立たせてみた。 [WordPress]

主張が強すぎるのもなんですが、あまりにも目立ってないので手を加えてみました。 ↑右端にあるこれね。 (わかりずらいので、囲ってみました。) style.cssを変更 差分はこんな感じです。 [cray …

Stinger8ページナビ「PREV」「NEXT」をカスタマイズしてみた。 [WordPress]

関連記事直下にある「PREV」「NEXT」を削除や非表示してるところもあるけど、サイト内リンクを削除してしまうのはもったいない。 せっかくなので、触ってもらえるようにカスタマイズしてみました。 今回手 …

ソネブロからワードプレスへ。

So-netで「デジモノ大好き」をやっていましたが、ワードプレスで再出発です。 何かと話題のSTINGER。 アフィリエイター向けの無料テーマとして有名ですが、さらにアフィリエイトに特化したAFFIN …