今まで Blogger のテンプレートは Comtenpo だったのですが、どーしてもモバイルの背景が曇るのが嫌で、QooQ に変更しました。
カスタマイズしやすく、スピードも速く、SEO対策もOKらしいので、大変気に入っています。作者のラムネグ様、本当にありがとうございます。
今回は Customize ver 02 です。
いじれるところも多いので QooQ カスタマイズのシリーズは結構続きそうです。
Google Fonts を導入
先にHTML編集で、この<link>タグを<head>内で読み込みます。
<link href="https://fonts.googleapis.com/css2?family=Federo&display=swap" rel="stylesheet"/>
HTML編集のCSS「全体設定」で
body { font-family: 'Federo', 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro W3', 'ヒラギノ角ゴ Pro W3', 'sans-serif'; /* 変更 */ }
これで Google Fonts「Federo」を読み込むことができました。
CSS でフェードインさせる
WEBページを表示するとき、フェードインさせます。
HTML編集のCSS記述部「全体設定」で
body { animation: fadeIn 1s ease 0s 1 normal; /* 追記, フェードイン1 */ } /* フェードイン2(すべて追加) */ @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }
これだけで、WEBページを表示するとき、ふわっと表示させることができます。
目次を自動生成
Blogger にはデフォルトで目次を生成する機能がないので、こちらのスケ郎のお話さんのブログを参考にさせていただき表示されるようにしました。
見出しタグ(h2,h3,h4…)を自動的に検出して、目次を自動生成します。
</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");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");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");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:#fff; /* 変更 */ border:2px solid #eee; /* 変更 */ border-radius:6px; /* 追加 */ display: table; padding:1.5em; /* 変更 */ margin:2em auto 3em !important; /* 変更, 左右のマージンを auto でセンタリング */ box-shadow:10px 10px 15px -10px #aaa; /* 追加 */ width:80%; /* 変更 */ 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 削除 */ color:#fff!important; /* 目次のホバー時の背景ハイライト 追加 */ background:#6495ed; /* 目次のホバー時の背景ハイライト 追加 */ } /* 項目No */ .toc-number { color:#000; /* 追加 */ } /*表示・非表示ボタンを非表示に*/ .b-toc-container p a { display:none; } /*表示・非表示ボタンを非表示に*/ .b-toc-show-wrap { display: none; } </style> </b:if> <!-- [END] 目次作成プラグイン-->
※ 「非表示」「表示」ボタンを非表示にしたり、CSS を少し変更してセンタリングしたりホバーをつけたりしています。
タイトルと見出しをカスタマイズ
タイトルと見出しをカスタマイズして見栄えを良くします。
HTML編集のCSS記述部「個別記事」で
#single-header-title{ /* 投稿タイトルh1 */ font-size: 2.3rem; font-weight: bold; color: #0c343d; /* 追記 */ margin-left: -10px; /* 追記 */ padding: 0.5em 0em 0.3em 0em; /* 追記 */ border-top: solid 3px #aa0000; /* 追記 */ border-bottom: solid 3px #aa0000; /* 追記 */ } #single-content h2 { /* 投稿見出しh2 */ font-size: 1.76rem; font-weight: bold; padding: 1.0em; /* 変更 */ margin-bottom: 1em; margin-top: 2em; margin-left: -20px; /* 追記 */ position: relative; /* 追記 */ border-radius: 2px; line-height: 1.2; color: #000000; /* 追記 */ background: #96bdfd; /* 追記 */ border-left: double 14px #aa0000; /* 追記,左線 */ border-bottom: solid 3px #aa0000; /* 追記,下線 */ } /* すべて追記 */ #single-content h2::before { /* 投稿見出しh2::before */ position: absolute; content: ''; top: 100%; left: -16px; border: none; border-bottom: solid 15px transparent; border-right: solid 20px #aa0000; } #single-content h3 { /* 投稿見出しh3 */ font-size: 1.6rem; font-weight: bold; width: 90%; /* 追記 */ margin-bottom: 1em; margin-top: 2em; padding: .8em 1.5em; line-height: 1.2; color: #000000; /* 追記 */ background:linear-gradient(to right, #ccddff 0%, transparent 100%); /* 追記 */ border-left: solid 4px #aa0000; /* 追記,左線 */ border-bottom: solid 3px; /* 追記,下線 */ border-image: linear-gradient(to right, #aa0000 0%, transparent 100%); /* 追記 */ border-image-slice: 1; /* 追記 */ } #single-content h4 { /* 投稿見出しh4 追記 */ font-size: 1.6rem; width: 90%; /* 追記 */ padding: .3em 1.5em; color: #000000; /* 追記 */ background:linear-gradient(to right, #ffeeee 0%, transparent 70%); /* 追記 */ border-left: solid 3px #bb8888; /* 追記,左線 */ border-bottom: solid 3px; /* 追記,下線 */ border-image: linear-gradient(to right, #bb8888 0%, transparent 70%); /* 追記 */ border-image-slice: 1; /* 追記 */ }
これでこんな感じになります。
今回は疲れたのでこれでお終い。いかがでしたでしょうか？
この ver02 で１／３ぐらいですかね？
まだまだ続きます。楽しみにしていてください。
0 件のコメント:
コメントを投稿