Google Bloggerで記事には関連記事とかカテゴリー別のアーカイブなどのガジェット、それから検索窓などがあります
しかし閲覧者がピンポイントで記事を特定するのはなかなか難しいですね。
そこでブロガーブログに全記事を一覧で表示するサイトマップのページを自動作成しておくと便利です。
サイトマップページでのグルーピングはラベルごとです。全記事一覧で表示されると無駄なラベリングが目に付いたりして、整理整頓できるメリットもありますね。
jQueryの導入
ネットで配布されている Blogger Template を使っているのであれば、jQuery は既に追加されていると思います。
手っ取り早いのは jQuery CDN にリンクし、<head></head>に記述しておきます。
<script src="//code.jquery.com/jquery-3.7.0.js" type="text/javascript"></script>
jQuery CDN – Latest Stable Versions
ページの作成とコードの貼り付け
新規のページを作成して、ページに直接コードを貼り付けると簡単です。
ページのパーマリンクは "sitemap.html" にします。作成するページのタイトルにはアルファベットで sitemap と入力してから作成します。
スクリプト内に書き出すページを sitemap.html と指定しているので必ず sitemap.html にしてください。
スクリプトの貼り付け
スクリプトの中にご自身のブログURLを指定する箇所が３箇所があるので修正してください。
<div class="post-body sitemap">
<script type='application/ld+json'>
{
"@context":"http://schema.org",
"@type":"BreadcrumbList",
"itemListElement":[
{"@type":"ListItem","position":1,"name":"Home","item":"https://ブログのURL/"},
{"@type":"ListItem","position":2,"name":"Sitemap","item":"https://ブログのURL/p/sitemap.html"}
]
}
</script>
<script type='text/javascript'>
// 記事のタイトル、URL、公開日、ラベル、最近の投稿フラグを格納する配列
var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc"; // ソート基準の初期値
var numberfeed = 0; // フィードからのエントリ数
// Bloggerのフィードデータを処理するメイン関数
function bloggersitemap(a) {
function b() {
// フィードにエントリがあるか確認
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d; // 記事の総数を設定
ii = 0; // インデックスカウンター
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t; // 記事タイトル
var m = n.published.$t.substring(0, 10); // 公開日 (YYYY-MM-DD形式)
var j; // 記事URL
// alternateリンクから記事URLを取得
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "alternate") {
j = n.link[g].href;
break;
}
}
var o = ""; // enclosureリンクから画像URLなどを取得 (ここでは使用されていない)
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "enclosure") {
o = n.link[g].href;
break;
}
}
var c = ""; // 記事のカテゴリ（ラベル）
if ("category" in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(";");
if (f != -1) {
c = c.substring(0, f); // 複数のカテゴリがある場合の処理
}
// 各配列にデータを追加
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postPublished[ii] = o; // ここでは使用されていないが、データとして格納
// 最近の投稿かどうかを判定 (最初の10件を「New!」とする)
if (h < 10) {
postRecent[ii] = true;
} else {
postRecent[ii] = false;
}
ii = ii + 1;
}
}
}
}
}
b();
sortBy = "titledesc"; // ソート基準をタイトル降順に設定
sortPosts(sortBy); // 記事をソート
sortlabel(); // ラベルごとに記事をソート
displayToc(); // サイトマップを表示
}
// 記事をソートする汎用関数
function sortPosts(d) {
// 配列の要素を交換するヘルパー関数
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postPublished[e];
postPublished[e] = postPublished[g];
postPublished[g] = f;
var f = postRecent[e];
postRecent[e] = postRecent[g];
postRecent[g] = f;
}
// バブルソートアルゴリズム
for (var b = 0; b < postTitle.length - 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == "titleasc") { // タイトル昇順
if (postTitle[b] > postTitle[a]) {
c(b, a);
}
}
if (d == "titledesc") { // タイトル降順
if (postTitle[b] < postTitle[a]) {
c(b, a);
}
}
if (d == "dateoldest") { // 日付昇順
if (postDate[b] > postDate[a]) {
c(b, a);
}
}
if (d == "datenewest") { // 日付降順
if (postDate[b] < postDate[a]) {
c(b, a);
}
}
if (d == "orderlabel") { // ラベル順
if (postLabels[b] > postLabels[a]) {
c(b, a);
}
}
}
}
}
// ラベルごとにソートする関数
function sortlabel() {
sortBy = "orderlabel";
sortPosts(sortBy); // まずラベルで全体をソート
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
// 同じラベルのエントリをスキップ
do {
a = a + 1;
} while (a < postLabels.length && postLabels[a] == temp1); // 修正: 配列の範囲チェック
b = a;
// 同じラベル内のエントリを再度ソート (タイトル昇順)
sortPosts2(firsti, a);
if (b > postTitle.length) {
break;
}
}
}
// 特定の範囲内の記事をタイトル昇順でソートする関数
function sortPosts2(d, c) {
// 配列の要素を交換するヘルパー関数
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postPublished[f];
postPublished[f] = postPublished[h];
postPublished[h] = g;
var g = postRecent[f];
postRecent[f] = postRecent[h];
postRecent[h] = g;
}
// バブルソートアルゴリズム
for (var b = d; b < c - 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a);
}
}
}
}
// サイトマップを表示する関数
function displayToc() {
var a = 0; // 現在処理中の記事のインデックス
var b = 0; // 現在処理中のラベルグループの開始インデックス
// 全ての記事を処理するまでループ
while (b < postTitle.length) {
// 修正1: 配列の範囲外アクセスを防ぐための安全チェック
// bがpostLabelsの範囲内であることを確認
if (b >= postLabels.length) break;
temp1 = postLabels[b]; // 現在のラベル名を取得
// ラベル名とカラム構造のHTMLを出力
document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
firsti = a; // 現在のラベルグループの最初の記事のインデックスを保存
// 同じラベルを持つ記事を全て処理するまでループ
do {
// 修正2: 配列の範囲外アクセスを防ぐための安全チェック
// aがpostTitle、postUrl、postRecentなどの範囲内であることを確認
if (a >= postTitle.length || a >= postUrl.length || a >= postRecent.length) break;
document.write("<p>");
// 修正3: aタグのhref属性の記述ミスを修正 (<a " href=" -> <a href=")
document.write('<a href="' + postUrl[a] + '">' + postTitle[a] + "");
// 最近の投稿であれば「New!」を表示
if (postRecent[a] == true) {
document.write(' - <strong><span>New!</span></strong>');
}
document.write("</a></p>");
a = a + 1; // 次の記事へ進む
} while (a < postLabels.length && postLabels[a] == temp1); // 修正4: do...whileループの条件に配列の範囲チェックを追加
b = a; // 次のラベルグループの開始インデックスを設定
document.write("</div></div>"); // カラムとアーカイブのdivタグを閉じる
sortPosts2(firsti, a); // 同じラベル内の記事をタイトル昇順でソート (これは表示後に再ソートされるため、視覚的な効果は小さいかもしれません)
// 修正5: 最終的なループ条件の修正 (postTitle.lengthを超えたらループを終了)
if (b >= postTitle.length) {
break;
}
}
}
</script>
<!-- Bloggerのフィードから記事データを取得し、bloggersitemap関数をコールバックとして実行 -->
<script src="https://ブログのURL/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script>
<script type='text/javascript'>
// exportifyというグローバルオブジェクトで表示設定を定義
var exportify = {
noTitle: "No title", // タイトルがない場合の代替テキスト
postAuthor: true, // 投稿者を表示するか
authorLabel: "by", // 投稿者名の前に表示するラベル
postDate: true, // 投稿日を表示するか
dateLabel: "•" // 投稿日の区切り文字
}
</script>
</div>
このブログの記事一覧サイトマップ
0 comments:
コメントを投稿