Blogger に HTML サイトマップを追加する方法 (4 つの新しいスタイル)

<ul></ul>

    <script type="text/javascript">
        var numposts = 100; // 投稿が 100 件を超える場合は、この値を変更します
        関数 showrecentposts(json) {
            var sitemap = document.getElementById("sitemap");
            for (var i = 0; i < json.feed.entry.length; i++) {
                var エントリ = json.feed.entry[i];
                var posttitle = エントリ.タイトル.$t;
                var posturl;
                for (var k = 0; k <entry.link.length; k++) {
                    if (entry.link[k].rel == '代替') {
                        posturl = エントリ.リンク[k].href;
                        壊す;
                    }
                }
                var listItem = document.createElement("li");
                listItem.innerHTML = `<a href="${posturl}">${posttitle}</a>`;
                sitemap.appendChild(listItem);
            }
        }

        var script = document.createElement("script");
        script.src = " https://example.com /feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
        document.body.appendChild(スクリプト);
    </script>
<スタイル>
 #サイトマップ {
            リストスタイルタイプ: なし;
            パディング: 0;
            マージン: 0;
            マージン: 自動;
            背景色: #f8f9fa;
            境界半径: 5px;
            ボックスシャドウ: 0 2px 5px rgba(0, 0, 0, 0.1);
            最小高さ: 800px; 
            トランジション: すべて 0.3 秒のイーズ。 
        }

        #サイトマップ リ {
            パディング: 8px 15px;
            ボーダーボトム: 1px ソリッド #e0e0e0;
            トランジション: バックグラウンド 0.2 秒、トランスフォーム 0.2 秒。
            トランジション: バックグラウンド 0.2 秒。
            境界左: 4 ピクセルの黒一色。
          マージン-ボトム: 4px;
        }
   #sitemap li:hover{
     境界左: 4 ピクセルの青一色。変換:translateY(-2px);}

        #sitemap li:last-child {
            ボーダーボトム: なし。
        }

        #サイトマップ {
            テキスト装飾: なし。
            色: 黒;
            フォントサイズ: 19px;
            表示: ブロック;
          トランジション: カラー 0.2 秒。
        }

        #sitemap a:hover {
            色: 青;
        }
    </スタイル>

<ul></ul>

<script type="text/javascript">
    var numposts = 100; // 投稿が 100 件を超える場合は、この値を変更します
    関数 showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        for (var i = 0; i < json.feed.entry.length; i++) {
            var エントリ = json.feed.entry[i];
            var posttitle = エントリ.タイトル.$t;
            var posturl;
            
            // ラベルを抽出し (可能な場合)、リンクを作成します
            var postlabels = '';
            if (エントリ.カテゴリ) {
                postlabels =entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    `<a href="${labelurl}" class="label-button">${label}</a>` を返します。
                }）。参加する（' '）;
            } それ以外 {
                postlabels = '<span class="no-label">ラベルなし</span>';
            }

            for (var k = 0; k <entry.link.length; k++) {
                if (entry.link[k].rel == '代替') {
                    posturl = エントリ.リンク[k].href;
                    壊す;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="ポストアイテム">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(スクリプト);
</script>

<スタイル>
    #サイトマップ {
        リストスタイルタイプ: なし;
        パディング: 0;
        マージン: 0;
        マージン: 自動;
        背景色: #f8f9fa;
        境界半径: 5px;
        ボックスシャドウ: 0 2px 5px rgba(0, 0, 0, 0.1);
        最小高さ: 800px;
        トランジション: すべて 0.3 秒のイーズ。
    }

    #サイトマップ リ {
        パディング: 8px 15px;
        ボーダーボトム: 1px ソリッド #e0e0e0;
        トランジション: バックグラウンド 0.2 秒、トランスフォーム 0.2 秒。
        境界左: 4 ピクセルの黒一色。
        マージン-ボトム: 4px;
    }

    #sitemap li:hover {
        境界左: 4 ピクセルの青一色。
        変換：translateY(-2px);
    }

    #sitemap li:last-child {
        ボーダーボトム: なし。
    }

    .post-item {
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 間のスペース;
        整列項目: 中央;
    }

    .post-title {
        テキスト装飾: なし。
        色: 黒;
        フォントサイズ: 19px;
        表示: ブロック;
        トランジション: カラー 0.2 秒。
    }

    .post-title:ホバー {
        色: 青;
    }

    .post-labels {
        ディスプレイ: フレックス;
        ギャップ: 5px;
    }

    .label-button {
    背景色: #48525c;
    色: #ffffff;
    パディング: 0px 20px;
    境界半径: 5px;
    テキスト装飾: なし。
    フォントサイズ: 14px;
    行の高さ: 25px;
    トランジション: 背景色 0.2 秒の容易さ。
}

    .label-button:hover {
        背景色: #0056b3;
    }

    .no-label {
        カラー:#555;
        フォントサイズ: 14px;
    }

    /* レスポンシブ */
    @media (最大幅: 768px) {
        .post-item {
            フレックス方向: 列;
            align-items: flex-start;
        }

        .post-labels {
            マージントップ: 5px;
        }
    }
