建設機械を眺める

建設工事、重機をスマホで撮影

トップ > カスタマイズ > ZEN for Hatena Blog ちょっぴりカスタマイズ（備忘録）

ZEN for Hatena Blog ちょっぴりカスタマイズ（備忘録）

カスタマイズ 番外編

シンプルでレスポンシブに対応した「ZEN for Hatena Blog」

blog.hatena.ne.jp

免責事項

  • 当サイトのコンテンツ・情報について、可能な限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもございます。

  • 当サイトからのリンクやバナーなどで移動したサイトで提供される情報、サービス等について一切の責任を負いません。

  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

ヘッダナビゲーションを追加

2020/06/08

月別アーカイブにヘッダー下でもアクセス出来る様にしました

https://gist.github.com/sanographix/6624184

はてなブログテーマ "ZEN for Hatena Blog" で使えるヘッダナビゲーションのコードです · GitHub

  • デザイン>カスタマイズ>タイトル下 >変更を保存する

<nav class="header-nav"> 
<ul>
<li><a href="https://s39c.hateblo.jp/archive/2018">2018</a></li> 
<li><a href="https://s39c.hateblo.jp/archive/2019">2019</a></li> 
<li><a href="https://s39c.hateblo.jp/archive/2020">2020</a></li>
<li><a href="https://s39c.hateblo.jp/about">about</a></li> 
</ul>
</nav>

フォントサイズを変更

2020/06/08

Googleサーチコンソール、モバイル ユーザビリティから
文字が小さいとの指摘でサイズを変更

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

.entry-content {
font-size: 110%;
letter-spacing: 0.1em
line-height: 1.5em;
} 

上に戻るボタンを設置

2020/06/08

toretama.jp

 

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

/* 上に戻るボタン */
.pagetop {
color: #fff; background-color: rgba(0,0,0,0.3);
text-decoration: none;
display: none;
position: fixed;
bottom: 1rem;
right: 1rem;
font-size: 1.3rem;
width: 3rem;
height: 2.5rem;
line-height: 2.2rem;
border-radius: 0.3rem;
text-align: center;
cursor: pointer;
}
.pagetop:hover {
color: #fff !important;
background-color: #5989cf;
text-decoration: none;
}

  • デザイン>カスタマイズ>タイトル下 >変更を保存する

/* 上に戻るボタン */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
jQuery(document).ready(function() {
var offset = 100;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.pagetop').fadeIn(duration);
} else {
jQuery('.pagetop').fadeOut(duration);
}
});

