どうも、ケイジです!
今回は賢威7のカスタマイズとしてパンくずリスト部分の色やサイズの変更の方法を説明していきます。

パンくずリストも背景色と区別するべき

賢威7でパンくずリストの色やサイズを変更する方法メイン

パンくずリストはSEO上で効果があるため必ず入れておきたい要素の1つです。賢威7ではもともとパンくずリストがあるので問題ないのですが、賢威7ではパンくずリストも含め全てのリンクが背景色と同じテンプレートがあります。やはりパンくずリストも同様にリンクは背景色と同じであれば見にくいですし、SEO上でもあまり良くありません。さらにサイズについてのカスタマイズも紹介しています。

では早速賢威7を使った時のパンくずリストのカスタマイズ方法について説明していきます。

 

 

賢威7のパンくずリストの色とサイズの変更方法

ダッシュボード→外観→テーマ編集→base.css

賢威7-パンくずリストの変更ソース

ダッシュボード→外観→テーマ編集→base.cssを開き、パンくずリストという部分を探します。上記画像の左側の赤枠の部分をそれぞれカスタマイズしていくこととなります。

 

現在のページの色と大きさの指定のソース

.breadcrumbs-in{
  margin: 2em 0;
  padding: 0;
        font-size: 80%;
        color: #0000FF;
}

パンくずリスト全体の色の指定のソース

.breadcrumbs-in a{
  color: #0000ff;
}

これらを上部の赤枠部分にそれぞれ上書きしてください。font-size:80%となっている部分はパンくずリストの大きさを指定しています。逆に大きくしたければこのパーセンテージを上げてください。すぐ下の#0000ffというカラーコードは青色を指定したものとなっています。

 

さらに、パンくずリスト全体の色の指定も同じカラーコードの#0000ffの青色にしているので、パンくずリストは全て青色になり、なおかつ全体的に少し小さめになったということです。

 

 

パンくずリストカスタマイズ前と後の変化

デフォルトの状態

パンくずリストカスタマイズ設定方法1

 

パンくずリストカスタマイズ後

賢威7-パンくずリストカスタマイズ後

 

 

まとめ

以上が賢威7でパンくずリストの色とサイズの変更方法についてでした。パンくずリストはSEO上では必要なものなので消すことはやめましょう。ただ、色やサイズの変更に関しては自由に設定していいと思います。コンテンツを目立たせるならば小さくするのもありですし、逆に大きくしてどのカテゴリ内のどのページにいるのかという部分を強調したいのであれば大きくしていいと思います。

 

色に関しては僕は青色にしていますが、この部分は不自然な色合いでなければ特に何色でも構わないと思います。多くの人がリンクは青色だと思っているのであえて僕は青色にしています。参考にしてみてください。

 

賢威7カスタマイズ一覧まとめ記事へ