Blogger テンプレート QooQ カスタマイズ 04

「ページトップへ戻る」ボタン

「管理画面」→「レイアウト」→「ガジェットの追加」で
「HTML/javascript」を追加
下記のコードを張り付けてください。

** HTML **（貼り付ける時はこのコメント行を削除）
<p id="page-top"><a href="#wrap">TOP</a></p>

** CSS **（貼り付ける時はこのコメント行を削除）
<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}

@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>

** Javascript **（貼り付ける時はこのコメント行を削除）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    var topBtn = $('#page-top'); 
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>

ガジェットの配置場所は「ページの本文」の一番下やフッターにでも置いておけばよいとのことです。
その他、ボタンの色・大きさ・位置を調節してください。

highlight.js 導入

リモスキさんの記事で highlight.js 導入の参考にしました。

基本設定

<!-- highlight.js デフォルトスタイル -->
<link rel="preload" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css" as="style" onload="this.rel='stylesheet'"/>
<script async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js" ></script>
<script>window.addEventListener("load", function() { hljs.initHighlighting() });</script>

このままでも動きますが、2行目の default.min.css の部分をお好きなスタイルシート
に変えて設定してください。

コード掲載方法

1) HTMLの場合は、コードを表示用に変換する。それ以外はそのまま。
HTML特殊文字変換ツール
2) 変換したテキストを、以下のタグで囲む。

<pre><code>
コード入力
</code></pre>

調整

最後に下のCSSで調整します。
HTML編集のCSS記述部「全体設定」で

/* highlight.js用 */
pre code.hljs {
  font-size: 14px; /*文字サイズ*/
  line-height: 1.4; /*行間*/
}
/* highlight.js用 */
pre > code {
  max-height: 200px; /*ボックスの高さ*/
}

ボックスの高さを指定すると、入りきらない部分は縦のスクロールになります。高さの指定は好みだと思います。

関連記事のサムネイル画像を丸から四角にする

「ふじろじっく」さんの記事を参考にしました。

HTML編集のCSS記述部「関連記事」の所のコードを丸ごと以下のコードと入れ替えます。

/* 関連記事 */
#mrp-wrapper {
  margin-top: 2em;
}
#mrp-title {
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
}
#mrp-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#mrp-content p {
  margin: auto;
  padding: .5em;
}
.mrp-post:hover {
  box-shadow: 5px 5px 5px 3px #aaa;
}
.mrp-post {
  position: relative;
  flex-basis: 30.3%;
  max-height: 200px;
  overflow: hidden;
  margin: 0 10px 20px 10px;
  background: #fff;
  box-shadow: 3px 3px 5px -2px #aaa;
  border-radius: 3px;
  transition: .2s;
}
.mrp-post-img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin: 0;
}
@media ( max-width : 1240px ) {
  .mrp-post {
    flex-basis: 46%;
  }
}
@media ( max-width : 600px ) {
  .mrp-post {
    flex-basis: 100%;
    margin: 0 0 12px 0;
    height: 90px;
    overflow: hidden;
  }
  .mrp-post-img {
    float: left;
    width: 120px;
    height: 90px;
    max-height: 100%;
    padding-right: .5em;
  }
  #mrp-content p {
    margin-left: 120px;
  }
}
.mrp-post-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mrp-post-title {
  font-size: 90%;
}

最後にサムネ画像をボヤけず綺麗に表示させるために、スクリプトの一部に手を加えます。 テーマ編集(HTML)にて以下の部分にコードを追記します。

{r.thumbnail=n.media$thumbnail.url}
↓↓
{r.thumbnail=n.media$thumbnail.url.replace(/\/s[0-9]+(-c)?/, "/s300")}

サイトマップ自動生成

「管理画面」→「ページ」で、「新しいページ」をクリック。
編集画面で「HTMLビュー」から、下のコードを貼り付ける。
最後に、一番下に書かれている"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/AVvXsEhwxHWI4cgJomvkwUctd7ZOtM_t23jlUk7L-zTArHI3inDZztCEjAzGHcfvHQJMjOEUlQ79PIHsb9rqpgpi_t-OOhRovFXM-CZiregWL5ByO6JkUC9VMyHJVDM_iMoC4X9GlTZeISRJ9PtS/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&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

その後、オプションを開いて「閲覧者のコメント」で「許可しない」を選択すればOK。