CSS・CSS3 2014-12-14

CSSだけでシンプルなデザインのパンくずリストのコード

simple-breadcrumb

今回は、CSSだけで作るシンプルなデザインのパンくずリストのコードのご紹介です。
意外とパンくずリストのデザインってどうなんにしようかなーって迷ういながらもシンプルなデザインに落ち着いてしまう僕ですwww
パンくずリストって何?って言う方にざっくりと説明すると、ご自身のウェブサイトで現在見ているページの位置を示すナビゲーションのようなものです。
基本的にユーザーが、現在位置を見失わないようにユーザービリティの向上を目的としますし。
よくネットショップなんかを利用されている方は、見かけるのではないでしょうか?
また、名前の【パンくずリスト】という名前の由来なのですが、僕も最初はなんで、【パンくず?】と思っていましたが、下記のような由来があるようです。

「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

まぁ、なるほどって思っちゃいますよねww
主人公が【訪問したユーザー】ってことですね。

話を戻しまして、今回は画像を一切使わずHTMLとCSSのみでシンプルなパンくずリストのデザインのコード紹介するということですが、下記に完成形のデモサイトを用意していますので、そちらもご確認下さい。(パンくずで利用しているアイコンフォントは、IcoMoonを利用しています。)
また、Googleのリッチスニペットにも対応したパンくずリストも最後に紹介しています。

デモサイト

シンプルなパンくずリストの実装方法

それでは、実装方法を書いていきますが、アイコンフォントを利用する場合は、予めご自身でダウンロードしておいて下さい。
また、下記のコードをコピペで貼り付けるだけで簡単に同じようなデザインにはなります。(アイコンフォントは別とします)

HTML

HTMLの記載は至って普通だと思います。

	<ol class="breadcrumb clearfix">
	    <li><a href="#">HOME</a></li>
	    <li><a href="#">Category1</a></li>
	    <li><a href="#">Category1-1</a></li>
	    <li><a href="#">Category1-1-1</a></li>
	    <li>ページタイトル</li>
	</ol>

CSS

次にCSSですが、こちらは、擬似要素などを利用して三角の部分をデザインしています。

/*---------------------------------------------------------
パンくずデザイン
---------------------------------------------------------*/
.breadcrumb {
    margin-bottom: 20px;
    line-height: 30px;
    color: #aaa;
    padding: 1px;
    border: 1px solid #F0F0F0;
  width:1048px;
}
ol.breadcrumb li{
	float:left;	
	}
ol.breadcrumb li a{
    display: block;
    background: #F0F0F0;
    padding-right: 10px;
    height: 30px;
    margin-right: 31px;
    position: relative;
    text-decoration: none;
    color: #aaa;
}
ol.breadcrumb li a:last-of-type { margin-right: 31px }
ol.breadcrumb li a:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: -30px;
    border: 15px solid transparent;
    border-color: #F0F0F0;
    border-left-color: transparent;
}
ol.breadcrumb li a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -30px;
    border: 15px solid transparent;
    border-left-color: #F0F0F0;
}


ol.breadcrumb li:first-child a{ padding-left: 15px; }
ol.breadcrumb li:first-child a:before{display:none;}

ol.breadcrumb li a:hover {
    background: #00b0ec;
    color: #fff;
    text-decoration: none;
}
ol.breadcrumb a:hover:before {
    border-color: #00b0ec;
    border-left-color: transparent;
}
ol.breadcrumb li a:hover:after { border-left-color: #00b0ec }

上記までを記載すれば、実装が完了です。
デモサイトもありますので、ご参考下さい。

デモサイト

Google リッチスニペットに対応

最後にGoogleリッチスニペットにも対応したパンくずリストも作成していきたいと思います。
こちらは、CSSは上記のままで、HTMLに変更を加えていきます。
パンくずリストをリッチスニペットに対応させると、下記画像のようにパンくずリストが、Googleの検索結果に表示されるようになります。
Googleの検索結果に表示させて得られるメリットは、【構造化マークアップよりSEOの効果の期待】【クリック率の上昇の期待】があります。

simple-breadcrumb1

実装方法

それでは、実装方法のコードのご紹介です。
上記のHTMLに何箇所か付け足しただけとなっていますし、CSSに関しては上記ままで大丈夫です。

	<ol class="breadcrumb clearfix">
	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">HOME</span></a></li>
	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">Category1</span></a></li>
	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">Category1-1</span></a></li>
	    <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="#" itemprop="url"><span itemprop="title">Category1-1-1</span></a></li>
	    <li>ページタイトル</li>
	</ol>

<参考サイト : Simple CSS-only breadcrumb

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS chocolat

レスポンシブにも対応したjQueryライトボックス系プラグイン【Chocolat】使い方

NEXT wp-optimize0

WordPressデータベースを最適化リビジョン下書きを削除する