最近はてなブログのカスタマイズ記事を書くことが多くなりました。
基本的にはコピペでのカスタマイズ方法です。
コピペメインなので、長いコードを記事に貼り付ける事が結構あります。
閉開式コンテンツで表示・非表示を切り替えたかったのですが、やり方がよくわかりませんでした。
という事でとりあえずのソリューションで、よく見る矢印を設置してみました。
こういうやつです。↓
意味は理解していないのですが、jQuery というのを使うそうです。
jQuery を使うためには以下を「設定」→「詳細設定」→「head に要素を追加」にコピペします。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
※ バージョンは古いかもしれませんので、最新のものにしてください。
上に戻るための矢印は Font Awesome 5 アイコンを使います。
上記と同じ場所に、以下をコピペして下さい。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
※ バージョンは古いかもしれませんので、最新のものにしてください。
スクロール動作の設定
動作を設定するためには以下を「設定」→「デザイン」→「カスタマイズ」→「フッタ」にコピペします。
<!-- ページトップに戻る -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
return false;
});
</script>
矢印アイコンの配置の指定
配置を指定するには以下を「デザイン」→「カスタマイズ」→「デザイン CSS」にコピペします。
/*上に戻るボタン関係*/
#page-top {
display:none;
position:fixed;
bottom:20px;
right:10px;
margin: 0;
padding: 0;
cursor:pointer;
z-index: 10;
}
#move-page-top {
display:block;
color:rgba(0,0,0,0.4);
cursor:pointer;
}
#move-page-top:hover {
color:rgba(0,0,0,0.7);
}
設定はこれで終了です。
なお、今回のカスタマイズはシーナさんのブログ、「インサイド シーナ」を参考にさせて頂きました。
2018年 はてなブログに 上に戻るボタン をjQueryを使用して配置する方法 - インサイド シーナ
お世話になりました。m(__)m
↓ ランキングに参加しています。よろしければポチッとして下さい。
