【ニュース まとめ】はるさめ君にゅーす!

このブログは、常識・教養を身に付けるために、社会、ビジネス、健康、エンタメなどネット上の旬な情報を国内外から、ジャンルを問わず、さまざまなニュースや情報・知識を収集していくブログです。ニュースまとめます。

はてなブログにはないSEO対策-パンくずリスト・関連記事リスト・子カテゴリ備忘録

最近始めたブログですが、使いやすいはてなブログでも多少のカスタマイズは必要になります。そこで、ほかのWEBページで集めた、はてなブログカスタマイズを集めた備忘録を作りました。(本気でコピペだけなので、カスタマイズとは言えませんが)

  1. パンくずリスト
  2. 関連記事リスト
  3. 子カテゴリ

 

 

まず、パンくずリストとは

 

パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするため、上位の階層となるWEBページを階層順にリストアップしてリンクを設置したリストのことを指します。

f:id:harusamekun:20150815233118j:plain

参考のウェブサイトでは、グーグル検索上に表示させることもできる。

f:id:harusamekun:20150815233304j:plain

 

出典はここです。非常にお世話になっております。

bulldra.hatenablog.com

 

f:id:harusamekun:20150815234311p:plain

f:id:harusamekun:20150815234320p:plain

①ダッシュボートのデザイン画面における「フッタ」に以下のコードをコピペ。

以下の青い文字を。
<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>

 

② パンくずリストを表示さる場所(記事上 or 記事下)に以下のコードをコピペ。(私はパンくずを記事上にしました)

<style>
div #breadcrumb div {
display: inline;
font-size: 13px;
}
</style>
<div id="breadcrumb"></div>

 

関連記事リスト

記事下に

f:id:harusamekun:20150815234751p:plain

下の青い文章は関連記事のもの。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' ,true);
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>

 

赤い数字の3を変えれば、自分でも関連記事の数を変えられます。

 

最後に子カテゴリ

はてなブログには子カテゴリを作れないと知り、ここまで使いやすいのに意外と感じましたが、しっかり方法はあるようでした。以下では最後のほうにありました。

www.tarappism.com

 

やることは2つあって

  1. まず親カテゴリを作って
  2. (親カテゴリの名前)-(子カテゴリの名前)を作ればそれで終わりです。

f:id:harusamekun:20150815235939p:plain

f:id:harusamekun:20150815235950p:plain

 

結果的には

f:id:harusamekun:20150816000336p:plain

なぜか2つ出てきてましたが、満足(コピペなので、これは功罪だと理解)

f:id:harusamekun:20150816000420p:plain

下のほうに関連記事が出てきてくれます。

 

以下参考リンク:

 

bulldra.hatenablog.com

www.interest-blog.com

www.tarappism.com