コピペでカスタマイズ。まったくもって、自分だけのための備忘録
1．ヘッダタイトルと説明
2．サイドバーの「人気の投稿」や「注目の投稿」を簡素にする
3．ブログアーカイブを階層表示にした方が好み
4．自己紹介のベタ打ちを何とかしたい
5．「次の記事」や「前の記事」を記事タイトル併記にする
- 普通の感覚で「CTRL+F」とやると、ブラウザの検索ウインドウがポップアップされますが、ここへ検索wordを入れても検索しません。
- HTMLのリスト上の任意の場所をクリックした状態で「CTRL+F」とやると、リスト最上行にHTMLを検索できる検索ウインドウが現れます。
<!-- set next prev page title start -->
<script type='text/javascript'>
//<![CDATA[
(function(){function b(k){var j=document.createElement("script");j.setAttribute("type","text/javascript");j.setAttribute("src",k);g(j)}function a(){return document.getElementsByTagName("head")[0]}function g(k){var j=a();j.appendChild(k)}var d=5000;var h=document.getElementById("Blog1_blog-pager-older-link");if(h){var f=h.getAttribute("href");e("blog-pager-older-link",f,"addPrevPageTitle")}var c=document.getElementById("Blog1_blog-pager-newer-link");if(c){var i=c.getAttribute("href");e("blog-pager-newer-link",i,"addNextPageTitle")}function e(m,l,q){if(!m){return}if(!l){return}if(l.indexOf("?")!=-1){return}var n=location.protocol+"//"+location.hostname+"/";var k=l.replace(n,"");if(!k){return}k="/"+k;var p=document.createElement("div");var j=m+"-title";p.innerHTML='<a href="'+l+'" id="'+j+'">now loading...</a>';var o=document.getElementById(m);if(!o){return}o.appendChild(p);setTimeout(function(){b(n+"feeds/posts/summary?alt=json-in-script&callback="+q+"&max-results=1&path="+k+"&redirect=false")},d)}})();function addPrevPageTitle(a){addPageTitle(a,"blog-pager-older-link-title")}function addNextPageTitle(a){addPageTitle(a,"blog-pager-newer-link-title")}function addPageTitle(a,e){var d="";if(a.feed.entry){if(a.feed.entry.length>0){d=b(a.feed.entry[0].title.$t)}}var c=document.getElementById(e);if(!c){return}c.innerHTML=d;function b(f){var g=document.createElement("div");if(g.innerText!==void 0){g.innerText=f}else{g.textContent=f}return g.innerHTML}};
//]]>
</script>
<!-- set next prev page title end -->
変更が反映されると、下図のようになりました。
6． SNSアイコンはいらない
7．目次をつけてみた
#single-content h2{font-size: 2.26rem;font-weight: bold;padding: .8em .5em;margin-bottom: 1em;margin-top: 2em;border-radius: 2px;line-height: 1.2;background: $(brand.color);color: $(brand.font);}#single-content h3{font-size: 2.26rem;font-weight: bold;padding-left: .6em;/* padding:.5em; */margin-bottom: .8em;margin-top: 2em;border-bottom: solid 2px $(brand.color);border-left: 8px solid $(brand.color);}#single-content h4{font-size: 2.0rem;font-weight: bold;padding-left: 1.2em;margin-bottom: .5em;border-left: 4px solid $(brand.color);}
8．サムネル画像を四角にする
2か所の変更を行います。デフォルトでは、border-radius: 50%で丸になってます。0%がシャープエッジなので、4pxのr面取りを行いました。
.list-item-img{ のすぐ下にある
border-radius: 50%; をborder-radius: 4px; /* 50%→4pxに変更して丸カド正方形に */
.mrp-post-img{ のすぐ下にある
border-radius: 50%; をborder-radius: 4px; /* 50%→4pxに変更して丸カド正方形に */
9．「前の投稿」、「次の投稿」を記事タイトル表示にする
 |
