今回は賢威7の
パンくずリストのフォントサイズと文字のカラーを、
カスタマイズする方法を説明していきます。

 

そもそも、パンくずリストにも役割があって、
読者がいまブログ内のどの位置にいるのかを

わかりやすくするためにあります。

 

またSEO上で効果があるため外せない要素の1つです。

 

デフォルト状態のパンくずリストだとあまり目立たいので、
これだとSEO上の効果を考えての変更をしてみました。

 

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

 

これの部分がパンくずリスト

 

画像の赤枠で囲った部分がパンくずリストです。

パンくずリスト

 

パンくずリストは
一般的にグローバルメニュー下に表示されています。

 

※ただ、テンプレートによっては初期状態で

実装されていないようなものもあるようで
カスタマイズ前に確認してみてください。

 

記事を公開をしていけば、自動的に表示されるので
面倒な設定など必要がありません。

 

賢威7デフォルト状態だと少し文字が薄く見にくいですよね?

 

もうすこし目立った方がいいと思うので
パンくずリストをカスタマイズしてみます。

 

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

 

ダッシュボードメニューから、「外観」⇒「テーマの編集」をクリック。

 

ダッシュボード

 

画面右下の項目から「base.css」を開いて下さい。

賢威7テーマ編集

 

「base.css」の編集画面の中から、パンくずリストを探します。

 

以下のような画面が表されます。

 

パンくずリスト

 

表示された中の赤枠の部分を書き換えます。

 

ソースコード

 

画像①のソースコードの【color:#999;】

#999;が、トップページからみて
【現在開いているページ】が表示されている部分の変更ができます。

 

パンくずリスト

 

画像②の【color:#999;】

#999;にお好きなカラーコードを入れることで色の変更ができます。

パンくずリスト

※ここで注意することが数字の後の【;】セミコロンは消さずに、
お好きなカラーコードを貼り付けること、セミコロンを消してしまうと
カスタマイズしても反映されないので。

 

フォントサイズの変更をする場合は、上の画像①の

  • padding: 0;と
  • color: #999;の間に
  • 【font-size: △△%;】の一行を加えます。
  • font-size:後の数字の部分△△%;を変えることで、
    フォントサイズの変更ができます。

 

お好きなカラーはカラーコード一覧から探してみてください。

 

最後に「ファイルを更新」をクリックして変更完了です。

 

以下の様に設定変更されました。

 

この方が断然見やすくなりました。

 

このようにして、パンくずリストは設定していきます。

 

 

細かいところであってもきちんと設定していかないと、

 

せっかくのコンテンツ内容まで見劣りして見えてしまいます。

 

ぜひこのような部分にも手をかけていきましょう。