[Blogger] QooQ関連記事デザインの改造方法

記事の下に出る「関連記事」デザインを改造したので、その方法を紹介します。QooQテーマが対象です。見た目をカード型にして、さらに投稿日と更新日を表示させました。ブログ更新も久しぶりですが、さらに久しぶりのBlogger改造ネタです（今回は日本語のみ）。

まず参考から

参考記事

今回はいきなり参考記事から紹介します。「ふじろじっく」さんの以下の記事です。

ふじろじっくさんにはBlogger改造でかなりお世話になっています（この記事には私のコメントも残ってますね）。

独自の工夫

当ブログでは、「カードタイプ」デザインを使わせていただき、それに少し自分なりの工夫を加えました。

1. 投稿日、更新日とアイコンを表示する
2. 更新日が新しい順に表示させる
3. サムネイルにカーソルを合わせるとちょっと拡大する
4. 文字にカーソルを合わせるとピョコっと上に飛び出る

この4つです。

と思ったら…

先日、「ふじろじっく」管理人のふじやんさんからTwitterで連絡があり、「当ブログの投稿日表示を真似してみた」とのこと。ソースコードのぞいただけでできたんですね。すごい。見た目もきれいだし、あちらを参考にした方が良いと思います（つまり丸投げ）。

ピョコピョコ動かすのは「タイトルが長くて枠に収まりきらないのを何とかするため＋何となくおもしろいから」で、ふじやんさんは長いタイトルを途中で切ってスマートに対処してます。更新日を表示したり新しい順に並べるのも良し悪しだなと自分で思ってます。

Blogger仕様変更による影響(2021/3/23)

QooQでは「リアクションボタン」というのを利用して関連記事の表示・非表示を切り替えられるようにしていたのですが、Bloggerの仕様変更によりこれが廃止され、その影響でQooQの関連記事が表示されなくなってしまったようです。その対策も前述の「ふじろじっく」さんの記事に書かれているので、そちらを参照ください（とことん丸投げ）。

というわけで

この記事では、QooQテーマの「関連記事」デザイン改造方法を紹介しました。と言っても、ソースコードもなく別記事の紹介のみで…。適当でごめんなさい。でも、ふじやんさんの記事を見れば本当に十分です。再掲します。

もし、それでも「このブログのが使いたい！」という方がおられたらソースコードと改造方法を追記するので、お気軽にコメントください。

おわりに

この記事では、QooQ関連記事カスタマイズ（の参考記事）について紹介しました。Blogger改造は手軽にHTML, CSS, JavaScriptを学べて楽しいので、興味のある方はぜひ取り組んでみてはいかがでしょうか。

当ブログで実施した改造は以下の記事にまとめているので、参考になれば幸いです。

最近、筆者は音楽制作の方に熱中しています。なのでBlogger改造記事に時間を割けず、気が向いたら書くスタイルにしています。需要があればなるべくお応えしたいので、お気軽にコメントしてください。また、もし興味があれば私の作品を聴いてみてください。まだまだ未熟ですが、いろいろ試行錯誤しながら楽しんでます。感想いただけたら喜びます。