cBlog

Tips for you.

公式関連記事を好きな位置に移動させるスクリプトを書いてみた

スポンサーリンク
※当ブログのAmazon、iTunes、サウンドハウス等のリンクはアフィリエイトを利用しています。

更新:2018-05-07

#コード追加位置修正しました

関連記事表示例

出典:staff.hatenablog.com

 

サッカー観るから手短に。

公式の関連記事機能がリリースされましたね。

staff.hatenablog.com

私の場合、勝手にONにされる以外はポジティブな印象を抱いています。その理由は、それよりカスタマイズ方法が先ですよね。

 

カスタマイズ方法

次のコードは、関連記事を任意の要素の直後に挿入するものです。記事下のHTML欄に追加してください。

<script>
var temp = document.getElementById('entry-footer-secondary-modules');
var upper = document.getElementsByClassName('UPPERCLASS')[0];
upper.parentNode.insertBefore(temp, upper.nextSibling);
</script>

UPPERCLASSは移動させたい場所の直前のclassに置き換えてください。例えば私の場合、こうなっている

[公式ソーシャルパーツ]

[関連記事]

[FOLLOWボタン]

のをこう

[公式ソーシャルパーツ]

[FOLLOWボタン]

[関連記事]

変えたいので、UPPERCLASSは[FOLLOWボタン]のclassになります。

 

このくらいならCSSでもいけるか… 誰か書くでしょう。

 

感想

同じカテゴリーの記事を表示させるだけのやつより、内容に基づき選ばれた方がいいと思っています。

記事下の関連記事では、本文の内容から類似するとみられる記事を選出しています。類似する記事がないときに「関連記事」欄そのものが表示されないことがあります。記事の選出方法は、今後も状況により調整することがあります。

パッと見た限りだとちゃんと違うカテゴリーの記事も表示されているようなので、願っていたやつです。マッチング度は今後に期待。

 

過去記事には更新しない限り表示されない件ですが、ちょうど一昨日からカテゴリーの振り直しをしていたので一石二鳥です。あなたもこの機会にどうですか?

[追記 2017/06/21]
2017年6月19日から、相応のアクセスがあるブログなど、条件によっては過去に更新された記事についても表示されるようになりました。

 

Google+とPocketのシェア数が以前の方法で取得できないようになったあたりから、仕様変更に振り回されるより公式で提供されるものをなるべく受け入れようかなと考えが変わりました。それで、シェアボタンは公式のものを使っています。思い通りにしたいなら自分でサーバー立ち上げればいいんじゃないかなと思うわけです。代わりにセキュリティとデータ損失のリスクが待ってますけど。

 

要望としては、たったこれだけ本文を表示させるぐらいならタイトルの文字数を多くしてほしい。デザインのカスタマイズですが、今のうちはコロコロ仕様が変わりそうなので様子見。とりあえずは、「関連記事」というタイトルと、サムネイルのサイズ、記事のタイトルや本文の文字数をいじれるようにしてほしいと思います。