当ブログ（https://over30blog.hatenablog.jp/）について
「無料版のはてなブログ」を使用しております。
無料版のはてなブログは、
「TOPページをカスタマイズしづらく、基本的には記事一覧の取得はできません」
しかしながら少し工夫をしてみると、
無料版のはてなブログでも記事一覧の取得を意外と簡単にできちゃいました。
当記事ではブログTOPに記事一覧表示させる手順について解説します。
※ITスキル必須です。
はてなブログで記事一覧取得の仕方
考え方は以下のような感じ
- １．TOPページ用の記事を新規作成する。
- ２．ajaxで記事一覧を取得
- ３．取得した記事は「display:none」で隠しておく
- ４．記事を開くボタンを用意。ボタンクリックで取得した記事の「display:none」を解除させる
- ５．TOPページへ固定表示にする。
2番のajaxでの記事取得が少しむずかしいですが他はとても簡単です。
STEP1 TOPページ用の記事を新規作成する。
TOPページ用の記事を作成します。
以下のボタンから作成し、こちらの記事にTOPページを作成します。
※注意点が１つあります。
「投稿日時」です。これを設定しないと「最近の記事でTOPへ表示」されてしまうので
ブログ開設日などの過去日に設定しましょう。
↓私の場合は「2020-01-17」に設定。
STEP2,3 ajaxで記事一覧を取得 ＆ 取得した記事を隠しておく
私のブログの場合は、以下の画像の枠で囲っている部分（＝カテゴリ毎で）を取得しています。
コードはこんな感じ。
・HTML (display: noneの設定かつ、中身が空のdivを用意しておきます。私のブログではカテゴリが4つあるので4つ用意しています)
<div id="content1_list" style="display: none;"> </div>
<div id="content2_list" style="display: none;"> </div>
<div id="content3_list" style="display: none;"> </div>
<div id="content4_list" style="display: none;"> </div>
・javascript（ajaxで記事を取得し先程用意していたdivへ挿入します）
このスクリプトはページ読み込み時に起動させるようにしておきます。
<script>
$(function(){
//カテゴリの分だけ配列を定義する
let ar = [
'URLを入れる1',
'URLを入れる2',
'URLを入れる3',
'URLを入れる4'
];
//カテゴリの文だけループさせる
for(let i = 0; i < ar.length; i++) {
$.ajax({
url: ar[i], // 表示させたいコンテンツがあるページURL
cache: false,
datatype: 'html',
success: function(html) {
var title = $(html).find('.entry-title a'); // 記事のタイトルとリンクを取得しています
var image = $(html).find('.entry-thumb'); // 記事の画像を取得しています
for(var i2 = 0 ; i2 < title.length ; i2++){
$('#content' + (i + 1) + '_list').append(image[i2]); // append関数で指定先の要素へ出力
$('#content' + (i + 1) + '_list').append(title[i2]); // append関数で指定先の要素へ出力
$('#content' + (i + 1) + '_list').append('<div style="clear: both;height:40px;"></div>'); // append関数で指定先の要素へ出力
}
}
});
}
});
</script>
STEP4 ボタンクリックで取得した記事を開く
以下のボタンの部分になります。
コードはこんな感じ。
・HTML (ボタンを用意します。私のブログはカテゴリが4つなので4つ用意します。 ※CSSは別途です)
<button id="content1" class="button_list">記事一覧を開く</button>
<button id="content2" class="button_list">記事一覧を開く</button>
<button id="content3" class="button_list">記事一覧を開く</button>
<button id="content4" class="button_list">記事一覧を開く</button>
・javascript（class="button_list"を押下された場合のイベントを用意します。）
<script>
$('.button_list').click(function() {
var id_name = '#' + $(this).attr('id') + '_list';
console.log(id_name);
if($(id_name).css('display') == 'none' ) {
$(id_name).show('slow');
$('#' + $(this).attr('id') ).css('display','none');
}
})
</script>
これでコーディング作業は完了です
STEP5 TOPページへ固定表示にする。
ここまでこれば後はかんたんです。
以下の添付画像の通り、
今回作成したTOPページ用の記事を「記事の管理ー＞TOPページへ固定表示にする」に設定。
また、ブログTOPページの記事数を「１つ」に設定しておきましょう。
以下の添付画像の通りに設定出来ます。
設定ー＞詳細設定ー＞トップページの記事数（PC版）
完成！＼(^o^)／
完成した私のTOPページはこちらです。
