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

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

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

通常は「本文」→「関連記事」→「カスタマイズした記事下」の順番になりますが、これを「本文」→「カスタマイズした記事下」→「関連記事」とひっくり返します。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弾、と私は見ています。(希望的観測)

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