つ、着いて来てくれよ・・・

パンくずリストを設置する

パンくず(パン粉)のナビゲーションって英文翻訳したり読んだだけじゃ意味わかんないでしょ?

サイト運営では昔から使われている表現がパンくずリストなので、それをそのまま当て嵌めているからだと思います。

ヘンゼルとグレーテルという童話で「breadcrumbs」という表記があります。パンのようなお菓子を道しるべに置いて家まで帰り着いたというエピソードがそのまま、パンくずリストの語源になったようですね。

わかりやすく言うとパンくずリストとは、現在位置を示すナビゲーションです。

Yahoo!サーチやGoogleなどの検索エンジンで必要な語句とか興味がある内容を調べて、私のサイトにたどり着いた、としましょう。

検索した語句は「パーソナルスペース」だったり、「催眠」だったり。

すると確かにそのページとか検索した文言は表示されますが、そこがトップページとは限らないのです。トップページからかなり奥の階層のページだったり、下手をすれば静的ページとか固定ページなどではなく日々膨大に更新されているブログのどこかだったりもします。

記事そのものがずいぶんと昔に書かれたものだったり、変更されてしまっていたら?

前後の繋がりのない文章とか、日々膨大に更新されるBlogやサイトの場合、「続きはそのうちに」で終わってしまったりもします。

じゃあ、その「続きを探そう」にも、閲覧者が「自分がいる場所」位置がわからないと追えません。

それだと見に来た人には不親切ですね。サイト内で迷子になってしまう。

ユーザビリティと言いますが、ナビゲーションやリンクがわかりにくい場合はあまり親切なサイトではないと判断されます。クローラ(検索エンジンのRobot)がサイトをインデックスする際に、そういった「閲覧者に親切でないサイト」は下位に置いてしまう傾向があります。

Breadcrumb Navigation XTの紹介

参考のために実物の写真を貼っておきます。私の場合はヘッダ画像→メインナビゲーションの下に「パンくずリスト」が設置してあります。

一度、訪れたページは訪問済みですので紫色になっていますね。「Top」の部分。

次の > 超合金Z > WordPress、他 のところは黄色になっています。これはつまり、「トップページはみたけど、上位のページは見てないよ」になる訳です。

検索などで「ランダム」を調べてたどり着いたケースではこのような表示になるかと思います。

写真を元に現在位置を解説しますと、Top > 超合金Z > WordPress、他 >燃え上がれ〜、ランダム〜♪ のコーナーにユーザー(閲覧者)がいるってことですね。

前から順番に階層とか辿ったページを表示することになります。ヘンゼルとグレーテルは自分でパンくずを置いて迷子にならないようにしましたが、サイトにおいては運営管理者が行っておくことになります。

その様子が「鳩とか小鳥にパンくずを順番に撒いている」のに似ているので、こちらにも「パンくずリスト」との名称がついています。

パンくずを少しずつ撒いて「こっちに着いて来て」と誘導しているということですね。

私がWordPressを採用する前のページにも、このパンくずリストは設置していました。

サイドバーナビでも十分ではありますが

私のサイトの場合、サイドバーにもトップ下にもナビゲーションを設定しています。ですのでわざわざ「パンくずリスト」を設置しなくてもいいでしょう。

ただし、将来的にテーマを変更したとかサイドバーに使ったプラグインが更新を止めてしまったらそれまでになります。WordPressが新しくなると動かないケースもありますから。

またこれまでと違う方式のナビゲーションを用いると慣れていない方は戸惑うこともあります。

私のサイトには中高生や高齢者も閲覧に来られていますので、それこそ「しつこいくらいに」ナビゲーションはあったほうがいいと考えています。

それで以前と同じ場所に同じように「パンくずリスト」を導入することにしました。

WordPressの優れている点は、プラグインを用いると自動化できることです。HTML形式のように一々、自分で手書きしてリンクを張り直す手間は必要ありません。

以前ですと、Top > 超合金Z > WordPress、他 >燃え上がれ〜、ランダム〜♪ の>で囲った部分に一々、手作業でリンクを張り直す必要があったのです。サイトによってはリンク切れも時折あったりする。

WordPressではパンくずリスト用に開発されたプラグインを導入して有効化すると、新しいページを作った時点で自動的にパンくずリストに追加されます。

これならうっかりミスによるリンク切れもありません。

Breadcrumb Navigation XTはブログも含められる

配布元はこちらです。

配布元 : Breadcrumb NavXT 日本語版

Breadcrumb NavXT

私は英語版をそのまま使っていました。現在はテーマを変更してそちらが「パンくずリスト」をそのまま出力するようになったので外しています。

最新版のほうが後々のメンテナンスとかトラブルが無くていいかな? と思いましたので。アップグレードする都度に英語に戻ってしまうプラグインもあります。

というか「パンくずリスト」の場合、いったん稼働してしまうとあまり設定する必要がないのです。

止まったとか動かないって時に何をどうやったかわからない、ってのは困りますが、(このプラグインに関してはですが)だいたいを理解したり覚えている場合には英語版でもいいでしょう。

Breadcrumb NavXTの優れている部分は、ブログもパンくずリストに含められる点ですね。

検索していきなりブログにたどり着いてしまった場合、自分がどこにいるのかわからないことはまま、あります。特に更新が頻繁で昔から運営しているブログの場合には、ブログに載せられている文章も膨大になりがちです。

パンくずリストを設置してあると何年、何月に書かれた文章なのか、どのアーカイブやタブで書かれた内容なのかがわかりやすいので、閲覧者からすると移動もしやすくなります。

