カテゴリごとの新着記事一覧をトップページに出す(メモ)

f:id:c-miya:20170424220102j:plain 前に書いた「別記事内に書いたテンプレートを呼び出して記事内に表示する」を使えば、トップページにカテゴリごよの新着記事一覧を表示できるのでは?と考えたのでメモ。

やり方

<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script>
<script>
$(function(){
$("#zzz").load("カテゴリの記事一覧ページのURL #main-inner");
});
</script>
<div id="zzz"></div>
<style>
    .entry-thumb-link{display:block;width:120px;height:120px;float:left;margin:0 0.5em 1em 0;}
    .entry-thumb{width:120px;height:120px;}
    #zzz section{overflow:hidden;}
    #zzz section:nth-of-type(n+4){display:none;}
</style>
  • 呼び出すことはできるので、あとはcssなんかを調整すればOK
  • でも結局ページ内の全部呼び出してしまうのでページの読み込みは遅くなる?
  • まぁそれはいいや
  • サムネイルは.entry-thumbあたりをちゃんと調整しないと表示されない。
  • そのままヘッダなどに入れると全ページに表示される。javascriptのif文でトップページのときのみ実行するようにする。

Wordpressでサイト作る時は、こういったカテゴリごとの新着一覧とか簡単に好きなだけ表示できたんだけど、はてなブログではデフォルトではトップページは新着リストでしかない。今回のを使って呼び出せば、なんかWordpressっぽいのができるんじゃないか。

アイキャッチの呼び出し

以前、トップページで各記事のアイキャッチ画像を呼び出すにはどうしたら良いのか、だいたいの考え方は書いた。でも実際にそれをやってたのを何処かで見たんだけど思い出せなかった。それの元が判明した。

で、最終的にこれ。

いろいろやりたい

これらを組み合わせれば、けっこう自分のやりたいようなトップページにできるかも。ただ、javascriptとかで無理やりやっているので、結局テーマにはできない。「誰でも使えるように」というのは面倒。まぁとりあえず自分用に自己満でやればよろしい。

というか、明日から台湾なので、完全に「テスト前になると掃除したくなる」系だこれ。