Luxeritas カスタマイズ(外観) パンくずリンク

2017/10/24Luxeritas カスタマイズ(外観)

一般にはパンくずリストとも言いますけど、カテゴリーを親カテゴリーとか子カテゴリの系統を明示しておけるので、サイト訪問者がサイト構成が把握しやすくSEOとしてGoogleも意味ある構成だと評価してくれます。

名前からして「パンくず」とかゴミのような名前ですけど、カテゴリー設置して記事がどのカテゴリーに属しているか明示しておくのは割りと重要なこととして扱われています。何よりGoogleのクローラーがパンくずリンク(パンくずリスト)で示される階層構造でサイト構成を理解していくのでカテゴリー名をSEO要素を含んだものにして、無意味な羅列でない階層にしておくと効果が上がります。とはいえ私のサイトはわりと適当に設定してあるのであまりSEO的には不向きです。当初はカテゴリーの階層設定をしてあったのですがWordPressマルチサイトではblog/というカテゴリーが強制的に挿入されて重複アドレスが勝手に作られてしまうということがあってその解決のために、パーマリンク設定とかすべて見直しているときにカテゴリーの階層構造を外してシンプルにしたりした結果、このサイトはSEOには不向きな構造になっています。少しずつ直しつつありますけど。

マルチサイト設定でない通常のWordPress設定や、blog/カテゴリーに対処されているマルチサイトはあらかじめサイトの構成を考えて記事がどのカテゴリ階層に入るのか意識しながらサイトを作成するとGoogleからの評価があがります。

日本語で「くず」とかつくとイメージ悪いですがGoogleは評価の一つとして認識しているので大事にできるだけ設置して、サイトを来訪してくださった方にも例えば「ホーム > 料理 > 菓子 > 和菓子」とあって和菓子の記事内容が気に入った場合、他の和菓子記事も気になってパンくずリンクの「和菓子」をクリックしたり、洋菓子記事も気になった方は「菓子」リンクをクリックされることでしょう。来訪者の滞在時間や直帰率もSEOには意味ある数字ですし、来訪者にやさしいサイトは来訪者のためです。できるだけ目立つ位置とデザインでパンくずリンクの配置をしましょう。かと言って、サイトのデザイン全体を崩したらまるで意味がありませんけど。
Luxeritas137

パンくずリンクの配置

Luxeritas138

Luxeritasではパンくずリンク表示は「コンテンツ領域の外」「コンテンツ領域の中」「表示しない」三種類用意されています。

コンテンツ領域の外

Luxeritas139
パンくずリンクが記事枠の上に表示されます。

コンテンツ領域の中

Luxeritas140
パンくずリンクが記事枠内に表示されます。

表示しない

Luxeritas141
記事内容がその日ごと違ったり、系統の無い特殊なサイトではパンくずリンクは必要のないという状況もあり得るので、Lueritasでは「表示しない」で非表示も用意されています。

パンくずリンク上下パディング ( px )

Luxeritas142
パディングとは設定したエリア内での画像or文字が入るエリアとの緩衝地帯、隙間のことです。
隙間があることで横のエリアから独立して視認しやすくなります。

パンくずリンク左右パディング ( px )

Luxeritas143
デフォルトではパディングは上下左右ともに10pxに設定されています。
ここで大きな数字を入れると設定されたエリアから中央よりに文字が挿入され、小さな数字を挿入すると枠に近づいたところに文字が挿入されます。

パンくずリンク文字色

位置決めも設定したら、より訪問者にサイトの構成を知らせるパンくずリンクを目立たせるために文字色を設定してアピールできます。単純に目立たせるために原色にしても良いでしょうし、色数をあまり増やしても見た目にうるさいのでサイトに使っている色の補色を選びました。

https://color.adobe.com
adobeの色使いを決めてくれるサイトです。
Luxeritas144
ヘッダーで使っている緑のカラーコードを挿入したらピンク系の色を返してきました。

Luxeritas145
文字色を補色のカラーナンバーに設定しました。

パンくずリンク背景色

Luxeritas146
背景色をヘッダーの色と合わせました。この辺りは好みの色にできます。
この背景色の枠の外周に色を付けるには「パンくずリンクを枠線で囲む」にチェックを入れて色を設定することで枠線が入ります。

角の丸み

Luxeritas147
背景色や枠線が明示されている場合にその角に丸みを設定できます。
0から10に変更してみました。角が視認できるくらい丸くなります。

パンくずリンク枠線色

Luxeritas148
枠線の効果を見るために先ほど設定した背景色をクリアしました。
枠線職をパンくずリンク文字色と同じ色に設定すると文字と枠だけの表示になります。

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas27062
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas27162
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas27262
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas27352
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas27462
ヘッダー/フッターのカスタマイズ
Luxeritas27542
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas27682
コメント欄の表示or非表示、枠線
Luxeritas27742
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas27832
メタ情報の表示or非表示と配置
Luxeritas27972
サムネイル(アイキャッチ)大きさと配置
Luxeritas28042
フォントの変更
Luxeritas28162
タイトル、記事など文字サイズの変更
Luxeritas28232
文字色の編集
Luxeritas28432
背景色と枠線色の編集
Luxeritas28372
背景とタイトルとロゴ画像挿入による編集
Luxeritas28532
パンくずリンクの配置変更と編集
Luxeritas28772
ヘッダーナビ(グローバルナビ)編集
Luxeritas28832
ヘッダー上の帯状メニュー編集
私の目次設定カスタマイズ解説ページへのリンクボタン画像[60]
Luxeritasオリジナル目次の挿入とカスタマイズ
Luxeritas28932
マウスオンアニメーション

Posted by クチコミ探し