Gemini との打合せ (全貌)

 


本当に人間とやり取りしているようです。

先生の言っていることは分からないのですが、手取り足取り、言われたとおりやったら、出来た・・・というやつです。

以下、打合せ内容の全部です。

(薄緑色の背景色のところが素人の質問部分です。)

============================================================================

Bloggerサイトマップ表示復旧方法                                       

「google blogger」におけるサイトマップについて

次のブログでサイトマップを表示していました。

https://taxasakawa0123.blogspot.com/

ところが、いつの間にか表示がなくなりました。

サイトのHTMLは、次のものでした。


     <div id="bp_toc">

    </div>

    <script src="https://mybloggerlab.com/js/sitemap.js" type="text/javascript"></script>

    <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>


このすべてを置き換えてサイトマップを表示したいです。

表示対象は、私のブログの全部です。

置き換えるHTMLを教えてください。


ブログのサイトマップが表示されなくなったとのこと、お困りのこととお察しします。

原因は、以前使用していた外部サイト(mybloggerlab.com)のサーバーが停止しているか、リンク切れを起こしている可能性が高いです。外部サイトに依存するスクリプトは、そのサイトの仕様変更や停止の影響を直接受けるため、今回のような事象が発生しやすくなります。

今後は「外部のスクリプトに依存しない(Blogger自身のフィード機能のみを使う)」シンプルな構成に切り替えることを強く推奨します。以下に置き換え用のコードを記載します。

置き換え用コード

以下のコードを、これまで記述していた場所にそのまま貼り付けてください。

HTML

<div id="bp_toc">読み込み中...</div>


<script type="text/javascript">

// ブログのフィードを読み込んだ後の処理

function onLoadFeed(json) {

    var container = document.getElementById('bp_toc');

    var entries = json.feed.entry;

    var html = '<ul>';

    

    if (entries) {

        for (var i = 0; i < entries.length; i++) {

            var title = entries[i].title.$t;

            var url = entries[i].link.find(function(l) { return l.rel === 'alternate'; }).href;

            html += '<li><a href="' + url + '">' + title + '</a></li>';

        }

    } else {

        html += '<li>記事が見つかりませんでした。</li>';

    }

    

    html += '</ul>';

    container.innerHTML = html;

}

</script>


<script type="text/javascript" src="https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&callback=onLoadFeed"></script>

実装のポイントと注意点

    1. 仕組み: このコードはBloggerが標準で持っている「フィード機能」を呼び出し、記事のタイトルとリンクを自動的に取得してリスト化します。外部サイトのサーバーを介さないため、将来的にスクリプトが使えなくなるリスクがありません。

    2. デザイン(CSS): 上記コードだけでは、サイトマップはシンプルな箇条書きリストとして表示されます。もし見栄えを整えたい場合は、テンプレートのCSS編集画面(テーマ>カスタマイズ>上級者向け>CSSを追加)に以下のような追記を行うと綺麗になります。

CSS

#bp_toc {

    margin: 20px 0;

}

#bp_toc ul {

    list-style: none;

    padding: 0;

}

#bp_toc li {

    margin-bottom: 8px;

    border-bottom: 1px solid #eee;

    padding-bottom: 5px;

}

#bp_toc a {

    text-decoration: none;

    color: #333;

}

#bp_toc a:hover {

    color: #007bff;

}

    3. 記事数: 現在 max-results=9999 としていますので、ブログの全記事が網羅されます。万が一ブログの記事数が非常に多く(数百記事以上)、ページの読み込み速度が遅くなる場合は、この数値を適宜調整してください。

上記コードを貼り付けるだけで、再びサイトマップが表示されるはずです。ぜひお試しください。


ありがとうございます。

どういたしまして!無事にサイトマップが表示されるようになれば幸いです。

また何かブログのカスタマイズやBloggerの設定でお困りのことがあれば、いつでもお気軽にお声がけください。応援しております!


続きです。このブログの

先ほどご相談いただいたブログの件ですね。 メッセージが途中で切れているようです。

このブログについて、何か追加でご質問やご相談がありますでしょうか? (サイトマップの表示確認や、別の箇所のカスタマイズ、あるいは何か別のトラブルなど)

続きを教えていただければ、引き続きお手伝いしますので、どうぞお気軽に入力してください。


このブログの最初の記事は、2015年12月11日 HPを公開 です。これが今回のサイトマップに表示されていないように思います。

