はてなブログカスタマイズ(パンくずリスト編)
はてなブログを初めてすぐに、ちょっとデザインを見やすくしたり、ヘッダー画像を変更したりはしたのですが、他に何かしたほうがいいカスタマイズあるかな?と思って調べたところ、「パンくずリスト」の話が出てきました。
パンくずリスト、自分でサイト作るときは必ずつけていましたが、正直あまり意味はわからないまま、
「つけておけばいいことあるはず!」
くらいの気持ちでつくっていました……!
なので、これを機に「パンくずリスト」ってなんぞや?ということと、はてなブログでの設置方法を調べてみました!
パンくずリストって?
パンくずリストは主に下層ページの上部にあって、トップページからそのページまでの経路を示すことにより、訪問者がサイト内のどこにいるかわかるようにするものです。
名称の由来は童話「ヘンゼルとグレーテル」!
森の中で帰り道が分かるようにパンくずを少しずつ落としながら歩いたエピソードにちなんで名付けられたそうです。
パンくずリストを設置するメリット
メリットその① WEBサイト内での現在地がわかる
ブログの場合はあまり関係ないかもしれませんが、例えば何ページもあるような大規模なサイトの場合には、ページを見ていくにつれて、いまどこにいるのかわからなくなるのを防いでくれます。
はてなブログでのパンくずリスト設置
さてこんな便利でお得なパンくずリスト、はてなブログで設置できるのでしょうか?
できます!!!
先人の知恵をお借りして、私もさっそく設置してみました。
参考にさせていただいたのは、こちらのブログ。HTMLなどのコードがわからなくても、コピペでさくっとできてしまいます!
以下のコードを、
ダッシュボード<デザイン<カスタマイズ<フッター
と進み、フッターにコピペ。
<!-- CopyRight http://bulldra.http://bulldra.hatenablog.com --> <script src="">https://www.google.com/jsapi"> <script src="http://bulldra.github.io/commons.js" charset="utf-8"></script> <script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから
さらに、ダッシュボード<デザイン<カスタマイズ<記事下
と進み、記事下に以下のコードをコピペ。
<style> div #breadcrumb div { display: inline; font-size: 13px; } </style> <div id="breadcrumb"></div>
はてなブログカスタマイズ公式コピペ設置方法まとめ - 太陽がまぶしかったから
これだけでコードの設置は終了!
あとは、カテゴリの付け直しを各記事に対して行っていきます。
私はまだ数記事なのですぐにおわりましたが、この作業が、記事数が多いと大変かも……。
「親カテゴリー」「親カテゴリー-子カテゴリー」というカテゴリー作成が必要です。
この記事の場合は、「WEBデザイン」「WEBデザイン-はてなブログ」というカテゴリーをつけています。
そうすると、「TOP」<「親カテゴリー」<「親カテゴリー-子カテゴリー」というようにパンくずリストが表示されます。
今回、こちらのサイトも参考にしました↓
パンくずリストがSEOに有効な理由|ferret [フェレット]
実は重要だった!SEO効果もあるパンくずリスト
せっかくブログ書くなら目にとまったほうがいい!と思うので、地道にSEO対策していければと思います~!