関連記事と記事下の順番を変えたり、いろいろカスタマイズ

当ページのリンクには広告が含まれています。

はてなブログに自動で「関連記事」が表示され始めたので、前回サラッと見てみました。それで、その時は「関連記事が記事本文の直下にあって使いにくい、カスタマイズした記事下と入れ替えたい」みたいに書きましたが、あっさりできたので共有します。

INDEX

記事下と順番を入れ替える

通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。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で、数字の小さいものから順番に並びます。なので今回の場合は一番最初に来て欲しい.googleadorder:-2;を、2番めに来て欲しい.entry-footer-modulesorder:-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弾、と私は見ています。(希望的観測)

はてなブログの今後の発展が楽しみです。

シェアしてね!

この記事を書いた人

静岡県静岡市清水区在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。

INDEX