記事下に関連記事やおすすめ記事などの過去記事を表示する方法あれこれ

記事下に関連記事を表示させたい

　記事下に関連記事を表示させる方法は、こちらの「やぎろぐ」さんにまとめられておりますので、こちらをご参考にされてはいかがでしょうか。

　ですが残念ながらこちらのページ、リンクが多いせいか非力なマシンでは落ちてばかりで落ち着きません（わたしの初代iPadではスクロールのたびに落ちます。Googlespeed insightsで調べたところスコアが、モバイルで30前半、パソコンで1桁（すこし前は3、先日1で今は0）でした）。

　また表示に時間がかかってしまいますから、僭越ながら「やぎろぐ」さんで紹介されている参照元サイトを列挙させていただきます。

※「やぎろぐ」さんでは9つ紹介されていますが、1つリンク切れで見当たらなかったので、それはここでは除外させていただきました。

はてなのサイドバーモジュールを利用した方法

　はてなのサイドバーに「関連記事」を表示させられるようになり、そのモジュールを利用して記事下に関連記事を表示させるという方法があります。その方法を教えてくださっているのがこちらのサイト。

『ボクココ』さん
『やがて煙になる日まで』さん

　現在わたしが利用させていただいている方法は『やがて煙になる日まで』さんで紹介されている方法です。

　理由はフッタにおくだけではてなスターより上の記事下に関連記事を表示させられるからです。

　『ボクココ』さんでは【デザイン → カスタマイズ → 記事 → 記事下】にコードを追加するようにと紹介されていますが、これをフッタに追加しても表示はされます。ただフッタに追加した場合、一番上にこのコードを追加しても、そのままでは、はてなスターより下に表示されてしまいます。

　それでなにか問題あるか？と言われれば別に問題はありません。ただはてなスターを表示されている方であれば見た目のバランス的に、はてなスターより上に表示したい～となられる方もあるのではないかとおもいます。

　『ボクココ』さんのコードを利用しつつはてなスターより上に表示させたい！そんなときにはこのコード…

記事本文直下にあれこれ表示させられる劇的に便利なコード

　こちらの『チップの日常』さんで紹介されているコード、これが劇的に便利。

<div id="my-footer">

【記事本文直下に表示させたいもののコードをここに追加しましょう】

</div>
<script>
var myFooter=document.getElementById("my-footer");var temp=myFooter.cloneNode(true);myFooter.parentNode.removeChild(myFooter);document.getElementsByClassName("entry-content")[0].appendChild(temp);
</script>

　関連記事だけに限らず【記事本文直下に表示させたいもののコードをここに追加しましょう】のところにコードを加えるだけで望みがかないます。

　しかもそれは1つだけではなくいくつでも。

　これではてなブログにおいて配置の自由度が増します。

サイドバーモジュールを利用した関連記事の線を消す

　サイドバーモジュールを利用して関連記事を記事本文直下に表示させた場合、記事と記事との間に線が入っているかもしれません。

　この線を消そうとおもいサイドバーモジュールの線を消してしまうと、サイドバーの線も消えてしまいます。なに言ってるかわかりづらいですよね…。

　要はサイドバーで使われている線は消したくないけれど、記事本文直下に表示させている関連記事で使われている線は消したいという方。その方はデザインcssに以下のコードを追加してみてください。

ul.related-entries.hatena-urllist li{border-top:0;}

　これで関連記事のところだけ線が消えるとおもいます。

　また、線以外にも文字サイズや色などを変えたい場合も、ここにfont-sizeやらcolorやらを指定してあげると、関連記事のところにだけそのデザインが適用されます。

　関連記事をテキスタイルで表示させようとおもったのは『やぎろぐ』さんの記事上下に表示されている「人気記事」や「おすすめ記事セレクション」を拝見し、こんな表示にしてみたいとおもったからです。

　ただどうも『やぎろぐ』さんではこれらを手動で行っているようで、わたしにはそんなマメさはございませんから、勝手に表示してくれないかな～と考えまして、こんな感じにしてみました。

記事下におすすめ記事を表示させたい

　記事下に関連記事ではなく【おすすめ記事】を表示したい！ということもあるでしょう。冒頭にあげた『やぎろぐ』さんにて紹介されていた関連記事を表示する方法のなかにもほんの少しだけ設定を変えたり、一部モジュールのコードを置き変えたりするだけでおすすめ記事を表示させることができるものもあります。

　また「はてなのサイドバーモジュールを利用した方法」と同様の手順でおすすめ記事を表示させることもできます。