jQuery('.pagetop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

 

前のページに戻るボタンを設置する 

2020/06/08

  • 「前のページ」を「前のページに戻る」に変えました 
  • 純正の矢印を消してFont Awesomeの矢印を使っています（未使用）

simadzu.hatenablog.com

「前のページ」を「前のページに戻る」に変えました 

2020/06/08

  •  デザイン>カスタマイズ>フッタ >変更を保存する

<script>
document.addEventListener('DOMContentLoaded', function() {
if(document.referrer.indexOf(document.domain) > -1) { /* 自分のブログからきたら↓ */
if($('.page-index')[0]) { /* トップページなら↓ */
if(location.search) { /* 「?page=」があるなら↓ */
var str_prev = '<span class="pager-prev"><a href="javascript:void(0);" onClick="history.back(); return false;" rel="prev">前のページに戻る</a></span>';
if($('.pager-next')[0]) { /* 次のページボタンがあったら↓ */
$('.pager').prepend(str_prev); /* 前のページボタンを設置 */
}
else { /* 次のページボタンもないなら↓ */
var str_html = '<div class="pager autopagerize_insert_before">' + str_prev + '</div>';
$('#main-inner').append(str_html); /* 前のページボタンと次のページボタンを設置 */
}
}
}
}
});
</script>

ページャー矢印に「はてなブログアイコンフォント」導入

2020-10-26

www.foxism.jp

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

 

/*<前のページに戻る*/

.pager .pager-prev:before {
font-family: blogicon;
content: '\f005';　/*　<　*/
font-weight: 900;
font-size: 100%;
color: #777;
padding: 0.1em 0.6em;
}

 

/*次のページ>*/
.pager .pager-next:after {
font-family: blogicon;
content: '\f006';　/*　>　*/
font-weight: 900;
font-size: 100%;
color: #777;
padding: 0.1em 0.1em;
}

 

/* .pager 位置調整*/
.pager {
margin: 20px 0;
padding: 0 0 50px 0;
text-align: center;
border-bottom: 1px solid #ddd;
font-family: 'Source Code Pro',sans-serif;
font-size: 100%;

}

ページャー矢印にFont Awesome導入（未使用）

  • 設定>詳細設定>headに要素を追加>変更する

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

/* ページャーFont Awesome導入*/
.pager .pager-prev:before {
font-family: "Font Awesome 5 Free";
content: '\f060';
font-weight: 900;
font-size: 120%;
color: #777;
letter-spacing: 6px;
}

.pager .pager-next:after {
font-family: "Font Awesome 5 Free";
content: '\f061';
font-weight: 900;
font-size: 120%;
color: #777;
}

 純正のページャー矢印を不表示 

2020/06/08

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

/*純正の矢印を不表示*/
.pager-arrow{ display: none;
}

 リンク説明文の重なりを解消

2020/06/08

スマホでの見た目が台無しなので何とかしたかった

  • メディアクエリでPCとスマホを使い分けてます

 スマホだけページャーのリンクをずらす （pcはそのまま）

2020/06/08

  • デザイン>カスタマイズ>デザインCSS>変更を保存する

/* スマホだけページャーのリンクをずらす */
@media screen and (max-width:767.98px) { .pager span.pager-next a:before{
content:'\A\A';
white-space: pre;
}
.pager{
position:relative;height:6em
} }


スマホでページャーを不表示にする（未使用）

2020/06/08

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

 /*スマホでページャー不表示 */
@media screen and (max-width:767.98px) { .pager{
display:none !important;
} }
mshitech.hatenablog.com

リンク説明文の下に点線を引く

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

.pager a {
color: #333;
border-bottom: dashed 1px #777;
}

目次のカスタマイズ

2020-10-26

mudaide.hatenablog.com

 

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

  /* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}
/* 目次のカスタマイズ */
.entry-content .table-of-contents {
background: #f8f8f8 ; /* 目次の背景色 */
border-radius:5px; /* 目次の枠の角の丸さを調節 */
border:1px solid #707070;
margin: 0 0 1.6em;
padding: 1.6em 1.6em 1.6em 3.2em;
}

投稿日時の表示を変更 

2020/06/08

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

.date .date-year:after {content: "/";}
.date .date-month:after {content: "/";}
.date .hyphen {display: none;}

 

ヘッダナビゲーションの項目に「はてなブログアイコンフォント」設置

2020/06/08

www.foxism.jp

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

.header-nav a:before{
font-family: blogicon;
content: "\f000";
padding: 0.25em 0.5em;
color:#d7470f;
}

ブログアイコンをtitleの前に表示させる

2020/06/08

hitoribucho.hatenablog.com

  • デザイン>カスタマイズ>デザインCSS >変更を保存する

#title :before {
content:"";
display:inline-block;
width:.1em;
height:.3em;
background:url(https://cdn.image.st-hatena.com/image/square/7acea0611b803b319d3010a5ee1ebcd39d99f214/backend=imagemagick;height=128;version=1;width=128/https%3A%2F%2Fcdn.user.blog.st-hatena.com%2Fblog_custom_icon%2F155848334%2F1591323515884797) no-repeat;
background-size:contain;

padding: 0.25em 0.5em;
position:relative;
line-height:2em;

}

画像の延滞読み込みを指定する

2020/07/01

tommyoctopas.hatenablog.com

  •  デザイン>カスタマイズ>フッタ >変更を保存する

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

<script>

$(".hatena-fotolife").addClass("lozad");

$(".hatena-fotolife").each(function(i, img) {
$(img).attr("data-src", ""+$(img).attr("src")+"");
$(img).attr("src", "");
});

$(".urllist-image").addClass("lozad");

$(".urllist-image").each(function(i, img) {
$(img).attr("data-src", ""+$(img).attr("src")+"");
$(img).attr("src", "");
});

const observer = lozad('.lozad', {
rootMargin: '200px 0px'
});
observer.observe();
</script>

 tommyoctopas.hatenablog.com