【決定版】はてなブログで関連記事を表示させる場所と設置方法！

こんにちは！

なんでも行き当たりばったり、石橋は叩いて笑え！

座右の銘は【何とかなるさ】のガッツです！

ブログで稼ぐ為に大切にしていくことは

いかに自分のブログを見てもらえるかです！

1つの記事だけを見てもらうのではなく、

複数の記事を見てもらうようにするには内部リンクが必要です。

聞いたことや見たことがあると思います。

▽内部リンクは絶対した方が良い件について。

www.okdkdk.com

▽他にもシェアされやすいSNSボタンの設置方法など紹介してます！

www.okdkdk.com

今回は内部リンクに繋がりのある関連記事を『表示させる方法』と、

さらにベストな『設置場所』をご紹介します！

関連記事を表示させる方法

はてなブログでは公式で関連記事が表示されるかされないかを選べるようになりました！

はてなブログでは、記事ページ（個別記事のパーマネントリンク表示）の本文下（ソーシャルパーツを表示していればその下）に、関連記事を表示するようにしました。そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。
記事下に「関連記事」を表示します - はてなブログ開発ブログ

公式の関連記事を表示させる

設定方法：デザイン→カスタマイズ→記事→関連記事にチェックを入れる

f:id:okeydokey-okitsu:20190424125842p:plain

これをチェックすれば記事下に関連記事が表示されるようになります。

関連記事をカスタマイズで表示させる(CSSコピペのみ)

ガッツの場合はブログテーマでサイドに関連記事が来るよう設定されているのですが、

記事下にも表示させたいのでカスタマイズしました！

オーキードーキーのブログはアイキャッチ画像をメインに表示されるようなブログテーマなので、

アイキャッチ画像を設定されている方におすすめなデザインです！

▽アイキャッチ画像がメインのブログテーマ

www.okdkdk.com

▽このような感じで表示されます！

f:id:okeydokey-okitsu:20190424130459p:plain

記事と記事の間が点線で区切られたデザインです。

とてもシンプルでごちゃごちゃしすぎず見栄えが良い！！

このようなデザインの関連記事を表示させるには、

以下のコードをコピペするだけでOKです！

設定方法：デザイン→カスタマイズ→デザインCSSへコピペ

/*1つ1つの関連記事ボックス*/
li.urllist-item.related-entries-item {
    border-bottom: dashed 2px #e2e2e2;
    padding: 10px 0;
}

/*関連記事の画像まわり余白調整*/
.urllist-with-thumbnails li .urllist-image {
    margin: 0 10px 0 0;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title {
    text-decoration: none;
    color: #525252;
    font-weight: bold;
}

/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
    color: silver;
}