MiscNote

ブログ(自作静的サイト)に新着記事一覧を実装する

このブログ、というかこのサイトはほとんど静的サイトです。しかも「BlueGriffon」というHTMLエディターを使ってペチペチとタグを打ち込んで作成しています。

窓の杜

「BlueGriffon」“Gecko”ベースのHTML5/CSS3対応HTMLエディター

本当は「静的サイトジェネレータ」みたいなやつでページを一括作成!とかできたら楽なのでしょうが…
各ページのレイアウトを細かく弄りたい!という私には向いてなかったみたいです😅
(一応トライしてみたけど難しくて断念したとも言うw)
昔ながらの作り方で何とか頑張っております…w

で、ブログサービスなども使わずちまちま作っているわけですが、手打ちで作っているとふと「ブログサービスにはつきものの○○を実装したい」とか思ったりするわけです。
今回はその中でも『新着記事一覧』の実装に取り組んでみました。何とか形になったので、作業手順をメモ代わりに書いていきたいと思います。

目次

実装方法

単純な『新着記事一覧』を作るだけなら、

・<a href="xxx01.html">○○について</a><br>
・<a href="xxx02.html">✕✕について</a><br>
・<a href="xxx03.html">△△について</a>

のような形で書いていけばいいのですが、この形だと記事を書く度、『新着記事一覧』を載せたページを一々更新しなければならなくなります。それはすごく面倒くさい!
トップページだけでなく各記事の一番下にも設置したいと思っていたので、なんとか更新を自動化できないかと考えたのです。

どういう形なら実装できるか考えた結果、「記事一覧のページを作成し、そこから”新着記事”と設定した記事のみ抜粋して表示する」という形にしてみました。『jQuery の load()』を使っています。

参考にしたサイトはこちら↓
【jQuery入門】load()でHTMLを読み込む方法! | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
jQuery load() を使って別のページの見出しを表示する | Web Design Leaves

記事一覧から新着記事を抜き出す

まずは記事一覧をつくります。(実際のページはこちら)
そして各記事のリンクの中で、『新着記事一覧』に記載したいリンクを class="new" 指定した<div>タグで囲みます。

<div class="new"><a href="https://miscnote.mods.jp/blog/20200602-entry-01/">Moonlighterダンジョンプレイ中にマップを確認する</a></div>
<div class="new"><a href="https://miscnote.mods.jp/blog/20200513-entry-01/">ルーターを買い替えた(WSR-2533DHP3)ら有線接続が頻繁に切断された話</a></div>
<div class="new"><a href="https://miscnote.mods.jp/blog/20200318-entry-01/">Moonlighterの疑問あれこれをまとめてみた</a></div>

※実際は他タグも記述されてますが、説明している要素だけ抜粋しました。

そして『新着記事一覧』を表示したいページに、

<script>
jQuery(function($){
$('#list1').load('https://miscnote.mods.jp/blog/list-of-articles.html .new');
});
</script>

を記述します。
※私は↑から更にjsファイルに記述して呼び出す形にしました。
(参照:【JavaScript入門】外部JSファイルを読み込んでみよう | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト)

そして『新着記事一覧』を載せたい場所に、

<div id="list1"></div>

を記述することで、class="new" で指定した記事の一覧が表示されるようになりました!

今後新しい記事を書いたときは、記事一覧にリンクを追加して、<div class="new">タグを移動してあげればOK。
少し面倒ですが、色々考えた結果これが一番スムーズに運用できるかなと。

最後に

まとめてみるとすごく簡単になってしまいましたが… ここに行き着くまでが大変でした😅
更新の手間などを考えると、手打ち静的サイトだと結構制限があって…不便だなとは思いますが、その分すごく勉強になっている気がします。

※2020/9/14 上記事からさらに修正・改善したので記事にしました↓


記事作成日 2020/07/07 22:02

関連記事
新着記事