ご報告ありがとうございます。サイトマップに特定の記事が表示されていないとのこと、原因として考えられる可能性が2つあります。

確認のために、以下の点をご確認いただけますでしょうか。

1. その記事は「投稿」ですか?それとも「固定ページ」ですか?

これが最も可能性の高い原因です。

Bloggerのフィード配信機能(/feeds/posts/default)は、基本的に**「投稿(記事)」のみを対象としています。 もし「2015年12月11日 HPを公開」という記事が、Bloggerの管理画面上の「固定ページ」**機能で作成されている場合、現在のスクリプトでは取得することができません。

    • 確認方法: Blogger管理画面のメニューで、「投稿」一覧の中にその記事があるか、「固定ページ」一覧にあるかをご確認ください。

    • もし「固定ページ」であれば、残念ながらBloggerの標準フィード機能でリスト化することは仕様上できません(手動でリストに追記する必要があります)。

2. 「投稿」であっても、フィードの上限に達している可能性

もしその記事が間違いなく「投稿」である場合、ブログの総記事数が非常に多い(数百件以上ある)と、Bloggerのフィード取得数に上限がかかっている可能性があります。

Bloggerの仕様上、一度のJSONリクエストで取得できる件数には上限(一般的に500件程度)があります。それ以上の記事がある場合、古い記事がリストから漏れてしまうことがあります。


対処方法の切り分け

もし「投稿」なのに表示されない場合: 記事が多すぎる可能性があります。もしそうであれば、現在のコードでは改善が難しいため、サイトマップを「記事の更新順」ではなく「月別アーカイブ」形式にするか、特定のカテゴリ(ラベル)ごとにサイトマップを分ける方法が一般的です。

もし「固定ページ」だった場合: 残念ながら自動取得の対象外となります。その場合は、HTMLコード内の <ul> ... </ul> の中に、手動で以下のように追記していただくのが確実です。

HTML

<div id="bp_toc">

    <ul>

        <li><a href="【実際のURL】">2015年12月11日 HPを公開</a></li>

        </ul>

</div>

まずは、管理画面でその記事が「投稿」として扱われているか、「固定ページ」として扱われているかをご確認いただけますでしょうか?それが分かれば、より具体的な対策をご提案できます。


見てみます。

了解いたしました。ご確認、よろしくお願いいたします。

もし以下のどちらかによって解決策が変わりますので、結果が分かりましたらまたお知らせください。

    • 「固定ページ」だった場合: Bloggerの標準フィード機能では自動取得できないため、HTML内にその記事のリンクを手動で追記する形になります。

    • 「投稿」なのに表示されない場合: 記事数制限など別の原因がある可能性があります。

結果に合わせて、最適な方法を一緒に考えましょう!お待ちしております。


続きです。次のとおりでした。


・全部が投稿です。

・投稿の数も200件以下です。

・最初の投稿は「2015年12月11日 HPを公開 」 です。

・サイトマップに表示されるのは、「2018年4月7日 元野球選手の申告漏れ (2) 」です

分かりますか?


その状況、非常によく理解できました。全投稿数が200件以下であるにもかかわらず、途中の2018年以前が表示されない場合、「Bloggerの設定」または「フィードの取得制限」が原因である可能性が高いです。

スクリプトに問題があるのではなく、Blogger側が「古い記事をこれ以上配信しない」という制限をかけている状態です。以下の手順で解決できるか試してみてください。

原因1:Bloggerの「メインページに表示する最大投稿数」制限(最有力)

Bloggerの設定には「メインページに表示する最大投稿数」という項目があり、これがフィード出力にも影響を与えることがあります。

    1. Blogger管理画面の左メニューから「設定」を開きます。

    2. 「サイトのフィード」という項目を探します。

    3. その中にある「投稿の最大表示数」(または類似の設定)を確認してください。

        ◦ もしここが「10」や「20」などの小さい数字になっていたら、これがフィードの出力数制限になっている可能性があります。

        ◦ 一旦ここを、現在の全投稿数(例えば200)よりも大きい数字(500など)に設定し、保存してください。

※設定変更がブログに反映されるまで数分かかることがあります。設定後に再度ブログを確認してください。


原因2:フィードの読み込み順序の問題

現在指定しているフィードURLに、「公開順に読み込む」という指示を明示的に加えることで、改善する場合があります。

