[`yahoo` not found]
Pocket

13d85d565048cc4e83dc6e6eca28fe61_s

パンくずリストの設定


パンくずリストとは
ワードプレスには、パンくずリストが表示されます。
これは、賢威7にも勿論あります。

どのウェブサイトも階層状にサイトが構築されており、
ネットのサイトを閲覧したことがある人ならば、必ず見たことがあるはずです。

自分が見ているページが階層最上位のトップページから見て、
どの位置にあるのかを示すのがパンくずリストです。

階層最上位トップページから、
下の階層へと順番に下がるように表示されていきます。

ページ数が増え、サイトが大きくなればなるほど、このパンくずリストは、
閲覧者がサイト内で迷子にならないために重要になってきます。
閲覧者がどこを通ってきたかを示す言わば、道しるべのようなものです。

画像の赤枠で囲った部分がパンくずリストです。
一般的に画面の上の方に表示されます。

bandicam-2016-09-24-15-59-48-728

賢威7にもパンくずリストは最初から設定されていて、
記事が増えていけば自動的に表示されていくので、
特別な設置作業は要りません。

ただし、この画像を見る限り、色が薄く文字が見にくいですよね?
そこで、パンくずをカスタマイズしていきます。

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


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

bandicam 2016-08-23 20-56-52-253
画面右下の項目から「base.css」を開いて下さい。

bandicam-2016-09-24-13-46-07-430

「base.css」の編集画面の中から、パンくずリストを探します。
以下のような画面が表されます。

赤枠の部分を書き換え、現行のページ(最下層のページ)の
フォントの大きさとカラーコード変更します。

bandicam-2016-09-24-13-51-56-064

以下の様に書き換えます。
font-size: 90%;となっていますが、
フォントの大きさは任意のものに決めて下さい。
大きさの変更が必要ないと思う方は変えなくてもいいです。

次にカラーコードをcolor: #000000;に変えます。
これで文字が黒くなります。

カラーコード一覧

lpwwxlruhlpbeyb1474699445_1474699578

.breadcrumbs-inの部分を書き換えると以下の様になります。
フォントサイズは特に変えなくてもいいと思ったので、100%に設定。
カラーコードは、#000000の黒に設定しています。

bandicam-2016-09-24-16-13-15-630

次にリンク設定されている上階層のカラーコードを変更します。
.breadcrumbs-in aをカラーコード、color: #0033ff;の青に書き換えます。

bandicam-2016-09-24-16-28-05-988

最後に画面下の「ファイルを更新」をクリック

bandicam-2016-09-24-16-41-15-234

以下の様に設定変更されました。
この方が断然見やすくなりました。

bandicam-2016-09-24-16-51-44-209

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

サイトの見た目は重要です。
細かいところであってもきちんと設定していかないと、
素人っぽく見えてしまい、
せっかくのコンテンツ内容まで見劣りして見えてしまいます。

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

[`yahoo` not found]
Pocket