残業は悪と心に決めてる社畜SEが、定時で帰れた時の暇つぶしに読める記事を綴っています。温泉・銭湯TWITTER2016-04-09はてなブログにパンくずリストをつけてみたブログスポンサードリンクこんにちは。ブログのカスタマイズに時間を取られまっくている佐伯(@saeki_teizidash)です。ブログをカスタマイズするのが楽しいとは知らなかった...今日は、はてなブログにパンくずリストを導入していきますよ!!パンくずリストとは?まぁ、最初にパンくずリストとはなんぞや?ということでちょっと調べてきました。パンくずリストとは、あるWebページのサイト全体の中での位置を、階層構造の上位ページへのリンクを順に並べて簡潔に記したもの。買い方」のように順番に並べたものがパンくずリストである。実際のパンくずリストはこちら(下記画像)。赤枠で囲った部分がパンくずリストです。いうことで、いま自分が見てる記事の場所がわかりやすくなるというメリットがあります。SEO対策にもなる!パンくずリストは検索エンジンのクローラー巡回を手助けしてくれる役割を担っています。つけていて損はないってことですね。googleが自ら出している「Google検索エンジン最適化スターターガイド」に書いてあるから間違いない。下のリンクからPDFへ飛べますよ。Google検索エンジン最適化スターターガイドあとで、ほんとに機能しているか検証してみます。ありがとうございます。みんな大好きコードをコピペをするだけで簡単にパンくずリストを表示することができます。以下のコードをデザイン画面のフッターにコピペ。type="text/javascript">google.setOnLoadCallback(categoryHierarchyModule);</script>そして、パンくずリストを表示したい場所(記事の上or記事の下)に以下のコードをコピペ。id="breadcrumb"></div>これで表示を行った場所に表示されたと思います。※読み込みに少し時間かかる可能性ありカテゴリーの再設定パンくずリストの表示設定は以上で終わりですが、以下に当てはまる記事があるブログはカテゴリーを再設定する必要があります。「1つの記事にカテゴリーを何個もつけている人」はカテゴリーの分だけパンくずリストが表示されてしまいます。ものすごく見栄えが悪くなってしまいます。「『パンくずリスト』を階層表示にしたい人」は以下の設定をしないといけません。親カテゴリと子カテゴリの間に、半角ハイフン(-)が必要です。以上の設定をすると、階層で表示することができます。子カテゴリー」なんて追加したらサイドバーのカテゴリー一覧に表示されちゃうじゃん!安心してください。大丈夫ですよ!先ほどのソースコードの部分で子カテゴリを認識させない処理が書かれています。type="text/javascript">google.setOnLoadCallback(categoryHierarchyModule);</script>この処理が書かれていないと、ハイフンが入った歪なカテゴリーが表示されてしまうので、気を付けてください。使用しているブログテーマ【Blank】だと、パンくずリストを表示したときに「>」の位置がズレるという問題が発生していました。不具合修正方法は、開発者さんである「MoonNote」さんの記事でも取り上げられてます。以下のコードをデザインCSSの部分に追記して下さい。0;}問題が起こる理由などは、製作者さんである「MoonNote」さんの記事に詳しく書いてありますのでご参照ください。まとめ自分のブログでSEO対策というのがどのぐらい貢献してくれるのかわからないですけど、ブログがどんどんカスタムするのは楽しいですね。利便性を高めて見栄えのいいブログを作っていきたいと思います。※2017年8月時こんにちは。僕のOutlookメールが世界中からアクセスされてる佐...2017-01-16【まとめ】はてなブログに反映したカスタマイズ一覧!!※随時更新こんばんは。バイク納車当日にミラー2つへし折った佐伯(@saeki...2017-01-09【iphone6s】勝手に電源落ちるから無償バッテリー交換してきた!こんばんわ!はやくまた正月休みがきてほしい佐伯(@saeki_teizi...2016-10-17【アプリ】「ラーメンデータベース」がすごく便利なアプリだったから紹介する!こんばんわ。「明日こそ、定時」の記事を書いている佐伯(@saeki...2016-06-28【はてブ】ブログのアイコン(favicon)が白い書類のアイコンになっている問題を解決する!こんにちは。注目記事プロフィールid:sasagin自社製品の開発をしたかったのに、SIer系に回されてしまった底辺PG&SEです。好きなことなんでも書いてます。最近は、一眼レフと漫画にハマっています。独断と偏見にまみれたコラムはnoteに書いてますので、物好きな方はこちらもどうぞ。(1)月別アーカイブtwitter@saeki_teizidashさんのツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。