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

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

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

INDEX

やり方

<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とかで無理やりやっているので、結局テーマにはできない。「誰でも使えるように」というのは面倒。まぁとりあえず自分用に自己満でやればよろしい。

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

シェアしてね!

この記事を書いた人

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

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

INDEX