Bloggerテンプレート『Prime ZELO』見出しの装飾などプチカスタマイズ

このブログでは『Prime ZELO』というテンプレートを使用しています。
とてもシンプルで見やすいので、有料ですが思い切って購入しました。
製作者さんのブログ（Bloggerなび）から購入することができます。
▶https://blogger-nav.blogspot.com/


さて今回、久しぶりに　”見出しの装飾”　の変更をしようとしたところ、意外と手間取ってしまったので、昔やったちょこっとカスタマイズも含めて、健忘録として記載しておこうと思います。

見出し・小見出しの装飾

HTML編集画面

Blogger ＞ テーマ ＞ HTMLの編集　に行きます。

/* ----- 記事ページ ----- */　
の下の方にある
.single .entry-content h2 {　}

この{  }の中をカスタマイズします。
（⌘+F で検索すると早く見つけることが出来ます）

※他の部分にある ”h2タグ” を変更すると、TOPページの記事のタイトルにもh2タグが使われているため、連動して変更されてしまうので注意です。

こんな感じに見出しを装飾しました

見出しh2は、このように変更しました。

1. .single .entry-content h2 {
2. border-bottom: solid 3px #ea9999;
3. margin-top: 2em;
4. padding: .25em .75em;
5. color: $(post.h2.color);
6. }

小見出しh3も変更。

1. .single .entry-content h3 {
2. border-bottom: dashed 3px #ea9999;
3. margin-top: 2em;
4. color: $(post.h3.color);
5. }

記事のタイトルのフォントサイズも少し大きくしました。

1. .single .entry-title { /* 記事タイトル */
2. color: $(post.title.color);
3. font-size: 1.8em;
4. }

引用<blockquote>と、水平線<hr>の変更

Blogger ＞ テーマ ＞ カスタマイズ ＞ 上級者向け ＞ CSSを追加
に行き、下記を追記しました。

1. blockquote {
2. padding: .75em .75em;
3. border: 2px solid #ccc;
4. border-radius:6px;
5. font-size: normal;
6. text-align: left;
7. }
10. hr {
11. border-top: 1px dotted #ccc;
12. border-bottom: 0px;
13. }

”Bloggerなび”にやり方が書いてあるカスタマイズ

製作者さんがやり方を記載してくれているので、そのままコピペしたものです。

TOPの記事にラベルを表示する方法
▶https://blogger-nav.blogspot.com/2018/09/toporange-zelo.html


【Bloggerコピペ】HTMLウィジットでプロフィールを作ろう
▶https://blogger-nav.blogspot.com/2018/08/htmlok.html

こんなプロフィールが作れます

ページトップボタンを設置

これは、"ウラの裏"というブログに細かくやり方が記載されているので、そのままコピペで出来ました。ありがとうございます！
▶https://www.ura-no-ura.com/2018/04/setting-page-top-button.html

やり方：
Blogger > レイアウト　に行き、
フッターに『HTML/JavaScript ガジェット』を追加。

下記コードを貼り付けるだけ。

1. <p id="page-top"><a href="#wrap">TOP</a></p>
4. <style type="text/css">
5. /* PageTopボタン基本設定 */
6. #page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
7. #page-top a {display: inline-block; text-decoration: none;
8. background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
9. height: 60px; width: 60px; line-height: 60px;
10. border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
11. #page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}
13. @media screen and (min-width: 0) and (max-device-width: 479px) {
14. #page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
15. font-size: 85%;}
16. }
17. @media screen and (min-width: 480px) and (max-device-width: 666px) {
18. #page-top {bottom: 10px; right: 15px;}
19. }
20. @media screen and (min-width: 667px) and (max-device-width: 1023px) {
21. #page-top {bottom: 10px; right: 15px;}
22. }
23. </style>
26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
27. <script type="text/javascript">
28. $(function() {
29.     var topBtn = $('#page-top');
30.     topBtn.hide();
31.     //スクロールが100に達したらボタン表示
32.     $(window).scroll(function () {
33.         if ($(this).scrollTop() > 100) {
34.             topBtn.fadeIn();
35.         } else {
36.             topBtn.fadeOut();
37.         }
38.     });
39.     //スクロールしてトップ
40.     topBtn.click(function () {
41.         $('body,html').animate({
42.             scrollTop: 0
43.         }, 500);
44.         return false;
45.     });
46. });
47. </script>

---

『srctohtml ソースをHTMLで見やすく出力するツール』を使用しました。 ▶http://marginalsoft.com/tools/srctohtml/