【ブログ編集】Bloggerでサイトマップやラベルごとの記事一覧を活用

ブログをやっていると、メニューがほしくなるのですが、作るの面倒臭いですよね！そんな時に良いのがサイトマップです。基本的に、あいうえお順で並んで表示されるので、タイトルを工夫すれば、分野別に見てもらえると思います。

私は、Bloggerを使っているので、Bloggerでのサイトマップの作り方を紹介致します。

今回紹介するのは、「記事を単純に表示するのも」「記事をラベルごとに分けて表示するもの」「サムネイルを付きで記事一覧するもの（色々自分で設定できます）」「ちょっと表示の速いもの」「ラベルを選んで表示するもの」という順番で紹介していきます。

１．記事を単純に表示するもの

var POSTSTOC_SETTINGS = {"blogURL":"kitaro-pc.blogspot.com/","sort":{"key":"title","order":"default"},"printby":"title"}

</script>

２．記事をラベルごとに分類して表示するもの

３．サムネイルを付きで記事一覧（自分で色々設定できます）

blogger.toc

このサイトに行くと、下記ページに行きますので、ここで、一番上の赤枠のところにブログ名（http://以下の部分）を入力して、オプションを自分好みに設定します。

表示方法でラベルを選べば、ラベルごとに分類されます。

また、サムネイルを表示することも出来ます。

日付は、”yy/MM/dd"とすれば、18/10/25のような表示になります。

青い「open window」をクリックすると、どんな表示になるか確認できます。

オプションを色々変更して、自分の気に入ったデザインにになったら、一番下の赤枠部分に表示された部分がコードです。

４．ちょっと表示の速いもの

Helploggerの”How To Add a Sitemap with a List o Posts to Blogger ”で提供されているスクリプトです。

私は、速度優先で、今のところこのスクリプトを使っています。

下のコードの上部の赤字を変更すると、カテゴリータイトルの文字色とサイズで、緑字は、記事のリンクのテキスト色のコード部です。

数字を変えることで、見た目を少し変えることが出来ます。

その他については、私には理解できないのでわかりません！

このスクリプトでは、記事に番号が振られて、ラベル別に表示されます。

上で紹介したスクリプトは、スクリプトを他のページに読みに行くので、若干速度が遅くなっていると思います。

下のスクリプトは、コードごとページに貼り付けるので速いのでは思います。

サムネイルはいらないから、表示が速いほうが良いという方は、こちらがお勧めです。

一番下の赤字の”http://helplogger.blogspot.com”を自分のブログのアドレスに変更します。

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
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 tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;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);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";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;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}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(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(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1-A_YqDCR4WN05txERkhNjdCp1DQcgtDaPHs3TWRVfgw9zLXT8p_KjtwZuq8oOyL92KncLfS4zecjxvNvO-ssgD1rl-xDg_xioBOEy8EsMsmBmx6rP3hCldIeJpM3Fh9_4Ge_aBR5yCKU/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://helplogger.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>

５．ラベルを選んで表示するもの

赤字の”https://kitaro-pc.blogspot.com”ところを自分のブログのアドレスに変更します。

青字の”ここにラベル”に、指定したいラベル名を書きます

ここからは、ブログでの操作です。

使うスクリプトが決まったら、先ずは、新しいページを作成します。投稿では無いのでお間違いなく。

続いて、タイトルを記入し、ＨＴＭＬを選択します。作成のままではダメですので注意してください。

ここまで出来たら更新ボタンを押します。

しかし、このままでは、ブログに表示されないので、サイトマップへのリンクをBloggerに追加します。

まずは、レイアウトの画面のheaderのところで、「ガジェットを追加」を選び、「ページ」を追加します。

ページの編集には、サイトマップという項目がすでにありますので、チェックを入れ、「リストの順序」のところで、好きな位置に配置すればOKです。

ドラッグアンドドロップで位置を変更でします。

こんな感じになります。

タイトルの付け方を工夫すれば、良い感じのメニューページになります！

私のお勧めは、全記事一覧なら速度優先で3番です。

サムネイル付きでかっこよくしたいなら4番ですが、読み込み速度は若干遅いです。

ラベルごとに記事一覧を作りたいときは、3番か5番を使います。3番もラベル単位で作れるので、どちらかを使うと良いと思います。

特定のラベル複数選んで表示するものは、残念ながら見つかりませんでしたので、全記事一覧から必要な部分をコピペしてページを作り、リストに追加しました。

記事を投稿するだけで編集はされないのが気に入らないのですが、コピペするだけなので、やり方がわかるまでは、これで行きます。

今回は、ページリストの作り方として説明しましたが、HTML/JavaScriptガジェットに貼り付けて使うことも出来ます。ちょっと応用すれば、サイドバーなどに、新着記事一覧を表示するのに使うこともできます。

このブログでも3番と5番を活用していますので、表示についてご確認ください！

鬼太郎チャンネル

このブログを検索

注目の投稿

ヤフオクで富士通 ESPRIMO D580/F を購入後に発生したSSD増設に伴うPCIバスとSATAカードの認識問題