パンくずリストをCSS3のみでスマートに表現する裏技リネージュ2のクラシック鯖プレイ日記や攻略メインのブログです。前回の記事ではパンくずリストをグーグルに教える方法を書きましたが、今回はパンくずリストの様々な表現方法を見ていこうと思います。パンくずリストとは?童話『ヘンゼルとグレーテル』で迷子にならないようにパンくずを通り道にこぼしていったのが元となります。神話の『ミノタウロス』の話にもある糸を体に巻いてダンジョンに潜っていった話も同じですね。ウェブ上では現在のページが位置する階層を分かりやすくするものです。Pathのほうが通じやすかったりします。最近ではbreadcrumbsも認知されつつあるけどね。htmlの書き方には様々な方法があり、パラグラフやリストタグが一般的ですが、僕はリストタグの中でもOLタグを好んで使います。href="http://logu.jp/playstation-pc.html">プレイステーション</a></li><li>ePSXe</li></ol>OLタグは順番に意味のあるリストを記すときに使います。グーグルロボットの挙動を見ていたらパンくずリストも、OLタグで表記するのが一番近いのではないかと感じました。ロボット的には最適でも、↑のただの箇条書きでは利用者にとってわけわかんないのでCSSで装飾を施します。style.cssというファイルを作り、以下のタグをheadタグの中に埋める。href="http://logu.jp/playstation-pc.html">プレイステーション</a></li><li>ePSXe</li></ol>現在、当サイトで使用しているパンくずリストです。一見して普通のリストタグを使ったパンくずリストに思えますが、実は■現在地をCSSから記入させています。見出しに■や★や●などの記号を使って目立たせたい場合、直接htmlに入力するよりもCSSによって表示させたほうがスマートです。no-repeat;}注意点contentの中にはだいたいの文字を入力可能ブロック要素にすることで文字の後を改行させるリストをインライン要素にして横並びにする。leftよりスマート)aタグの中に矢印画像とpadding-rightで画像の横幅スペースを空ける。a要素にだけ矢印画像を指定することによって、ePSXeの右側には自動で画像表示されなくなる。beforeが肝心の部分で、そのタグが使われる最初の部分にコンテンツが挿入されます。beforeなのでリストの前に飛び出しちゃうかな?と思ったけど■現在地もちゃんとリストに収まってくれました。ちなみに、afterにすれば最後尾に文字を記入できます。検索エンジンの多くはCSSを無視するので、ここに記入すれば人間にだけ文字を見せ、ロボットには認識させないなんていう裏技もできますが、ダメですよ。記事に対してコメントする投稿ルール記事内容に関することであれば特に制限はありません。コメントに画像を添付することも可能です。補足説明として使いたいときなど。投稿ボタンを押すとすぐにページ反映されます。(URLを含むコメントは安全性確保のためストックに保留されます。(Contents)JPG/GIF/PNG形式の画像を添付できます。DK鯖でDEDKにヘックス覚えさせましたが自動使用可能ではありませんでした。今いくつ目のマクロが実行されているか確認する方法。リネージュ2をヴァイオリンで演奏してみた当サイトでは、第三者配信による広告サービスを利用しています。使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、Google広告設定にて設定してください。