#Blogger
テーマを「QooQ List version」に変更 2020/09/16
外部テンプレートの導入手順
参考▶https://longstay-wine.blogspot.com/2020/06/blogger_18.htmlQooQダウンロードページ
参考▶https://qooq.dododori.com/blogger/qooq-download/参考▶https://blog.dododori.com/create/program/blogger-qooq/#comment-1137
QooQ初期設定方法
▶https://blog.dododori.com/create/program/qooq-releasenote/- スマホ表示をOFFに
- いらないガジェットを削除
- グローバルメニュー有効化
- 配色を自分好みに
- 詳細設定 設定はすべて、管理画面左のメニューから、「レイアウト」→「ブログの投稿ガジェットの編集」→「投稿ページのオプション」から行います。
- 「SNSシェアボタン」の追加/削除
- 「記事下カテゴリリンク」の追加/削除 文字変更OK
- 「関連記事」の追加/削除
- 「クイック編集ボタン」の追加/削除
- アドセンス広告を記事内に設置する方法
Ctrl+「F」キーで右上に検索ボックスが表示されます。検索ボックスに「アドセンス広告」と入力して検索。「アドセンス広告1.start」みたいのが4つ出てくるので、startとendの間に、アドセンスの公式サイトから取得した広告コードをそのままコピペする。
「コードスニペット」
<script data-ad-client="ca-pub-7731209294704037" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
20210109コードスニペットを貼付け。
<!-- ここから AdSense コード 機能 -->
<script data-ad-client="ca-pub-7731209294704037" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ここまで AdSense コード 機能 -->
QooQのカスタマイズ
参考▶https://www.gsenjyounoai.com/2020/05/QooQCust.html- ガジェットの追加
- 目次をつける
- パンくずリストの表示数変更
- 関連記事の表示数変更と記事に区切りをつける
- Analytics対応
「設定」→「その他」→「Google Analytics」にアナリティクスのトラッキング IDが入っていればOK。UA-XXXXXXXXX-X)
（ここに追加するコード）
<!-- ここまで xxx 機能 -->
- コードの更新箇所の把握方法 差分ツール
- HTML内にメモ書き
（ここに追加するコード）
<!-- ここまで xxx 機能 -->
目次の自動生成 2020/09/29
参考▶https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html
</head>の直前に、以下のコードを追加します
<!-- ここから 目次機能 -->
<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<script>
//以下のオプションを好みに合わせて変更して下さい
//オプションの詳しい説明は、(https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)を参照
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "firstHeadBefore",
showToc: true,
width: "auto",
marginTop: "20px",
marginBottom: "20px",
indent: "20px",
postBodySelector: ".widget.Blog"
};
//これ以降のソースは編集しないでください
;(function(i){var j=0;document.addEventListener("DOMContentLoaded",function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p==="undefined"){return}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length>=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E<u-1?q.target[E+1]:"";var y="toc_headline_"+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==""){return}while(true){if(A==null||typeof A==="undefined"){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C<B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g("ROOT","",0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s<v.length;s++){t(0,v[s],r,"")}return r}function c(s){var r=document.createElement("div");r.classList.add("b-toc-container");r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginTop;if(toc_options.width=="100%"){r.style.display="block"}else{r.style.width=toc_options.width}var q=document.createElement("p");var w=document.createElement("span");var v=document.createElement("span");var u=document.createElement("span");v.classList.add("b-toc-show-wrap");u.classList.add("b-toc-show-wrap");var y=document.createElement("a");w.innerText="目次";v.innerText="[";u.innerText="]";y.href="javascript:void(0);";q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z==="boolean"?z:e(r,"hide");if(p){y.innerText="非表示";r.classList.remove("hide")}else{y.innerText="表示";r.classList.add("hide")}};y.addEventListener("click",t);t(toc_options.showToc);var x=document.createElement("ul");x.classList.add("toc-root-list");s.children.forEach(function(z,p){n(x,z,(p+1)+"")});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement("li");p.classList.add("toc-list-item");var q=document.createElement("a");p.style.paddingLeft=toc_options.indent;s.style.paddingLeft=0;q.href="#"+u.id;if(toc_options.autoNumber){var t=document.createElement("span");t.classList.add("toc-number");t.innerText=w+"."}var v=document.createElement("span");v.classList.add("toc-text");v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length>0){var r=document.createElement("ul");r.classList.add("toc-sub-list");p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+"."+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition=="firstHeadBefore"||toc_options.insertPosition=="firstHeadAfter"){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition=="top"){r=p}}if(r==null){return}if(toc_options.insertPosition=="firstHeadBefore"){k(r,q)}else{if(toc_options.insertPosition=="firstHeadAfter"){a(r,q)}else{if(toc_options.insertPosition=="top"){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&&p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(window);
</script>
<style type='text/css'>
.b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>
</b:if>
<!-- [END] 目次作成プラグイン-->
<!-- ここまで 目次機能 -->
オプションの設定方法
- target
- autoNumber
- condTargetCount
- insertPosition
- showToc
- width
- marginTop
- marginBottom
- indent
- postBodySelector
- 目次のデザイン変更
20201009 小見出しの表示にバグあり目次機能を従来のものに変更
最終編集日を入れる 2020/09/17
参考▶https://blogiroiro.blogspot.com/2020/03/How-to-display-update-date-on-QooQ.html
参考▶https://longstay-wine.blogspot.com/2020/09/qooq.html
記事更新コード
<!-- 記事更新日コード 始め -->
<span class='updated post-timestamp' id='last-modified' itemprop='dateModified' style='margin-left:10px;'>
<data:post.lastupdatedISO8601/><!-- 右側に表示される -->
</span>
<script>
// 投稿日
var published=new Date("<data:post.timestampISO8601/>");
// 最終更新日
var updated =new Date("<data:post.lastUpdatedISO8601/>");
</script>
<script>
// <![CDATA[
// 投稿日
var pp_Y = ""+published.getFullYear();
var pp_M = ("0"+(published.getMonth()+1)).slice(-2);
var pp_D = ("0"+published.getDate()).slice(-2);
// 最終更新日
var dd_Y = ""+updated.getFullYear();
var dd_M = ("0"+(updated.getMonth()+1)).slice(-2);
var dd_D = ("0"+updated.getDate()).slice(-2);
if(dd_Y == pp_Y && dd_M == pp_M && dd_D == pp_D){
//日付が同じときは出力しない
}else{
var updated_dd ="最終更新日："+ dd_Y+"年"+dd_M+"月"+dd_D+"日";
document.getElementById("last-modified").innerHTML = updated_dd;
}
//]]>
</script>
<!-- 記事更新日コード 終わり -->
コピペ用 HTML
HTMLコードで文字に囲み枠
参考▶https://unknown-blg.blogspot.com/2019/07/blogger5.html
参考▶https://longstay-wine.blogspot.com/2020/09/blogger_97.html
<!-- ここから 囲み枠 機能 -->
<div style="background: #FFFAEA ; border-radius: 10px; border: 2px solid #FFCD07; padding: 10px;">こんな感じの枠です</div>
<!-- ここまで 囲み枠 機能 -->
画像を横並びにするHTML
参考▶https://longstay-wine.blogspot.com/2020/09/blogger_13.html
<!-- ここから 画像横並び 機能 -->
<table cellpadding="0" cellspacing="0"><tbody>
<tr>
<td>
ここを全選択で画像を追加
</td>
<td>
ここを全選択で画像を追加
</td>
</tr>
</tbody></table>
<!-- ここまで 画像横並び 機能 -->
ブログ名の文字サイズ変更
- HTMLの編集画面で「header-title」を検索。
- #header-titleにある「font-size:」の数字を200に変える。
ナビゲーションバー
ナビゲーションバーをヘッダーの下に移動する
QooQの初期設定では、ナビバーはブログ名の上に配置されています。これをブログ名の下に置きました。
- 検索窓を開いて <div id='navigation'> を探します。
- <div id='navigation'>から<div id='header'>の一行上までを切り取る。
- 画面を下にスクロールして、<div id='header'> の69行下の方に1行空いているところがあります。そこに切り取った部分を貼り付けます。
切り取った部分
<div id='navigation'>
<div class='container'>
<label for='navigation-button' id='navigation-label'>=</label>
<input id='navigation-button' type='checkbox'/>
<div id='navigation-content'>
<b:section id='ナビゲーション' maxwidgets='1' showaddelement='no'>
<b:widget id='PageList1' locked='true' title='ページ' type='PageList' version='1'>
<b:widget-settings>
<b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://longstay-wine.blogspot.com/', 'title': 'ホーム／', 'position': 0}, '8840454706777030635': {'href': 'https://longstay-wine.blogspot.com/p/martin-nishida.html', 'title': 'プロフィール／', 'position': 1}, '440603278693236494': {'href': 'https://longstay-wine.blogspot.com/p/blog-page.html', 'title': 'カテゴリー別のサイトマップ／', 'position': 2}, '6012763835641557031': {'href': 'https://longstay-wine.blogspot.com/p/blog-page_22.html', 'title': 'よく読まれている人気記事のサイトマップ／', 'position': 3}}]]></b:widget-setting>
<b:widget-setting name='homeTitle'>ホーム／</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
ナビゲーションバーの背景色を変える
ナビゲーション
*****************************************/
- font-size: 1.5rem; ⇒ font-size: 2.0rem;
- background-color:$(headernavi.background.color); ⇒ #(ff9999);
目次の自動生成 2020/10/09
2020/09/29プラグイン分は小見出し表示が上手くいかず従来使っていたDaphneに変更します。
下記の導入するHTMLソースを＜/head＞の直前に挿入する
<br />
<!-- ここから 目次 機能 -->
<script type='text/javascript'>
if (typeof(jQuery) == 'undefined') {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log("call func");
$('a[name="more"]').after("<div id='toc' />");
var idcount = 1;
var h2cnt = 0;
var toc = '';
var currentlevel = 0;
$(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
var chapid = "chapter-" + idcount;
$(this).before("<div class='chapter-no' id='" + chapid + "' />");
idcount++;
var level = 0;
var chapNo;
if (this.nodeName.toLowerCase() == "h2") {
level = 1;
h2cnt++;
h3cnt = "";
h4cnt = "";
chapNo = h2cnt + ".";
} else if (this.nodeName.toLowerCase() == "h3") {
level = 2;
h4cnt = "";
chapNo = h3cnt
} else if (this.nodeName.toLowerCase() == "h4") {
level = 3;
chapNo = h4cnt
}
if (currentlevel == level) {
toc += "</li><li>";
}
while (currentlevel < level) {
toc += '<ul class="chapter"><li>';
currentlevel++;
}
while (currentlevel > level) {
toc += "</li></ul><li>";
currentlevel--;
}
toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
$(this).html($(this).html());
});
while (currentlevel > 0) {
toc += "</li></ul>";
currentlevel--;
}
if ($(".post-body h2")[0]) {
$("#toc").html(toc);
} else {
$('#toc').attr('class', 'no-toc');
}
});
//]]>
</script>
<style><!--
/* 目次のデザイン */
#toc:before{
content:"目次";/*目次のタイトル*/
padding-left:1em;
font-weight:800;
}
#toc{
background-color:#f6f6f6; /*目次の背景色*/
padding:1em;
display:block;
margin:1em 0;
border:1px solid #ebe5e5;/*目次の枠線*/
}
#toc li{list-style:none; margin-bottom:0.2em;}
#toc ul{margin-bottom:0;}
#toc:before{display:block;text-align:center;}
.chapter-no{position: relative;top:-4.5em;
}
--></style>
<!-- ここまで 目次 機能 -->
<br />
目次タグの挿入
ブログ作成時、HTML画面で記事内の目次を表示させたい箇所に＜div id="toc"＞＜/div＞を挿入すると本文に目次が追加されます。
記事を書いた都度「目次設定をしなければいけない」、手間の様ですが之が逆に素晴らしいプラグインなんです。自由な場所に何カ所でも目次を表示させる事が出来ます。
記事を書いた都度「目次設定をしなければいけない」、手間の様ですが之が逆に素晴らしいプラグインなんです。自由な場所に何カ所でも目次を表示させる事が出来ます。
投稿
0 件のコメント:
コメントを投稿