オンラインRPGのプレイ日記や攻略メインのブログです。稀にWeb製作記事も更新。

2016年12月7日 レイドボス:コアの鍵開け条件と有効デバフを更新しました。

パンくずリストをCSS3のみでスマートに表現する裏技

2012年3月28日 【Web製作メモ

前回の記事ではパンくずリストをグーグルに教える方法を書きましたが、今回はパンくずリストの様々な表現方法を見ていこうと思います。

パンくずリストとは?

童話『ヘンゼルとグレーテル』で迷子にならないようにパンくずを通り道にこぼしていったのが元となります。神話の『ミノタウロス』の話にもある糸を体に巻いてダンジョンに潜っていった話も同じですね。ウェブ上では現在のページが位置する階層を分かりやすくするものです。

トップページ > PCで動くエミュレータ > プレイステーション > ePSXe

ちなみに、パンくずを英語でいうとbradcrumbsになりますが、それだと実際のパンくずの意味もあるのでTopic Pathのほうが通じやすかったりします。最近ではbreadcrumbsも認知されつつあるけどね。

htmlの書き方には様々な方法があり、パラグラフやリストタグが一般的ですが、僕はリストタグの中でもOLタグを好んで使います。

リストに順番をつける

  1. トップページ
  2. PCで動くエミュレータ
  3. プレイステーション
  4. ePSXe
<ol>
<li><a href="http://logu.jp/">トップページ</a></li>
<li><a href="http://logu.jp/about/emulators-pc/">PCで動くエミュレータ</a></li>
<li><a href="http://logu.jp/playstation-pc.html">プレイステーション</a></li>
<li>ePSXe</li>
</ol>

OLタグは順番に意味のあるリストを記すときに使います。例えばランキングなど。グーグルロボットの挙動を見ていたらパンくずリストも、OLタグで表記するのが一番近いのではないかと感じました。

ロボット的には最適でも、↑のただの箇条書きでは利用者にとってわけわかんないのでCSSで装飾を施します。style.cssというファイルを作り、以下のタグをheadタグの中に埋める。

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

CSSでできる面白い裏技を紹介

  1. ホーム
  2. PC上で動くエミュレータ
  3. プレイステーション
  4. ePSXe
<ol id="topicpath">
<li><a href="http://logu.jp/">ホーム</a></li>
<li><a href="http://logu.jp/about/emulators-pc/">PC上で動くエミュレータ</a></li>
<li><a href="http://logu.jp/playstation-pc.html">プレイステーション</a></li>
<li>ePSXe</li>
</ol>

現在、当サイトで使用しているパンくずリストです。一見して普通のリストタグを使ったパンくずリストに思えますが、実は■現在地をCSSから記入させています。

見出しに■や★や●などの記号を使って目立たせたい場合、直接htmlに入力するよりもCSSによって表示させたほうがスマートです。

ol#topicpath:before {
 content: "■現在地";
 display: block;
 font-weight: bold;
}
ol#topicpath li {
 display: inline;
}
ol#topicpath li a {
 padding-right: 23px;
 background: url(images/topic-arrow.gif) right center no-repeat;
}
注意点
  1. contentの中にはだいたいの文字を入力可能
  2. ブロック要素にすることで文字の後を改行させる
  3. リストをインライン要素にして横並びにする。(float leftよりスマート)
  4. aタグの中に矢印画像とpadding-rightで画像の横幅スペースを空ける。
  5. a要素にだけ矢印画像を指定することによって、ePSXeの右側には自動で画像表示されなくなる。

beforeが肝心の部分で、そのタグが使われる最初の部分にコンテンツが挿入されます。beforeなのでリストの前に飛び出しちゃうかな?と思ったけど■現在地もちゃんとリストに収まってくれました。ちなみに、afterにすれば最後尾に文字を記入できます。

検索エンジンの多くはCSSを無視するので、ここに記入すれば人間にだけ文字を見せ、ロボットには認識させないなんていう裏技もできますが、ダメですよ。

記事に対してコメントする

投稿ルール
  • 記事内容に関することであれば特に制限はありません。
  • コメントに画像を添付することも可能です。補足説明として使いたいときなど。
  • 投稿ボタンを押すとすぐにページ反映されます。
    (URLを含むコメントは安全性確保のためストックに保留されます。)

名前 (Name) ※無記名にすると「匿名さん」になります

内容 (Contents)

10MB以下のJPG/GIF/PNG形式の画像をアップロードできます。

  1. ホーム
  2. 雑記
  3. Web製作メモ
  4. パンくずリストをCSS3のみでスマートに表現する裏技
サイトに関するご要望や意見はこちらから

パンくずリストをCSS3のみでスマートに表現する裏技

2012年3月28日 20:00

▲ページの先頭へ戻る