検索で訪れたユーザーがあなたのサイト内で「数ページ」をめくって閲覧してくれれば、ヒット数にも繋がりますし、滞在時間も長くなるでしょう。

Breadcrumb NavXTの設置方法

1.配布元よりBreadcrumb NavXTをダウンロードします。

2.デスクトップ等で解凍すると「breadcrumb-navxt」というフォルダが展開されるので、フォルダごと FTPソフトを使ってwp-content/plugins にアップロードします。

3.「プラグイン」の画面で、「Breadcrumb NavXT」を有効化します。プラグインのインストール方法についてはこちらを参照してください。

プラグインって何じゃーい?

4.「設定」→「Breadcrumb NavXT」で、各種設定ができます。

Breadcrumb Separator は初期設定で中間に入る「>」のことです。

Home Breadcrumbは「Home」(ブログやサイトのトップページ)をパンくずリストに含めるかどうかを選択します。

Blog Breadcrumbは「ブログをパンくずリストに含めるかどうか?」を指定します。

私はほぼ、デフォルトの設定で使っていますので細かい設定についてはわかりません。

私のサイトは静的コンテンツ(WordPressではページと呼ばれるもの)の数が結構ありますので、デフォルトの設定で使っていますがブログがメインで過去の記事が、膨大な量がある場合には細かく設定してください。

Posts&Pagesのタグをクリックするとカテゴリーやデータ、タグでパンくずリストを表示することもできます。細かく設定される場合には日本語版をダウンロードして使ったほうがわかりやすいかと思います。

表示させるためのタグ

あとはこのパンくずを表示させるためにタグを埋め込みます。

私の場合にはヘッダ画像→メインナビの下→パンくずナビ になりますからヘッダ(header.php)か本体(index.php、Page.php)に埋め込みます。これは各自で使っているテーマによって異なりますので私に聞かれてもわかりませんよ(笑)。

埋め込む位置を間違えたり、DIVを閉じ忘れたりするとレイアウトが壊れます。ご自分のテーマをよく見て設置場所を決めてください。

だいたいは本文(メインコンテンツ)の上か、ヘッダ画像やメインナビの下に設置している方が多いでしょう。私のテーマの冒頭部分を参考に貼っておきます。

テーマ(metal,php)への記述
<?php
/*
Template Name: metal
*/
?>
<?php get_header(); ?>
<div id="container">
<div class="breadcrumb">
<?php if (function_exists('bcn_display'))
{
// Display the breadcrumb
bcn_display();
} ?>
</div>

一番上の記述はテンプレートの名前(私の場合はmetal)です。その下にヘッダ(get_header)があり、後にメインコンテンツを表示するコンテナ(div id=”container)があります。

ヘッダを取得した後のそのメインコンテナの中に、私はパンくずリスト(breadcrumb)を設置しています。

スタイルシート(metal.css)への記述
/* パンくず、文字サイズ、色指定 リンク */
.breadcrumb {
font-size: 12px;
color: #fff;
padding-top: 10px;
padding-left: 30px;
}

パンくずリストの整形はスタイルシートで行っています。超合金Z用のテンプレート(metal)に読み込んでいるmetal.cssの中に.breadcrumbを設置、そこで文字色や文字サイズ、位置決めを行います。

これも各自使用のテーマ(テンプレート)によって異なります。私と同じパディング(ボーダー内の内側の余白)にしても位置は綺麗には収まりませんのでご注意を。

参考までに。

2010年01月07日

谷口信行

超合金Zへ戻る

こちらも興味があるかも?

ホームページ、パソコンの変遷(へんせん) 最初に使っていたパソコンはコレです 私がネット上でホームページを開設したのは1997年の3月です。 地方(関西の)プロバイダで名もなき所をムック本(パソコンに関する不定期で出される冊子)で見つけて、銀行口座引き落としで借りました。 当時は兄が印刷会社に勤務しており、DTP(版下の制作)にパソコ...
偏食は催眠で治せるのか? 2017/12/01改訂 1999/04/00初稿 催眠の実際例 偏食を番組中に修正 「催眠で偏食は治りますか?」と聞かれることがあります。ケースbyケースで一概には言えませんが、確かに効果はありますよ。 何かのきっかけで戻らない限り持続性もあります。 以前に何度か出演していた番組でタレン...
洗脳の話の続報、補足 記者会見を見ました、18日の更新の続きです 18日にXJapanのTOSHIさんのことについての第一報を聞いて感想を書いてあります。洗脳とか宗教が関係することなのでかなりの長文になってしまいましたが、興味がある方は参照されてください。 ご本人が記者会見に出てこられていましたので、それを見た感想を...
中国の「反日デモ」のピントがズレている理由 古い時代の影響、中国の持つトラウマ 中国で反日デモが起こっているとの報道があります。(2010年10月18日現在) ネットの書き込みなどを見てみると、中国が日本の靖国参拝などになぜこんなに反発するのかがわからない若い世代が増えていますので、中国側の考え方と日本との考え方、文化の違いについて述べて...
過去に行った講演会 これまでに行った講演先のリスト ◇ 社団法人 ソフト化経済センター(東京) ◇ 山形青年会議所 ◇ 泉大津青年会議所(大阪市) ◇ 恵那青年会議所(岐阜県) ◇ すかいらーく労働組合 ◇ 武蔵工業大学 なぜだかはわかりませんが社団法人や労働組合、青年商工会など非営利団体からの講演依...