　変えるのはこのあたり

注目記事「.hatena-module-entries-access-ranking」

最新記事「.hatena-module-recent-entries」

カテゴリー「.hatena-module-category」

表示させたいモジュールコードと置き換えてみましょう。

　【おすすめ記事】を表示させるにはこんな方法もあります。

<div id="recommend-entries">

<div id="recommend-entries-inner">

<div class="hatena-module hatena-module-entries-access-ranking"

data-count="5"

data-display_entry_category="0"

data-display_entry_image="1"

data-display_entry_image_size_width="320"

data-display_entry_image_size_height="200"

data-display_entry_body_length="0"

data-display_entry_date="0"

data-display_bookmark_count="1"

data-source="access" >

<div class="hatena-module-body">

</div></div></div></div>

というコードをそのままコピペすると、サムネイル画像とタイトル画像があわさったものが表示されます。

　このコードをそのままコピペすると人気記事上位5つの記事が表示されますが、2行目の「"5"」となっているところの数字を変えてあげれば表示させたい記事数を変えられます。

　また12行目の「data-source="access"」の「access」を「total_bookmark」にするとブックマーク数の多い順、「recent_bookmark」にすると新たにブックマークされた順になります。

　ここまではこちらのサイトで紹介されていることです。さらに横幅いっぱいに表示させる方法やブックマーク数を表示・非表示などの仕方についても紹介されておりますので、興味のある方はこちらのサイトを訪ねてみてはいかがでしょうか？

Innocentおすすめ記事表示の亜種

　あまりいらっしゃらないとはおもいますが、Innocentおすすめ記事表示のコードを利用してサムネイル画像は表示させずにテキストだけ表示させたいという方がいらっしゃるかもしれませんので、一応ご紹介します。

　先ほどのコードから画像などに関係したコードを除いて

<div class="hatena-module hatena-module-entries-access-ranking" data-count="5">

<div class="hatena-module-body">

</div></div>

とするとテキストのみのリンクを張ることができます。

一案としてこんなのどう？

　グローバルメニューを記事本文中に使っちゃうの。こんな感じ。

　↑これだと使い勝手あれだから1カテゴリーを紹介したいときなんかには使いようではないでしょうか。

　目を引くというか違和感は出せるでしょ？

　グローバルメニューのコードはこちらを参考にどうぞ。

　ただし記事本文中に表示させる場合は、リストコードを「編集見たまま」ではなく「HTML編集」に追加してください。

表示されないんだけど…な方へ。

　「Innocent」をはじめとしたcssにnavigationコードの記述のあるテーマをお使いの方はそのままでもよろしいのですが、cssにnavigationコードの記述のないテーマをお使いの方は、これは一例ですがデザインcssに以下のようなコードを加えてください。

　でないと通常のリスト表示で表示されます。

.main-navigation {font-size: 0.9em;}

.main-navigation,.main-navigation ul ul {background-color: #fbfbfb;}

.main-navigation ul {display: none;list-style: none;margin: 0;}

.main-navigation.toggled ul {display: block;}

.menu-toggle {cursor: pointer;}

.menu-toggle,.main-navigation a {
color: #222;
display: block;
line-height: 35px;
padding: 0 20px;
text-decoration: none;
}

.menu-toggle:hover,.main-navigation a:hover {color: #f03;background:#f1f1f1;}

.main-navigation a {border-top: 1px solid rgba(255,255,255,0.2);}

.main-navigation{text-align:center;}
.menu-toggle {display: none;}
.main-navigation-inner {margin: 0 auto;}
.main-navigation-inner ul {position: relative;left: -18px;}
.main-navigation ul {display: block;letter-spacing: -0.4em;}
.main-navigation ul li {
display: inline-block;
letter-spacing: normal;
position: relative;
}
.main-navigation ul ul {
box-shadow: 0 0 2px rgba(0,0,0,0.5);
letter-spacing: normal;
opacity: 0;
text-align: left;
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
width: 216px;
position: absolute;
top: 100%;
left: -9999px;
z-index: 9999;
}
.main-navigation ul ul li,.main-navigation ul ul ul li,.main-navigation ul ul ul ul li {display: block;}
.main-navigation ul li:hover > ul {opacity: 1;left: 0;}
.main-navigation ul ul ul {top: 0;}
.main-navigation ul ul li:hover > ul {opacity: 1;left: 100%;}
.main-navigation a {border-top: 0;padding: 0 18px;}
.main-navigation ul ul a {
border-top: 1px solid rgba(255,255,255,0.2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}}