はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。
記事下と順番を入れ替える
通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。cssだけで簡単にできます。
css
.customized-footer{ display:-webkit-flex; display:flex; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; }
これだけで「関連記事」と「記事下」が入れ替わります。
ちょっと細かい解説
関連記事と記事下の部分のhtmlは簡単に書くと以下のような構造になっています。
<div class="customized-footer"> <div class="entry-footer-modules" id="entry-footer-secondary-modules"> <div class="hatena-module hatena-module-related-entries"> 関連記事 </div> </div> <div class="entry-footer-html"> 記事下 </div> </div>
.customized-footerというクラスのdivの中に.entry-footer-modulesと.entry-footer-htmlという2つのdivが直下としてあります。.entry-footer-modulesは今回の関連記事が入っています。（この書き方だと今後も何か追加される気がします。）.entry-footer-htmlには「記事下」でカスタマイズした部分が入ります。
関連記事と記事下がどちらも.customized-footerの中で同列に置かれていますので、flexboxを使ってこれらを「下から上へ垂直に配置」というようにしています。flexbox便利！
記事下の要素の間に入れる
次に、記事下にいくつか要素があり、その間に関連記事を入れたい場合です。
例として、記事下に「広告を表示する.googlead」「シェアボタンを表示する.snsbtns」を入れてあるとします。この間に関連記事を入れます。
html
「記事下」にちょっと記述を加えます。先に書いておきますが、ちょっと邪道です。
</div> 以下、今まで記事下に書かれていた部分 <div class="googlesd">広告</div> <div class="snsbtns">シェアボタン</div> <div>
つまり、「記事下」の1番上に</div>を入れ、最後に<div>を加えています。
css
.customized-footer{ display:-webkit-flex; display:flex; -webkit-flex-direction: column; flex-direction: column; } .entry-footer-modules{ -webkit-order:-1; order:-1; } .googlead{ -webkit-order:-2; order:-2; }
これで「広告」→「関連記事」→「シェアボタン」になります。
ちょっと細かい解説
記事下の最初に</div>を入れ、最後に<div>を入れたことで、html構造は以下のようになります。
<div class="customized-footer"> <div class="entry-footer-modules" id="entry-footer-secondary-modules"> <div class="hatena-module hatena-module-related-entries"> 関連記事 </div> </div> <div class="entry-footer-html"> </div> 記事下 <div class="googlead"> </div> <div class="snsbtns"> </div> <div> </div> </div>
関連記事.entry-footer-modulesと同列であった.entry-footer-htmlが、最初に</div>を入れたために中身に何もないものになりました。つじつまを合わせるために最後にも<div>を入れています。
これで、関連記事.entry-footer-modulesも記事下を包括するはずだった.entry-footer-htmlも、広告の.googleadも、シェアボタンの.snsbtnsも同列になりました。
これらを含む.customized-footerに先ほどと同じようにflexboxを使います。flexboxのプロパティには、並び順を変更するものがあります。それがorderです。デフォルトが0で、数字の小さいものから順番に並びます。なので今回の場合は一番最初に来て欲しい.googleadにorder:-2;を、2番めに来て欲しい.entry-footer-modulesにorder:-1;を設定しています。.snsbtnsはデフォルトの0のままで問題ないので何も記述しません。
「記事下」の上下に</div><div>を入れるというのがちょっと邪道な気がしますし、後々トラブルのもとになる可能性もありますが、とりあえずはこれで順番を自由に入れ替えることができます。注意点としては、「記事下」の要素が全てそれぞれ<div>～</div>で囲まれていたほうが（たぶん）いいということです。
そのほかのカスタマイズ
そのほか、関連記事で使えそうなカスタマイズをいくつか紹介します。
2列にする
前回「カード風」として書きましたが、これもflexboxを使って簡単です。
.related-entries{ display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; } .related-entries-item{ width: 49%; border:1px solid #e0e0e0; border-radius:2px; margin: 0 0 1em 0; padding: 1em; }
.related-entries-itemのwidthの値を調整すれば3列にもできます。ただ、関連記事は5つまでしか表示できないようなので、やっても2列じゃないかな、と思います。
○○を非表示にする
関連記事の中で表示したくない項目を消すには、みんな大好きdisplay:none;を使えばOKです。
サムネイルを消す
.related-entries-image-link{ display: none; }
日付を消す
.related-entries-date-link{ display: none; }
冒頭文を消す
.related-entries-entry-body{ display: none; }
リストの5番目を消す
.related-entries-item:nth-of-type(5){ display: none; }
「関連記事」の表示を別の名前にする
デフォルトでは「関連記事」と表示されているものを「あわせて読みたい」に変更します。
.hatena-module-related-entries .hatena-module-title{ font-size:0; } .hatena-module-related-entries .hatena-module-title::before{ content:'あわせて読みたい'; font-size:1rem; }
元々書かれている「関連記事」の文字をfont-size:0;で消しています。そのままでは「あわせて読みたい」の方も消えているので、こちらもfont-sizeを自分の好きな値に変更してください。
サムネイルを大きくする
javascriptでできるはず。つばささん(id:tsubasa123) の「記事一覧ページをカード型にするカスタマイズ」のサムネイルのURLを変更するやり方をちょっと改造すれば行けるはず。（下記参考）
一応下記で元のアイキャッチ画像に変更できたけど、私はjavascript詳しくないので、きっとつばささんがちゃんとしたのを書いてくれるはず。
<script> if (! document.URL.match("/archive")) { [].forEach.call(document.querySelectorAll('.related-entries-image'), function(n) { let img = n.src; img = img.substring(4, img.length - 1).replace(/"/g, ''); n.src = img.split('/').pop().replace('%3A', ':').replace(/%2F/g, '/') + 'g'; }); } </script>
大きなアイキャッチ画像さえ手に入れば、あとはcssで好きに調理できるはず。
まとめ
最初に見た時は割と不自由かな？と思った関連記事ですが、ちゃんと見てみればいろいろいじれそうです。良かったよかった。
また、htmlをよく見てみると関連記事は.entry-footer-modulesで囲まれているので、同じ位置に今後もほかのモジュールを加えられるようになるのではないか？という予想（希望）が見えます。複数のモジュールが設定できるようになれば、順番も入れ替えできるようになるんじゃないでしょうか。今回のものはあくまで第1弾、と私は見ています。（希望的観測）
はてなブログの今後の発展が楽しみです。
