PC、ゲーム、デジタル機器などの初心者向けの話題や小技などをつらつらと……

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Loading...

FC2ブログにCSSでパンくずリスト追加してみる

 最近他のブログやサイト等を見てるとパンくずリストを標準設置しているところが増えてきたので、それならばと当ブログにもパンくずリスト導入を試みることに。

 ちなみにパンくずリストとは、当ブログの各記事タイトルの下部に設置されている「雑記・概要 > サイト運営」のようなブログ内リンクで、Wikipediaによれば、

 パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。

~ 中略 ~

 ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

引用 - Wikipedia - パンくずリスト

 という説明が。要はユーザーに現ページ及びその前後位置等を分かりやすく明示するためのリンクリストのようなものだ。

Wikipediaによればパンくずリストには何を示すリストかにより「パス型」「位置型」「属性型」の3種類に分類されるとのことだが、この分類に当てはめると今回設定するのはその記事がどのカテゴリに属しているかを明示する「属性型」となる。

リストタグ<ul><li>にてパンくずリスト用CSSを作成

 体裁を整えるだけなら何でもいいが、一般的にパンくずリストはリストタグ(<ul><li>)を用いて作成されるため、当ブログもそれに準ずる。
 パンくずリストはその順序が重要となるため、SEO効果を考慮した正しい構造としては<ul>よりも順序を明確にした番号付きリストを示す<ol>の方が良いという意見もあるようだが、当ブログは完全趣味のブログのため特にSEOに拘るつもりはないので今回は<ul>で作成していく。

 SEOを気にするならば当然<ol>で作成してもOK。以下のコードを<ol>差し替えて細かな部分さえ手直しすれば、大部分はそのまま流用可能。

/*記事日時・パンくずリストエリア*/
.listarea{
padding:2px 10px 10px 10px;
color : #555;
font-family:Meiryo UI,Meiryo,"メイリオ",Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック",Osaka,sans-serif;
line-height : 1.2;
font-size : 85%;
text-align:left;
}

.panlist{
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position: relative;
margin:0;
}

ul.panlist li{
display:inline;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}

ul.panlist li.posi{
position: absolute;
right: 4px;
display: inline-block;
}

 margin、padding等余白に関する値や文字、行間等に関する部分等は使用するサイト、ブログに合わせて変更すればOK。あくまでもこれは当ブログ用の設定値。

 リストタグを使用した場合、通常リストは縦並びとなって表示されるが、displayプロパティにinlineを用いることでインライン表示化し、横並びにすることができる。

 CSS一番下部に記述のclass「.posi」は、パンくずリストと平行に並ぶ年月日表示用として設定。

 元々パンくずリスト挿入予定部分には年月日表示があり、それらを共存させるためにパンくずリストを左寄せ、年月日を右寄せにして対応することに。
 だが実際試みてみるとこの位置取りが意外に難しく、方法としては親要素に該当するdivボックスに.panlistでpositionプロパティを「relative」に設定し、その後年月日表示部分に.posiでpositionプロパティを「absolite」にして値を調節し位置を合わせることに。

 作成当初は実はこのpositionプロパティについての知識が乏しく、「absolute」での値による絶対位置指定は、直近の親要素が「relative」による相対位置指定になってないとうまくいかない(bobyを絶対位置指定の基準としてしまう)ことを知らなかったため、えらく苦労した覚えが……

 取りあえずこれでパンくずリスト及び、同平行位置に共存予定の年月日表示用のCSS設定は終了。次はHTML記述の追加を行っていく。

テンプレートにパンくずリスト部分用HTML記述を追加する

 作成したパンくずリスト用CSSをHTMLに適切に反映させるための記述を追加。追加内容は以下の通り。

<div class="listarea">
<ul class="panlist">
<li><!--parent_category-->
<a href="<%topentry_parent_category_link>">
<%topentry_parent_category></a> > <!--/parent_category-->
<a href="<%topentry_category_link>"><%topentry_category></a></li>
<li class="posi"><%topentry_year>年<%topentry_month>月
<%topentry_day>日 <%topentry_wayoubi>曜日</li>
</ul>
</div>

 設定したCSSのclassを各項目に記述していくだけなので、CSSに比べると全然楽な作業。ただパンくずリストをどの位置に追加するかによって多少作業に差が出てくる可能性あり。

 今回は各記事タイトル下部に表示させようと考えていたため、テンプレートの<!--topentry-->内に記述を追加した。

 しかしパンくずリストの表示位置についても、SEO的に言えばメインコンテンツとなる各記事内ではなく、ヘッダー部分等に表示させるのが正しいらしい。
 実際大手ブログや企業サイト等を見てみるとなるほどその通りになっているところが多いが、特に今回はSEOには拘らず、拘るのはあくまで自分の都合と思いこみだけにしておこうかと(笑)

意外にHTML及びCSSの勉強になったパンくずリスト追加

 displayプロパティでのinline表示に、positionプロパティでのrelativeとabsoluteそれぞれの使い方等、これまで適当にサイト及びブログ運営してきた人間にとっては勉強になること尽くしの作業となった。
 最初はHTML5及びCSS3に少しずつ対応させていこうかと思い始めたカスタマイズだったが、これで調子に乗った意識が変わったのか、これまで放置していたサイト類の改造にも着手しようかと画策していたりする。

 特に10年ほど前に初めて立ち上げたサイトに関してはWprdPress化しようなどということも考えていたため、これを機に少しでも作業に手をつけて行ければとも思う。

 ……が、その前に必要なのはそろそろ専門書の1冊でも購入して、きちんとイチから勉強することかぁ……などというのを今回結構痛感した。これまでWeb上で検索した知識だけしか頼ってなかったしなぁ……



Loading...
コメント
コメントの投稿
【Font & Icon】
管理者にだけ表示を許可する
プロフィール

雪陽炎

Author:雪陽炎
 PCやデジタル機器類いじりの他にも、あれやこれやと趣味を持つ器用貧乏な奈良県民。
 初心者向け兼自身の忘備録としてPC及びデジタル機器関連の情報をまとめてます。

参加ブログランキング

にほんブログ村 PC家電ブログ パソコン・周辺機器へ にほんブログ村 PC家電ブログ 家電・AV機器へ
にほんブログ村 PC家電ブログ PCオーディオへ
人気ブログランキングへ
人気ブログランキングへ
最新記事
スポンサ-ドリンク
最新コメント
最新トラックバック
Amazon
楽天
ブロとも申請フォーム

この人とブロともになる

関連記事Loader

[猫カフェ]futaha

スポンサードリンク
本館/別館サイト
カテゴリ
ブックマーク
最近のチェックリスト / PC関連
最近のチェックリスト / AV関連
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。