</スタイル>

<div class="フィルターコンテナ">
    <label for="labelFilter">ラベルによるフィルタ: </label>
    <select onchange="filterByLabel()">
        <option value="all">すべて</option>
    </選択>
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // すべての投稿をここに保存します
    var uniqueLabels = 新しい Set(); // 一意のラベルを保存するには

    // 最近の投稿を取得して表示します
    関数 showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // フィルタリングのためにすべての投稿を保存します

        // フィルターの一意のラベルを生成します
        allPosts.forEach(function(entry) {
            if (エントリ.カテゴリ) {
                エントリー.カテゴリー.forEach(関数(猫) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        // フィルタのドロップダウンにラベルを入力します
        var labelFilter = document.getElementById("labelFilter");
        uniqueLabels.forEach(関数(ラベル) {
            var オプション = document.createElement("オプション");
            オプション.値 = ラベル;
            オプション.テキストコンテンツ = ラベル;
            labelFilter.appendChild(オプション);
        });

        displayPosts(すべての投稿); // 最初はすべての投稿を表示します
    }

    // フィルタリングされた投稿を表示する関数
    関数 displayPosts(投稿) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // 現在の投稿をクリアします

        Posts.forEach(関数(エントリ) {
            var posttitle = エントリ.タイトル.$t;
            var posturl;
            var postlabels = '';

            if (エントリ.カテゴリ) {
                postlabels =entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    `<a href="${labelurl}" class="label-button">${label}</a>` を返します。
                }）。参加する（' '）;
            } それ以外 {
                postlabels = '<span class="no-label">ラベルなし</span>';
            }

            for (var k = 0; k <entry.link.length; k++) {
                if (entry.link[k].rel == '代替') {
                    posturl = エントリ.リンク[k].href;
                    壊す;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="ポストアイテム">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    // 選択したラベルで投稿をフィルタリングする関数
    関数 filterByLabel() {
        var selectedLabel = document.getElementById("labelFilter").value;

        if (selectedLabel === "すべて") {
            displayPosts(すべての投稿); // 「すべて」を選択した場合はすべての投稿を表示
        } それ以外 {
            var filteredPosts = allPosts.filter(function(entry) {
                return エントリ.カテゴリ && エントリ.カテゴリ.some(cat => cat.term === selectedLabel);
            });
            displayPosts(filteredPosts); // フィルタリングされた投稿のみを表示します
        }
    }

    // スクリプトを使用して最近の投稿を読み込みます
    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(スクリプト);
</script>

<スタイル>
    /* フィルター ドロップダウンのスタイル設定 */
    .filter-container {
        マージン: 20px 0;
        テキスト整列: 中央;
    }

    #labelFilter {
        パディング: 5px 10px;
        フォントサイズ: 16px;
    }

    /* サイトマップと投稿アイテムのスタイル */
    #サイトマップ {
        リストスタイルタイプ: なし;
        パディング: 0;
        マージン: 0;
        マージン: 自動;
        背景色: #f8f9fa;
        境界半径: 5px;
        ボックスシャドウ: 0 2px 5px rgba(0, 0, 0, 0.1);
        最小高さ: 800px;
        トランジション: すべて 0.3 秒のイーズ。
    }

    #サイトマップ リ {
        パディング: 8px 15px;
        ボーダーボトム: 1px ソリッド #e0e0e0;
        トランジション: バックグラウンド 0.2 秒、トランスフォーム 0.2 秒。
        境界左: 4 ピクセルの黒一色。
        マージン-ボトム: 4px;
    }

    #sitemap li:hover {
        境界左: 4 ピクセルの青一色。
        変換：translateY(-2px);
    }

    #sitemap li:last-child {
        ボーダーボトム: なし。
    }

    .post-item {
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 間のスペース;
        整列項目: 中央;
    }

    .post-title {
        テキスト装飾: なし。
        色: 黒;
        フォントサイズ: 19px;
        表示: ブロック;
        トランジション: カラー 0.2 秒。
    }

    .post-title:ホバー {
        色: 青;
    }

    .post-labels {
        ディスプレイ: フレックス;
        ギャップ: 5px;
    }

    .label-button {
        背景色: #48525c;
        色: #ffffff;
        パディング: 0px 20px;
        境界半径: 5px;
        テキスト装飾: なし。
        フォントサイズ: 14px;
        行の高さ: 25px;
        トランジション: 背景色 0.2 秒の容易さ。
    }

    .label-button:hover {
        背景色: #0056b3;
    }

    .no-label {
        カラー: #555;
        フォントサイズ: 14px;
    }

    /* レスポンシブ */
    @media (最大幅: 768px) {
        .post-item {
            フレックス方向: 列;
            align-items: flex-start;
        }

        .post-labels {
            マージントップ: 5px;
        }
    }
</スタイル>

<div class="フィルターコンテナ">
    <button class="filter-button">すべて</button>
    <!--ラベル ボタンがここに動的に挿入されます-->
</div>

<ul></ul>

<script type="text/javascript">
    var allPosts = []; // すべての投稿をここに保存します
    var uniqueLabels = 新しい Set(); // 一意のラベルを保存するには

    関数 showrecentposts(json) {
        var sitemap = document.getElementById("sitemap");
        allPosts = json.feed.entry; // フィルタリングのためにすべての投稿を保存します

        allPosts.forEach(function(entry) {
            if (エントリ.カテゴリ) {
                エントリー.カテゴリー.forEach(関数(猫) {
                    uniqueLabels.add(cat.term);
                });
            }
        });

        var filterContainer = document.querySelector('.filter-container');
        uniqueLabels.forEach(関数(ラベル) {
            var button = document.createElement("ボタン");
            button.className = "フィルターボタン";
            button.textContent = ラベル;
            button.onclick = function() { filterByLabel(ラベル); };
            filterContainer.appendChild(ボタン);
        });

        displayPosts(すべての投稿); // 最初にすべての投稿を表示します
    }

    関数 displayPosts(投稿) {
        var sitemap = document.getElementById("sitemap");
        sitemap.innerHTML = ''; // サイトマップリストをクリアします

        Posts.forEach(関数(エントリ) {
            var posttitle = エントリ.タイトル.$t;
            var posturl;
            var postlabels = '';

            if (エントリ.カテゴリ) {
                postlabels =entry.category.map(cat => {
                    var label = cat.term;
                    var labelurl = `/search/label/${encodeURIComponent(label)}`;
                    `<a href="${labelurl}" class="label-button">${label}</a>` を返します。
                }）。参加する（' '）;
            } それ以外 {
                postlabels = '<span class="no-label">ラベルなし</span>';
            }

            for (var k = 0; k <entry.link.length; k++) {
                if (entry.link[k].rel == '代替') {
                    posturl = エントリ.リンク[k].href;
                    壊す;
                }
            }

            var listItem = document.createElement("li");
            listItem.innerHTML = `
                <div class="ポストアイテム">
                    <a href="${posturl}" class="post-title">${posttitle}</a>
                    <div class="post-labels">${postlabels}</div>
                </div>`;
            sitemap.appendChild(listItem);
        });
    }

    関数 filterByLabel(ラベル) {
        if (ラベル === 'すべて') {
            displayPosts(すべての投稿);
        } それ以外 {
            var filteredPosts = allPosts.filter(function(entry) {
                return エントリ.カテゴリ && エントリ.カテゴリ.some(cat => cat.term === ラベル);
            });
            displayPosts(filteredPosts);
        }
    }

    var script = document.createElement("script");
    script.src = "https://example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999";
    document.body.appendChild(スクリプト);
</script>

<スタイル>
    /* フィルターコンテナーのスタイル */
    .filter-container {
        テキスト整列: 中央;
        マージン: 20px 0;
    }

    /* 錠剤型のフィルター ボタン */
    .filter-button {
        背景色: #007bff;
        境界線: なし。
        色: 白;
        パディング: 10px 20px;
        マージン: 5px;
        境界半径: 5px;
        フォントサイズ: 16px;
        カーソル: ポインタ;
        トランジション: 背景色 0.3 秒の容易さ。
    }

    .filter-button:hover {
        背景色: #0056b3;
    }

    /* サイトマップと投稿アイテムのスタイル */
    #サイトマップ {
        リストスタイルタイプ: なし;
        パディング: 0;
        マージン: 0;
        マージン: 自動;
        背景色: #f8f9fa;
        境界半径: 5px;
        ボックスシャドウ: 0 2px 5px rgba(0, 0, 0, 0.1);
        最小高さ: 800px;
        トランジション: すべて 0.3 秒のイーズ。
    }

    #サイトマップ リ {
        パディング: 8px 15px;
        ボーダーボトム: 1px ソリッド #e0e0e0;
        トランジション: バックグラウンド 0.2 秒、トランスフォーム 0.2 秒。
        境界左: 4 ピクセルの黒一色。
        マージン-ボトム: 4px;
    }

    #sitemap li:hover {
        境界左: 4 ピクセルの青一色。
        変換：translateY(-2px);
    }

    #sitemap li:last-child {
        ボーダーボトム: なし。
    }

    .post-item {
        ディスプレイ: フレックス;
        コンテンツの位置揃え: 間のスペース;
        整列項目: 中央;
    }

    .post-title {
        テキスト装飾: なし。
        色: 黒;
        フォントサイズ: 19px;
        表示: ブロック;
        トランジション: カラー 0.2 秒。
    }

    .post-title:ホバー {
        色: 青;
    }

    .post-labels {
        ディスプレイ: フレックス;
        ギャップ: 5px;
    }

    .label-button {
        背景色: #48525c;
        色: #ffffff;
        パディング: 0px 20px;
        境界半径: 5px;
        テキスト装飾: なし。
        フォントサイズ: 14px;
        行の高さ: 25px;
        トランジション: 背景色 0.2 秒の容易さ。
    }

    .label-button:hover {
        背景色: #0056b3;
    }

    .no-label {
        カラー:#555;
        フォントサイズ: 14px;
    }

    /* レスポンシブ */
    @media (最大幅: 768px) {
        .post-item {
            フレックス方向: 列;
            align-items: flex-start;
        }

        .post-labels {
            マージントップ: 5px;
        }
    }
</スタイル>