ここあです。
私たちが普段何気なく使っているWordPressテーマや
ネットサーフィンして見ているWebサイトには
必ずと言っていいほど「パンくずリスト」が存在します。
そもそも「パンくずリスト」とは何かと言うと…
あなたが今見ているページがWebサイト全体のどの階層で、
どの位置にあるのかが一目でわかるように表示されているリンクのこと。
THE THORで言うなら以下の部分がパンくずリスト。
この「パンくずリスト」の主な役目としては
- ネットユーザーの回遊率を高める
- 検索エンジンのクローラー巡回を手助けする
このように、１つはサイト訪問者のナビゲーターとして、
もう１つはGoogleのSEO対策として効果を発揮します。
特に「パンくずリスト」はGoogleが公式に発表している
「検索エンジン最適化（SEO）スターター ガイド」の中でも
実装が推奨されているため
1.1.1 「パンくずリスト」を使用する
パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。訪問者はパンくずリストを使って、前のセクションやルートページにすばやく戻ることができます。ほとんどのパンくずリストでは、最初の左端のリンクとして最も一般的なページ（通常はルートページ）を置き、右側に向けてより具体的なセクションを並べています。パンくずリストを表示する場合は、パンくずリストの構造化データ マークアップを使用することをおすすめします。
参考：Google「検索エンジン最適化（SEO）スターター ガイド」より
現在は、ほとんどのサイトやワードプレステーマにも
しっかりと「パンくずリスト」が実装されています。
とは言え、今回は「パンくずリスト」の重要性を
お伝えするための記事ではありません＾＾；
ただ、私が前置きとして書かせていただいたのには訳があり
今の時代は、Webサイト制作に関する知識がなくても
WordPressさえ使えば誰でも簡単に自分のサイトやブログを
立ち上げることができてしまいます。
だからこそ、Webサイトに関する基礎知識だけでも
あなたに知っておいて欲しいと思い、お伝えさせていただきました。
ある意味「パンくずリスト」という言葉を
知っている知っていないだけでも全然違いますからね…＾＾
ということで、今回は
そんな「パンくずリスト」のカスタマイズ方法について
解説させていただきますので
もう少し、サイト全体のイメージと「パンくずリスト」を
マッチさせたいというあなたは、ぜひ参考にしてみてください。
THE THORのカスタマイズはCSSで
基本的に「パンくずリスト」のカスタマイズはCSSで行います。
なので、まずはCSSコードの記述先について先に解説致しますね。
CSSコードの記述先は２箇所ありますが、私のおすすめは
プレビューを見ながら調整ができる「追加CSS」の部分です。
ということで、カスタマイズ用のCSSコードを記述する場合は
ダッシュボードメニューから外観 → カスタマイズをクリックし
さらに「追加CSS」をクリックして
以下の部分に記述するようにしてくださいね。
WordPressテーマは基本的にどのテーマも
ダッシュボードメニューから外観 → カスタマイズ→追加CSSへと
辿ることができますので、覚えておくと便利です。
なお、CSSコードはいつでも書き足したり
削除することができますし、最悪、削除すれば元に戻せますので
あまり神経質にならず気軽にカスタマイズしてみてください。
THE THORのパンくずリストをカスタマイズする方法
THE THORのパンくずリストをカスタマイズする方法とは言っても
あまりやることはありませんが（笑）
デザインにおいて微調整というのは、かなり重要。
正直、この調整いかんで、プロと素人との差が分かれるのです。
ということで、少しでも
「素人臭い如何わしいサイトイメージから脱したい」というあなたは
細かい部分にもこだわって調整していきましょう。
パンくずリストの背景色を変える方法
それではまず「パンくずリスト」の背景色を変える方法です。
THE THORのパンくずリストは通常、
このように背景色がグレーになっています。
THE THORは基本設定でサイト全体の背景色を変えることができても
パンくずリストの背景色は設定できず
パンくずリストの部分だけがグレーで残ってしまいます。
ということで「グレーは嫌！」というわがままなあなた（笑）
パンくずリストの背景色をCSSで変更しましょう。
とりあえず、以下のCSSコードをコピペすれば
パンくずリストの背景色は「白」になります。
- 追加CSSにコピペ
- .breadcrumb {
padding: 10px 0;
background: #fff;
}
パンくずリストの背景色を変える場合は
以下のコードでご調整ください。
#fffの部分をあなたの好きなカラーコードに変更すれば
パンくずリストの背景色が変更できます。
パンくずリストの文字色を変える方法
パンくずリストの背景色を変更すると同時に
パンくずリストの文字色を変更したいという場合が
出てくると思います。
例えば、背景色を真っ黒にした場合、
パンくずリストの文字が同じ黒では、読めなくなってしまいます。
ということで、パンくずリストの文字色を変更する場合は
以下のCSSコードをコピペしましょう。
- 追加CSSにコピペ
- .breadcrumb__item {
font-size: 1.2rem;
line-height: 1.75;
color: #000;
}
パンくずリストの文字色を変更する場合は
以下のコードでご調整ください。
#000の部分をあなたの好きなカラーコードに変更すれば
パンくずリストの文字色が変更できます。
パンくずリストの文字サイズを変える方法
これは完全に私の主観ですが、THE THORのパンくずリストは
心持ちフォントサイズが大きいような気がします。
というのも、パンくずリストが長くなると
このように、パンくずリストとグローバルメニューが
ごっちゃになって分かりにくいと思うからです。
だから、個人的にはもう少し小さくする方が
パンくずリストとして認識されやすいと感じています。
ということで、パンくずリストのフォントサイズを小さくしたい場合は
先にコピーしたコードの中にある
font-size: 1.2rem;
line-height: 1.75;
color: #000;
}
font-size: 1.2rem;の部分の数字を、例えば「1rem」などに変更しましょう。
そうするとグローバルメニューと、
多少はフォントサイズの差が出せますので
グローバルメニューとパンくずリストの区別が付きやすくなります。
パンくずリストの境界線を無くしたい
最後に、パンくずリストの境界線を無くす方法です。
通常は少し分かりにくいかもしれませんが、
サイト全体の背景色をパンくずリストの背景色と同じにすると
このように境界線が表示されます。
なぜかと言うと、元々THE THORのデフォルトで
境界線が設定されているからです。
なので、例えば、白で統一するなど…
サイト全体の背景色とパンくずリストの背景色を同じにする場合は
境界線もない方がスッキリして見えます。
ということで、境界線を消す場合は、以下のコードをコピペしてください。
- 追加CSSにコピペ
- .breadcrumb {
border-bottom: none;
}
境界線を消す方法としては元々設定されている境界線の色を
あなたが設定する背景色に上書きするという方法もありますが
やはり、一番手っ取り早いのは、
境界線そのものを消してしまうという方法です。
なので、上記コードは境界線そのものを
消去してしまうというコードになります。
とは言え、このコード自体を消去すれば
境界線は復活しますので、あなたの必要に応じて
コピペするなり、消去するなりしてくださいね。
THE THORのパンくずリストをカスタマイズする方法まとめ
今回はTHE THORのパンくずリストを
カスタマイズする方法について解説させていただきました。
とは言え、なかなかパンくずリストの背景色まで
カスタマイズしようと考える方は少ないかもしれません。
ですが、最近はTHE THORの利用ユーザーも
かなり増えてきていますし
他のサイトと差別化するため
「良い感じにカスタマイズしたい」という方も
今後はさらに増えてくると思います。
なので、記事にしろ、デザインにしろ
しっかりとこだわって作り込んでいきたいものです。
私は、デザイナーとして、サイトデザインにこだわり
記事の編集に関してもかなりこだわって書いてますが、
その理由は決して自己満足のためなんかではありません。
あくまでも読者のため、自分のサイトを訪れてくれる
ネットユーザーに喜んでもらうためにこうして
うっとおしいぐらい細部まで気を配り、記事を書いています。
なぜなら、いくら記事を書いても
ネットユーザーに伝わらなければ意味がないし
記事の中身を端折るのは誰でも簡単にできるからです。
なので、私はそういう意味でデザインだけではなく
記事の一つひとつにこだわることで、
他のサイトとの「差別化」というのを目指しています。
だから、ぜひあなたも自分のためではなく
ネットユーザーのことを第一に考え、分かりやすく伝わる記事、
伝わるデザインというのを構築しながら
読者に喜ばれ感謝されるサイトを作り込むようにしてくださいね。
そうすれば、あなたのサイトは読者に感謝され
やがてはその感謝が収益へと繋がっていきますので…。
ということで、
最後までお読みいただきありがとうございました！
