ブログカスタマイズの備忘録を忘れないうちに・・・
毎回リニューアルするたびに、今回を最後に永遠にこのデザインを使っていくぞ！と思うのですが、やっぱりちょいちょい変えたくなるのがオナゴゴゴロ。 そのたびに、導入する定番カスタマイズがあるのですが、今回参照していたブログが消えてしまいました。リンク先が消えると、他力本願なわたしはとっても混乱するわけで。二度と混乱しないよう、自分用にメモも残しておくことにします。 すみません、完全に自分用備忘録記事となります。
追記11/3
欲が出てこねくり回して崩壊。最初からやり直してマイナーチェンジしました（恥。
最終更新日の表示
これ→
日記記事がアップデートされていたら、情報更新ではなく「誤字脱字」修正だと思ってください。
貼り付け場所「デザイン」-「記事」-「記事下」
<!--日付更新--> <!--[if lt IE 9]> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script> <!--<![endif]--> <script> /* * Show lastmod for Hatena Blog v1.0.0 * Date: 2016-12-20 * Copyright (c) 2016 https://www.tsubasa-note.blog/ * Released under the MIT license: * http://opensource.org/licenses/mit-license.php */ ;(function($) { 'use strict'; var urls = [], opts = {cache: false, dataType: 'xml'}, p, _ua = (function(u){ return { Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) || u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1, Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1 } })(window.navigator.userAgent.toLowerCase()), url = '<b>https://clara-stoopman.hatenablog.jp/sitemap.xml</b>'; // ここにサイトマップへのURLを入力してください。 function parseSitemapXML(url) { var d = new $.Deferred; $.ajax($.extend(opts, { url: url })).done(function(xml) { $(xml).find('sitemap').each(function() { urls.push($(this).find('loc').text()); }); d.resolve(); }).fail(function() { d.reject(); }); return d.promise(); } function findURL(url) { $.ajax($.extend(opts, { url: url })).done(function(xml) { var isMatched = false; $(xml).find('url').each(function() { var $this = $(this); if ($this.find('loc').text() === location.href) { isMatched = true; appendLastmod($this.find('lastmod').text()); return false; } }); if (!isMatched) nextURL(); }).fail(function() {}); } function nextURL() { urls.shift(); if (urls.length) findURL(urls[0]); } function appendLastmod(lastmod) { var $container = $('<div></div>', {'class': 'lastmod'}).text(lastmod.replace(/T.*0/,"")); if ($('.entry-header > .date').get(0).tagName.toLowerCase() === 'span') { $('.entry-title').before($container); } else { $('.entry-date').append($container); } } p = parseSitemapXML(url); p.done(function() {findURL(urls[0])}); p.fail(function(error) {}); })(jQuery); </script>
※36行目は積載サイトのURLに変更する。 貼り付け場所：「CSS」
/*更新日表示*/
.lastmod {
color: #999;
background-color: #fff;
padding: 5px 6px;
text-decoration: none;
font-size: 100%;
display: inline;
margin-left: 10px;
}
.lastmod::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f021';
}
.entry-date a {
padding: 5px 6px !important;
}
.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: FontAwesome;
content: '\f017';
}
参照サイト 【表示の不具合に対応】はてなブログで記事の最終更新日を自動表示させる方法を紹介しますの！ - 元IT土方の供述
記事カテゴリーの階層化（パンくずリスト対応）
カテゴリー「日記」「練習帳」の下には、サブカテゴリー階層を設定しています。 ※個人用備忘録のためソース掲載しかしておりません（カテゴリの設定については参照先をご覧ください） 貼り付け場所：「デザイン」-「フッタ」
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script> <script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>
※カテゴリ非表示のため、CSSは設定してていません。 パンくずリストのためだけに設置中。 ※スクリプトデータは参照先ユーザのサーバーに依存 参照先： 【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ
読了時間
これ→
参照先が消えたため、scriptメモのみ
貼り付け場所：「デザイン」-「記事」-「記事上」
<script type="text/javascript"> addEventListener('DOMContentLoaded', function() { var wpm = 700; var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length; var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>'; $('.entry-content').prepend(message); }, false); </script>
3行目の700が、1分で読める文字数の設定です。 平均より少し早い速度に設定しています（平均600文字/分） 参照サイト: 速読の理論 あなたの読書スピードと、日本人平均値の関係 | SP速読学院
目次ボタン
「目次を「へこへこ」させよう！」という、参照先のキャッチコピーにひとめぼれしました（笑
これ→
ひらくと→
貼り付け場所：「デザイン」-「フッター」
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script>// <![CDATA[ //クリックすると表示される目次 $(function(){ var $Contents = $(".table-of-contents") $($Contents).before('<div class="show-area">▶目次を開く</div>'); $(".show-area").click(function(){ var $this = $(this); if($Contents.css('display') == 'none'){ $Contents.slideDown(400), $this.text("▶目次を閉じる") }else{ $Contents.slideUp(400), $this.text("▶目次を開く"); }; }); }); // ]]></script>
貼り付け場所：「CSS」
/*============================================
折りたたみの目次 ボタン部分のカスタマイズ
================================================*/
/*折りたたみの目次 目次を見る 記事挿入 カスタマイズ*/
.table-of-contents{
display: none;/*元の目次を消す*/
}
/*ボタンの見た目について*/
.show-area{
display: inline-block; /*なくても動く、一応残してある*/
cursor: pointer; /*触れた時の、カーソル変化*/
padding: 0.5em 1em;
margin-bottom: 1em; /*ボタンと目次との余白*/
text-decoration: none;/*アンダーラインを消す、多分要らない*/
background: #f7f7f7; /*背景色*/
border-left: solid 6px #ff7c5c;/*左線*/
color: #ff7c5c;/*文字色*/
font-size: 120%; /*ボタン内の文字サイズ*/
font-weight: bold; /*文字を太くする*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*水平右・垂直下・ぼかし距離・広がり距離・red・green・blue・透明*/
}
.show-area:active{ /*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
/*=======================================
目次の見た目カスタマイズ
========================================*/
/*既存のデザイン初期化*/
.entry-content .table-of-contents {
background: none;
border: none;
border-radius: 0;
}
/*目次から 小見出し を消すCSS */
.table-of-contents ul ul{
display: none;
}
/* 目次に「もくじ」を追加 */
.table-of-contents:before{
content: "【もくじ】";
font-size: 100%;
font-weight: bold; /* 文字の太さ */
}
/*目次横に、番号をつける*/
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;/*見出し左の記号*/
}
/*目次の形・文字の位置・文字の大きさ*/
.entry-content .table-of-contents {
font-size: 90%;
font-weight: bold;
background: #f8f8f8 ; /* 目次の背景色 */
padding: 10px 10px 10px 50px; /*上・右・下・左*/
margin: 0;
margin-bottom:1em;/*見出し下の文字との余白*/
border-radius:5px; /* 目次の枠の角の丸さを調節 */
box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}
/*文字のリンク色変更*/
.table-of-contents a:link{
color:#4169e1; /*リンク色はここを変更*/
text-decoration: none;
}
.table-of-contents a:visited{
color: #8c6a6a; /*訪問済みリンク色はここを変更*/
}
.table-of-contents a:hover{
color: #d2b48c;
text-decoration:underline; /*下線をつける*/
}
参照先： 目次を「ボタン風」にすると楽しい！【はてなブログ・カスタマイズ】 - 役割を引き寄せて！
グローバルメニュー
貼り付け場所：「ヘッター」
<nav class="main-navigation"> <div class="menu-toggle">メニュー</div> <div class="main-navigation-inner"> <ul> <li><a href="https://clara-stoopman.hatenablog.jp/"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li> <li><a href="https://clara-stoopman.hatenablog.jp/archive/category/%E6%97%A5%E8%A8%98"><i class="fa fa-calendar" aria-hidden="true"></i> 日記</a> <ul> <li><a href="#">子カテゴリ1</a></li> <li><a href="#">子カテゴリ2</a></li> </ul> </li> <li><a href="https://clara-stoopman.hatenablog.jp/archive/category/%E6%9D%B1%E4%BA%AC%E3%83%81%E3%83%A3%E3%83%AA%E3%83%B3%E3%82%B3%E6%95%A3%E7%AD%96%E6%97%A5%E8%A8%98"><i class="fas fa-bicycle" aria-hidden="true"></i> 東京探検</a></li> <li> <a href="https://clara-stoopman.hatenablog.jp/archive/category/%E7%B7%B4%E7%BF%92%E5%B8%B3"><i class="fa fa-graduation-cap" aria-hidden="true"></i> 練習帳</a> <ul> <li><a href="#">子カテゴリ1</a></li> <li><a href="#">子カテゴリ2</a></li> </ul> </li> <li><a href="https://clara-stoopman.hatenablog.jp/about"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></li> <li><a href="https://clara-stoopman.hatenablog.jp/mail"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></li> </ul> </div> </nav>
貼り付け場所：「デザイン」-「フッター」
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> (function($) { $(".menu-toggle").on("click", function() { $(".main-navigation").toggleClass("toggled"); }); })(jQuery); </script>
貼り付け場所：「CSS」
/*ナビバーカラー*/
.main-navigation,
.main-navigation ul ul {
background-color: #330000;
}
</style>
参照先： はてなブログテーマ「Innocent」のカスタマイズ（ナビゲーションバー編） - MoonNote カラーコード参照： モノトーン - Mono Tone
はてなブログテーマ「Innocent」のデザインを改修
blog.hatena.ne.jp
Blankについて：基本デザイン以外はほぼプレーン状態なので、カスタマイズ作業が楽になるので選択しました。
一番悔しかったのは、パンくずリストのCSSが好みの設定ではなかったこと。そこだけ少し苦悩してしまいました。
他のテーマだと、CSSの設定があらかじめされているので競合しちゃうの設定がめんどくさくなるので注意
追記11/3
Blankのパンくずリスト位置などを改修したのが「Innocent」ということで、回収されたバージョンで再設定ナビゲーションバーの設定がらくちんになりましたがが、スライドではなくハンバーガーになりました（スマホ）
以下貼り付け場所すべて：「CSS」
全体のフォントサイズを変更
たまーに読んでくれる身内がね、大きな文字じゃないと辛い世代だからサ。少し大きくしたよ。 グーグル先生が推奨している文字サイズは16～17pxだそうで。 赤点もらいたくはないので、先生が許してくれる大きさMAXを設定。
body {
font-size: 17px;
}
ブログタイトル・見出しデザイン
HTMLの「H1~H4」までの指定デザインです。 指定タグ「h1」のデザインです。
H1 ブログタイトル
これ→
h1 {
position: relative;
color: #333;/*タイトルテキストの色*/
text-shadow: 0 0 2px white;
}
h1:before {
content: "";
position: absolute;
background: #9de5ff;
width: 50px;
height: 50px;
border-radius: 50%;
top: 50%;
/* border: dashed 1px white; */
left: -15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}
サブブログタイトル（説明）H2
はてなブログの最大の謎「H2」問題。わたしは「大見出し（H3）」の前に「H2」を設定します。SEOに影響があるのかは不明ですし、詳しい人に尋ねようとググったところで、グーグル教授のロボ助手のコロコロ変わる機嫌なんて誰も把握できないわけで。正直、わたしは「H2が抜ける分にはロボはスキップするだけ」だと思うんですよね。H４の次にH３など数字が逆順になったら「コケる」かもしれませんが。それでもチマチマとH2を設定している理由は、テーマのデザインでH2のCSS設定をしているものを使用する頻度が多いからです。 せっかく作り手がデザインしたのに、使わないのは残念な気がするのです。
追記11/3
変にこだわってめんどくさいことをしてしまいました。きっともう逃れられない。
これ→
/*サブブログタイトル（説明）H2*/
#blog-description {
margin: 0px 0px 0px 25px;
padding: 0;
color: #777;
font-size: 93.8%;
font-weight: 400;
}
h2 {
color: #6594e0;/*文字色*/
/*線の種類（点線）2px 線色*/
border-bottom: dashed 1px #6594e0;
}
記事タイトルH2
これ→
/*記事タイトルH2*/
.entry-title :first-letter {
font-size: 1.3em;
color: #800000;
}
.entry-title :after {
content: "";
display: block;
height: 6px;
background: -webkit-linear-gradient(to right, rgb(255, 215, 0), transparent);
background: linear-gradient(to right, rgb(255, 215, 0), transparent);
}
記事内見出しH2
これ→
/*記事内見出しH2*/
.entry-content h2:first-letter {
font-size: 1.3em;
color: #800000;
}
H3 見出し3
これ→
h3 {
position: relative;
color: white;
background: #81d0cb;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 2.0em;
border-radius: 0.5em;/*角丸*/
}
h3:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
font-weight: 900;
position: absolute;
left : 0.7em; /*左端からのアイコンまでの距離*/
}
H4 見出し4
これ→
h4 {
position: relative;
background: #f4f4f4;
padding: 2px 5px 2px 50px;
font-size: 20px;
color: #474747;
border-radius: 0 10px 10px 0;
}
h4:before {
font-family: "Font Awesome 5 Free";
content: "\f041";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
font-weight: 900;
width: 40px;
text-align: center;
height: 40px;
line-height: 40px;
left: -0.2em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
参照サイト
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
あれれ～？（名探偵風に）記事タイトルに見出し設定されてないんだね～。（笑）
追記11/3
しっかり設定されておりました。されていたからこそ、デザイン設定がめんどくさいことになってしまいました。 二度と壊さないようにちゃんとバックアップとって、今後はせいぜい追加と色替え程度にしていきたいと思いました。
記事内定型文設定（囲み箱等）
これ→
/*囲みbox27INDEX外付け*/
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}
これ→
/*囲みbox28INDEX内右側*/
.box28 {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
border: solid 2px #FFC107;
}
.box28 .box-title {
position: absolute;
display: inline-block;
top: -2px;
right: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #FFC107;
color: #ffffff;
font-weight: bold;
}
.box28 p {
margin: 0;
padding: 0;
}
いつかまた増えたら、別記事にするパターン。