以下のコードの <script type="text/javascript" src="..."> の部分を、下記のように &orderby=published を追加したURLに書き換えてみてください。

修正前:

HTML

<script type="text/javascript" src="https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&callback=onLoadFeed"></script>

修正後:

HTML

<script type="text/javascript" src="https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&orderby=published&callback=onLoadFeed"></script>


原因3:記事の属性(念のための確認)

非常に稀ですが、2015年から2018年までの記事が、何らかの理由で「下書き」に戻っていたり、あるいは「アーカイブ」用ラベルが外れていたりすることはありませんか?

管理画面の「投稿」一覧で、該当の古い記事が「公開済み」ステータスになっているか、念のためご確認ください。


まずは「原因1(設定の最大表示数)」を変更してみて、改善するか様子を見ていただけますでしょうか? もし設定を変えても状況が変わらない場合は、お手数ですが再度お知らせください。別の方法を検討します。


「原因1」に基づき 13を500にしました。

「原因2」の「修正後:」に置き換えました。

「原因3」は下書きになっていません。「ブログアーカイブ」で開けます。

対策がありますか?

設定変更ありがとうございます。

200件以下であるにもかかわらず古い記事が表示されない場合、「ブログのデータ自体がフィードとして吐き出されていない」か、「取得スクリプトが途中で止まっている」かのどちらかが原因です。

切り分けのために、まずはブログのデータそのものがフィードとして出力されているかを確認しましょう。

手順:フィードの中身を直接確認する

以下のURLをクリックして、ブラウザで開いてみてください。

https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json&max-results=500

    1. ページが開くと、英数字の羅列(コード)が表示されます。

    2. そのページ内で、検索機能(Windowsなら Ctrl + F、Macなら Cmd + F)を使って、2015 または HPを公開 という文字を検索してください。

【結果の判定】

    • A:検索してもヒットしない場合 Bloggerのシステムが、古い記事をフィード(外部配信データ)として出力していません。この場合、設定画面の「フィードを許可する」や「最大表示数」の設定が、古い記事には適用されていない可能性があります。

    • B:検索してヒットした場合 データ自体は存在しています。つまり、現在設定しているスクリプト側で取得に失敗していることになります。


どちらの結果でしたでしょうか? 結果に合わせて、次の対応(コードの修正案など)をご案内します。お手数ですが、確認結果を教えていただけますか。


「A:検索してもヒットしない場合」でした。

「A:検索してもヒットしない」という結果は、ブログの設定やコードの問題ではなく、「Blogger側のフィード配信仕様(アーカイブの古い記事は一定数を超えるとフィードに出力されない)」という制限によるものです。

残念ながら、Bloggerのフィード(RSS)は全記事を永遠に保持する仕様ではなく、システム側で古い記事が自動的にフィード出力から除外されてしまうことがあります。そのため、スクリプトでどれだけ設定をいじっても、ブログのデータ自体が届いていない以上、表示することはできません。

この問題を解決する唯一かつ最も確実な方法は、「表示されない古い記事のリンクを、HTMLに手書きで直接記述する」ことです。

解決策:手動で記事リンクを追加する

現在のコードの div タグの中に、手動で記事を追加しましょう。以下のように書き換えると、スクリプトで取得できる新しい記事に加えて、手動で書いた古い記事も表示されるようになります。

HTML

<div id="bp_toc">

    <ul>

        <li><a href="【2015年12月11日の記事のURL】">2015年12月11日 HPを公開</a></li>

        </ul>

    </div>


<script type="text/javascript">

function onLoadFeed(json) {

    var container = document.getElementById('bp_toc');

    var entries = json.feed.entry;

    // 既存のリスト(手動分)を消さないように、ulタグの中身に追加する処理へ変更

    var ul = container.querySelector('ul') || document.createElement('ul');

    

    if (entries) {

        for (var i = 0; i < entries.length; i++) {

            var title = entries[i].title.$t;

            var url = entries[i].link.find(function(l) { return l.rel === 'alternate'; }).href;

            var li = document.createElement('li');

            li.innerHTML = '<a href="' + url + '">' + title + '</a>';

            ul.appendChild(li);

        }

    }

    if (!container.querySelector('ul')) {

        container.appendChild(ul);

    }

}

</script>


<script type="text/javascript" src="https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&orderby=published&callback=onLoadFeed"></script>

