ホーム / ブログ /

ブロガーのブログにコピペで簡単にHTMLサイトマップを作る

2024年5月21日火曜日

サイトマップ ブログ

t f B! P L

ブロガーのブログにコピペで簡単にHTMLサイトマップを作る方法

サイトマップ

HTMLサイトマップのコードをコピーして個別ページに貼り付けます。
コントロールパネルからページ新規作成で表示をHTMLにして貼り付けます。
オプションは許可しないで送信。これでサイトマップが読み込まれます。

  1. <div id="bp_toc">読込中...</div>
  2. <script type="text/javascript">
  3. // ---------------------------------------------------
  4. // BLOGTOC
    5. ,
  5. // ---------------------------------------------------
  6. // BlogToc creates a clickable Table Of Contents for
  7. // Blogger Blogs.
  8. // It uses the JSON post feed, and create a ToC of it.
  9. // The ToC can be sorted by title or by date, both
  10. // ascending and descending, and can be filtered by
  11. // label.
  12. // ---------------------------------------------------
  13. // Author: Syed Faizan Ali
  14. // Url: https://www.mybloggerlab.com
  15. // Version: 2
  16. // Date: 2007-04-12
  17. // ---------------------------------------------------
  18. // Japanese Localization by Fujiyan.
  19. // Url: https://fujilogic.blogspot.com/2019/05/sitemap.html
  20. // ---------------------------------------------------
  21. // global arrays
  22.  
  23.    var postTitle = new Array(); // array of posttitles
  24.    var postUrl = new Array(); // array of posturls
  25.    var postDate = new Array(); // array of post publish dates
  26.    var postSum = new Array(); // array of post summaries
  27.    var postLabels = new Array();// array of post labels
  28.  
  29. // global variables
  30.    var sortBy = "datenewest"; // default value for sorting ToC
  31.    var tocLoaded = false; // true if feed is read and ToC can be displayed
  32.    var numChars = 250; // マウスオン時にツールチップ表示する概要文字数
  33.    var postFilter = ''; // デフォルトで表示するラベル名
  34.    var tocdiv = document.getElementById("bp_toc"); //the toc container
  35.    var totalEntires =0; //Entries grabbed till now
  36.    var totalPosts =0; //Total number of posts in the blog.
  37.  
  38. // main callback function
  39.  
  40. function loadtoc(json) {
  41.  
  42.    function getPostData() {
  43.    // this functions reads all postdata from the json-feed and stores it in arrays
  44.       if ("entry" in json.feed) {
  45.          var numEntries = json.feed.entry.length;
  46.          totalEntires = totalEntires + numEntries;
  47.          totalPosts=json.feed.openSearch$totalResults.$t
  48.          if(totalPosts>totalEntires)
  49.          {
  50.          var nextjsoncall = document.createElement('script');
  51.          nextjsoncall.type = 'text/javascript';
  52.          startindex=totalEntires+1;
  53.          nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=50&alt=json-in-script&callback=loadtoc");
  54.          tocdiv.appendChild(nextjsoncall);
  55.          }
  56.       // main loop gets all the entries from the feed
  57.          for (var i = 0; i < numEntries; i++) {
  58.          // get the entry from the feed
  59.             var entry = json.feed.entry[i];
  60.  
  61.          // get the posttitle from the entry
  62.             var posttitle = entry.title.$t;
  63.  
  64.          // get the post date from the entry
  65.             var postdate = entry.published.$t.substring(0,10).replace(/-/g,"/");
  66.  
  67.          // get the post url from the entry
  68.             var posturl;
  69.             for (var k = 0; k < entry.link.length; k++) {
  70.                if (entry.link[k].rel == 'alternate') {
  71.                posturl = entry.link[k].href;
  72.                break;
  73.                }
  74.             }
  75.  
  76.          // get the post contents from the entry
  77.          // strip all html-characters, and reduce it to a summary
  78.             if ("content" in entry) {
  79.                var postcontent = entry.content.$t;}
  80.             else
  81.                if ("summary" in entry) {
  82.                   var postcontent = entry.summary.$t;}
  83.                else var postcontent = "";
  84.          // strip off all html-tags
  85.             var re = /<\S[^>]*>/g;
  86.             postcontent = postcontent.replace(re, "");
  87.          // reduce postcontent to numchar characters, and then cut it off at the last whole word
  88.             if (postcontent.length > numChars) {
  89.                postcontent = postcontent.substring(0,numChars);
  90.                var quoteEnd = postcontent.lastIndexOf(" ");
  91.                postcontent = postcontent.substring(0,quoteEnd) + '...';
  92.             }
  93.  
  94.          // get the post labels from the entry
  95.             var pll = '';
  96.             if ("category" in entry) {
  97.                for (var k = 0; k < entry.category.length; k++) {
  98.                   pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="ラベル 「' + entry.category[k].term + '」 の記事を表示">' + entry.category[k].term + '</a>, ';
  99.                }
  100.             var l = pll.lastIndexOf(',');
  101.             if (l != -1) { pll = pll.substring(0,l); }
  102.             }
  103.  
  104.          // add the post data to the arrays
  105.             postTitle.push(posttitle);
  106.             postDate.push(postdate);
  107.             postUrl.push(posturl);
  108.             postSum.push(postcontent);
  109.             postLabels.push(pll);
  110.          }
  111.       }
  112.       if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
  113.    } // end of getPostData
  114.  
  115. // start of showtoc function body
  116. // get the number of entries that are in the feed
  117. // numEntries = json.feed.entry.length;
  118.  
  119. // get the postdata from the feed
  120.    getPostData();
  121.  
  122. // sort the arrays
  123.    sortPosts(sortBy);
  124.    tocLoaded = true;
  125. }
  126.  
  127.  
  128.  
  129. // filter and sort functions
  130.  
  131.  
  132. function filterPosts(filter) {
  133. // This function changes the filter
  134. // and displays the filtered list of posts
  135.   // document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
  136.    postFilter = filter;
  137.    displayToc(postFilter);
  138. } // end filterPosts
  139.  
  140. function allPosts() {
  141. // This function resets the filter
  142. // and displays all posts
  143.  
  144.    postFilter = '';
  145.    displayToc(postFilter);
  146. } // end allPosts
  147.  
  148. function sortPosts(sortBy) {
  149. // This function is a simple bubble-sort routine
  150. // that sorts the posts
  151.  
  152.    function swapPosts(x,y) {
  153.    // Swaps 2 ToC-entries by swapping all array-elements
  154.       var temp = postTitle[x];
  155.       postTitle[x] = postTitle[y];
  156.       postTitle[y] = temp;
  157.       var temp = postDate[x];
  158.       postDate[x] = postDate[y];
  159.       postDate[y] = temp;
  160.       var temp = postUrl[x];
  161.       postUrl[x] = postUrl[y];
  162.       postUrl[y] = temp;
  163.       var temp = postSum[x];
  164.       postSum[x] = postSum[y];
  165.       postSum[y] = temp;
  166.       var temp = postLabels[x];
  167.       postLabels[x] = postLabels[y];
  168.       postLabels[y] = temp;
  169.    } // end swapPosts
  170.  
  171.    for (var i=0; i < postTitle.length-1; i++) {
  172.       for (var j=i+1; j<postTitle.length; j++) {
  173.          if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
  174.          if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
  175.          if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
  176.          if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
  177.       }
  178.    }
  179. } // end sortPosts
  180.  
  181. // displaying the toc
  182.  
  183. function displayToc(filter) {
  184. // this function creates a three-column table and adds it to the screen
  185.    var numDisplayed = 0;
  186.    var tocTable = '';
  187.    var tocHead1 = 'タイトル';
  188.    var tocTool1 = 'タイトル順に並べ替え';
  189.    var tocHead2 = '投稿日';
  190.    var tocTool2 = '投稿日順に並べ替え';
  191.    var tocHead3 = 'ラベルを選択';
  192.    var tocTool3 = '';
  193.    if (sortBy == "titleasc") {
  194.       tocTool1 += ' (降順)';
  195.       tocTool2 += ' (昇順)';
  196.    }
  197.    if (sortBy == "titledesc") {
  198.       tocTool1 += ' (昇順)';
  199.       tocTool2 += ' (昇順)';
  200.    }
  201.    if (sortBy == "dateoldest") {
  202.       tocTool1 += ' (昇順)';
  203.       tocTool2 += ' (昇順)';
  204.    }
  205.    if (sortBy == "datenewest") {
  206.       tocTool1 += ' (昇順)';
  207.       tocTool2 += ' (降順)';
  208.    }
  209.    if (postFilter != '') {
  210.       tocTool3 = '全ての記事を表示する';
  211.    }
  212.    tocTable += '<table>';
  213.    tocTable += '<tr>';
  214.    tocTable += '<td class="toc-header-col1">';
  215.    tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
  216.    tocTable += '</td>';
  217.    tocTable += '<td class="toc-header-col2">';
  218.    tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
  219.    tocTable += '</td>';
  220.    tocTable += '<td class="toc-header-col3">';
  221.    tocTable += '<span>' + tocHead3 + '</span>';
  222.    tocTable += '</td>';
  223.    tocTable += '</tr>';
  224.    for (var i = 0; i < postTitle.length; i++) {
  225.       if (filter == '') {
  226.          tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
  227.          numDisplayed++;
  228.       } else {
  229.           z = postLabels[i].lastIndexOf(filter);
  230.           if ( z!= -1) {
  231.              tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
  232.              numDisplayed++;
  233.           }
  234.         }
  235.    }
  236.    tocTable += '</table>';
  237.    if (numDisplayed == postTitle.length) {
  238.       var tocNote = '<span class="toc-note">全 ' + postTitle.length + ' 件の記事を表示しています<br/></span>';
  239.    }
  240.    else {
  241.       var tocNote = '<span class="toc-note">全 '+ postTitle.length + ' 件中 ラベル「<b>';
  242.       tocNote += postFilter + '</b>」の ' + numDisplayed + ' 件の記事を表示しています<br/><a href="javascript:allPosts();">' + tocTool3 + '</a></span>';
  243.    }
  244.    tocdiv.innerHTML = tocNote + tocTable;
  245. } // end of displayToc
  246.  
  247. function toggleTitleSort() {
  248.    if (sortBy == "titleasc") { sortBy = "titledesc"; }
  249.    else { sortBy = "titleasc"; }
  250.    sortPosts(sortBy);
  251.    displayToc(postFilter);
  252. } // end toggleTitleSort
  253.  
  254. function toggleDateSort() {
  255.    if (sortBy == "datenewest") { sortBy = "dateoldest"; }
  256.    else { sortBy = "datenewest"; }
  257.    sortPosts(sortBy);
  258.    displayToc(postFilter);
  259. } // end toggleTitleSort
  260.  
  261.  
  262. function showToc() {
  263.   if (tocLoaded) {
  264.      displayToc(postFilter);
  265.      var toclink = document.getElementById("toclink");
  266.  
  267.   }
  268. }
  269.  
  270. </script>
  271. <script src="/feeds/posts/default?alt=json-in-script&amp;max-results=50&amp;callback=loadtoc" type="text/javascript"></script>
  272.  
  273. <style>
  274. #bp_toc {
  275.     margin: 0 auto 2em;
  276.     padding: 0;
  277.     width: 100%;
  278. }
  279. #bp_toc tbody {
  280.     border-bottom: 1px solid #ddd;
  281. }
  282. #bp_toc table {
  283.     width: 100%;
  284.     margin: 0 auto;
  285.     counter-reset: rowNumber;
  286.     border-collapse: collapse;
  287.     border-left: 1px solid #ddd;
  288. }
  289. #bp_toc td:not(.toc-entry-col3),
  290. #bp_toc tr {
  291.   border-right: 1px solid #ddd;
  292. }
  293. .toc-note {
  294.     line-height: 1.5em;
  295.     margin-bottom: 1em;
  296.     display: block;
  297.     text-align: center;
  298. }
  299. .toc-note a {/*全記事表示に戻すリンク*/
  300.  
  301. }
  302. .toc-note a:hover {
  303.  
  304. }
  305. #bp_toc tr:nth-child(2n) {
  306.     background: rgba(0,80,200,.1);/*奇数行の背景色*/
  307. }
  308. .toc-entry-col1 a:hover {
  309.     background: rgba(0,80,200,.2);/*タイトルホバー時の背景色*/
  310.     text-decoration: none!important;
  311. }
  312. #bp_toc table tr:first-child a,
  313. #bp_toc table tr:first-child span {/*ナビゲーション*/
  314.     background: #bbb;
  315.     color: #fff!important;
  316.     font-weight: bold;
  317.     text-align: center;
  318.     padding: 5px 0;
  319.     display: block;
  320.     width: 100%;
  321.     border-top: 1px solid #ddd;
  322. }
  323. #bp_toc table tr:first-child a:hover {
  324.     opacity: .8;
  325.     text-decoration: none;
  326. }
  327. .toc-header-col1 {
  328.     width: 55%;/*タイトル(番号含む)枠の幅*/
  329. }
  330. .toc-header-col2 {
  331.     width: 12%;/*投稿日枠の幅*/
  332. }
  333. .toc-header-col3 {
  334.     width: 33%;/*ラベル枠の幅*/
  335. }
  336. #bp_toc table tr td.toc-entry-col1:first-child::before {
  337.     content: counter(rowNumber);
  338.     width: 2.6em;/*記事番号枠の幅*/
  339.     text-align: center;
  340.     padding: 12px 3px 0;
  341.     border-right: 1px solid #ddd;
  342. }
  343. .toc-entry-col1 {/*記事番号*/
  344.     display: flex;
  345.     counter-increment: rowNumber;
  346.     font-size: 12px;
  347.     line-height: 1.5em;
  348. }
  349. .toc-entry-col1 a {/*タイトル*/
  350.     display: block;
  351.     height: 100%;
  352.     width: 100%;
  353.     font-size: 14px;
  354.     font-weight: bold;
  355.     padding: 10px .5em 10px;
  356.     line-height: 1.3em;
  357.     color: inherit!important;
  358. }
  359. .toc-entry-col2 {/*投稿日*/
  360.     font-size: 13px;
  361.     text-align: center;
  362. }
  363. .toc-entry-col3 {/*ラベル*/
  364.     font-size: 13px;
  365.     padding: 5px;
  366.     line-height: 1.5em;
  367. }
  368. </style>
アドセンス審査に必要なプライバシーポリシーページの作成

アドセンス審査に必要なプライバシーポリシーページの作成

アドセンス審査に必要なプライバシーポリシーページの作成

ファビコンtuckershop.blogspot.com

ブログランキング・にほんブログ村へ

このブログを検索

自己紹介

自分の写真
Bloggerブログのカスタマイズ特訓中です。皆さん宜しくお願いします。

QooQ