賢威7のパンくずリストをカスタマイズする方法について画像と動画で徹底解説

賢威7のパンくずリストとは

賢威7に限ったことではなく、WordPressで構築したブログには【パンくずリスト】というものが自動で生成されます。

こちらが賢威7のパンくずリストになります。


このパンくずリストの目的は、現在のページから見て、階層上位ページへのリンクを順番に並べて記すことにより、現在のページが全体から見たどの位置にあるのかを簡単に把握できるようにするためです。

ページ（記事）数が増えていくことにより、必然的にカテゴリも多くなっていくので、パンくずリストによるナビゲーションはユーザビリティの観点から見ても非常に重要なものになります。

なお、賢威7もページを追加することにより、パンくずリストが自動で生成されるようになるため、とくに意図的に設置したりする必要はありません。

ただ賢威7の場合、初期設定のパンくずリストは、フォントサイズが大きめで、しかもカラーも見えにくいと感じました。

もちろん気にならなければ、そのままでも構わないのですが、せっかく賢威7を徹底的にカスタマイズしていくのであれば、パンくずリストのカスタマイズも覚えておいて損はないはずですので今回ご紹介する方法を参考にしていただければ幸いです。


もし賢威をまだお持ちでない場合には、私も賢威を特典付きでご紹介しておりますので、是非とも下記のページをご覧ください。


これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか？


それでは賢威7のパンくずリストをカスタマイズ方法について詳しく解説していきます。

賢威7のパンくずリストをカスタマイズ

賢威7のパンくずリストをカスタマイズは、すべてCSS（スタールシート）のみで行います。

まずダッシュボード左側のメニュー一覧から【外観】→【テーマの編集】をクリックします。


次に、右側の一覧より【bass.css】をクリックします。


編集ページを開いたら、下記のように【パンくずリスト】と記載されている箇所を見つけてください。

/*--------------------------
パンくずリスト
--------------------------*/

.breadcrumbs-in{
	margin: 2em 0;
	padding: 0;
	color: #999;
}

.no-gn .breadcrumbs-in{
	margin-top: 0;
}

.breadcrumbs-in a{
	color: #999;
}

.breadcrumbs-in a:hover,
.breadcrumbs-in a:active,
.breadcrumbs-in a:focus{
	color: #f60;
}

まず、フォントサイズの変更と現在ページのフォントカラーを変更するために下記のソースコードをコピーして【.breadcrumbs-in】の箇所に上書きします。

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

フォントサイズを変更する場合は【80%】という数値を大小に調整することでフォントサイズは変更されます。

また、フォントカラーについては【#ff0066】というコードを下記のリンク先にあるカラーコード一覧から好きなカラーコードをコピーして上書きしてください。

カラーコード一覧


次に、リンクが設定されている上級階層のパンくずリストのフォントカラーを変更するために下記のソースコードをコピーして【.breadcrumbs-in a】の箇所に上書きします。

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

先程と同様に、フォントカラーについては【#0033ff】というコードを下記のリンク先にあるカラーコード一覧から好きなカラーコードをコピーして上書きしてください。

カラーコード一覧

ここまで完了したらパンくずリストが見やすいデザインにカスタマイズされたはずです。

賢威7のパンくずリストのカスタマイズを動画で解説

それでは賢威7のパンくずリストを変更する方法を動画で詳しく説明していきます。

賢威7のパンくずリストをカスタマイズまとめ

パンくずリストという言葉の由来は、グリム童話に収録されている【ヘンゼルとグレーテル】という作品のなかに、森から帰るときに迷わないようにパンくずを落としながら歩いたという場面から付けられた名前と言われています。

つまり訪問者がブログで迷わないようにするためのナビゲーションがパンくずリストなのです。

冒頭でもお伝えしたように、パンくずリスト自体はページを増やせば自動で生成されるので、何もしなくても役目は果たしてくれます。

ただ、賢威7をカスタマイズしていく中で、全体の見た目を意識した場合、やはり一定レベルのカスタマイズは必要ではないでしょうか。

こうした小さなこだわりが周囲との差別化に繋がっていきますので、賢威7の初期設定のサイズやカラーが気に入らなければ、この機会にパンくずリストの見た目をカスタマイズしてください。

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


本日も最後までお読みいただきありがとうございました！

【完全無料】話題沸騰の史上最強の初心者向け企画！


分からないことは今すぐに解決してください！