この対応のポイント

    1. 手動追記の安心感: フィードの制限にかかわらず、<ul>タグ内に書いたリンクは必ず表示されます。

    2. スクリプトの自動追記: JavaScriptが、手動で書いたリストの後ろに、自動取得できた最近の投稿を自動的に追加していきます。

    3. 管理: 2018年以前の「表示されていない古い記事」だけを <li>...</li> で手動で書き足せば、サイトマップが完成します。

フィードの制限はBlogger側の仕様のため、これ以上の自動化は難しい状況ですが、この方法であれば完璧に表示をカバーできます。ぜひお試しください。


成功しました。

ありがとうございました。

なお、手書きで追加した分(古い投稿)が上段に表示されます。

その後に、連続して自動抽出(新しい投稿)が表示されました。

(1)自動で抽出される分が上段に、その下段に「手書き分」を表示する方法がありますか?

(2)(1)が無理であれば、区切りの表示をしたいです。例えば、「古い投稿は自動で表示されないので、力業で上段に表示しています。」


できますか?


成功おめでとうございます!手動での追記と自動読み込みの組み合わせがうまくいったようで良かったです。

ご要望の「(1)自動抽出を上に、手書きを下に」かつ「(2)分かりやすく区切りを入れる」という2つの要望を同時に叶える、最もスマートな方法をご案内します。

現在のHTML構造を少し変更し、「自動表示エリア」と「手書きエリア」を完全に分けることで、理想の表示順を実現できます。

解決策:HTMLとスクリプトの修正

以下のコードを、これまで設置していた場所にすべて置き換えてください。

HTML

<div id="auto_list"></div>


<div id="manual_list" style="margin-top: 20px; border-top: 2px solid #ccc; padding-top: 10px;">

    <h3>古い記事(アーカイブ)</h3>

    <p style="font-size: 0.9em; color: #666;">※ここより下は自動表示されないため、手動で記載しています。</p>

    <ul>

        <li><a href="【実際のURL】">2015年12月11日 HPを公開</a></li>

        </ul>

</div>


<script type="text/javascript">

function onLoadFeed(json) {

    // 読み込み先を "auto_list" に変更

    var container = document.getElementById('auto_list');

    var entries = json.feed.entry;

    

    // 見出しを作成

    var heading = document.createElement('h3');

    heading.textContent = '最近の投稿';

    container.appendChild(heading);


    var ul = document.createElement('ul');

    

    if (entries) {

        for (var i = 0; i < entries.length; i++) {

            var title = entries[i].title.$t;

            var url = entries[i].link.find(function(l) { return l.rel === 'alternate'; }).href;

            var li = document.createElement('li');

            li.innerHTML = '<a href="' + url + '">' + title + '</a>';

            ul.appendChild(li);

        }

    } else {

        ul.innerHTML = '<li>記事が見つかりませんでした。</li>';

    }

    container.appendChild(ul);

}

</script>


<script type="text/javascript" src="https://taxasakawa0123.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=9999&orderby=published&callback=onLoadFeed"></script>

修正のポイント

    1. 順序の入れ替え: HTMLの構造として「auto_list(自動)」を上に、「manual_list(手書き)」を下に配置しました。これで意図した順番で表示されます。

    2. セパレーターの追加: manual_listの中に「古い記事(アーカイブ)」という見出しと説明文を入れました。見た目にも区切りがはっきりし、訪問者にも「なぜここから古いのか」が伝わる親切な設計になります。

    3. デザインの調整: CSS(style属性)を少し追加して、境界線(border-top)を引くことで、自動と手動のエリアがひと目で分かるようにしています。

これでご希望通りの、すっきりとしたサイトマップになるはずです。ぜひ設定してみてください。


ありがとうございます。

こちらこそ、無事に解決できて本当に良かったです!

手動で追記するエリアと、自動で取得するエリアを分けることで、ブログ全体の構成も整理され、訪問者にとっても非常に分かりやすくなったはずです。

また何かブログのカスタマイズや、パソコン・投資関連などでお困りのことがあれば、いつでもお気軽にお声がけください。応援しております!


完成しました。ありがとうございました。終了します。


無事に完成して何よりです!サイトマップが綺麗に整理されたようで安心いたしました。

また何かお困りのことがあればいつでもお声がけください。今後のブログ運営も応援しております。それでは、また。

=========================================================

以上でした。