【はてなブログ】上に戻るボタンをオリジナル絵（画像）で設置してみる

こんにちは、木ノ下コノキ（@kinoshitakonoki）です。

PCからこれを見ている人は見れていると思うけど、ページをスクロールしていくとサイドバー側にコノキの絵がひょこんと現れると思うのです。

（ちなみに3/24現在はレスポンシブデザインにしてるのでスマホでも見られます。指を画面左に滑らせれば、右端にひっそりといます）

先日、Twitterで出してみたところ、思わぬ反響があったので、今回記事にします。

上に戻るボタンを
自分の絵でやってみた( * ॑꒳ ॑* )

これもやってみたかったひとつだから、できて満足！

洋服と口だけ色入れてないから、背景と共に透過されてて、それはそれで面白いw pic.twitter.com/FEu10Mtf32
— 木ノ下コノキ＠難病 (@kinoshitakonoki) 2019年3月15日

こんな風に。

上に戻るよって、コノキキャラがスクロールするとひょこんと現れます( *´艸｀)

ここをクリックすれば、ページトップに戻ります。

じつはこれ、私の大好きな絵師さん兼ブロガーさんの、漆うしるさん（漆うしる (@UrushiUshiru) | Twitter）のまねっこなんですよね。

www.itjigoku.com

昨年（2018年）５月、上記の記事をアップしていたうしるさん。

この記事見て「はっわー、可愛い♡」となったと同時に、「自分もこれやってみたいーーーー」とコメントしてから早１０か月。

やっと先週にやれましたわ。

やってしまいましたわ。

そして今回記事にもさせて貰いました。

タイトルも似たようになってごめんなさい...

さて長ーい前置きははやめてさっそく作り方いきますね

まずは画像から作っていきましょうか。

画像の作り方
「デザイン」→「カスタマイズ（スパナマーク）」→「デザインCSS」を開く
- デザインCSSに下記のCSSをコピーして貼る
「デザイン」→「カスタマイズ（スパナマーク）」→「フッタ」を開く
- フッタに下記のHTMLをコピーして貼る
- このときの注意点
「変更を保存する」をします
まとめ

画像の作り方

１. 画像編集ソフト、イラストソフトなどがあれば好きにイラストを描いてみましょう

（コノキはCLIP STUDIO PAINT PROを使用しています）

300×300px　350dpiで用紙を用意します。そこに、上に戻るボタンだと分かるように絵を描きましょう

f:id:kinoshitakonoki:20190324101023j:plain

２. 色を入れたいところすべてに色を入れます

白にしたいところも白を入れてください。あとから背景透過したときに中身も透過されてしまいます。

f:id:kinoshitakonoki:20190324101804j:plain

じゃないとこーんな風に口の中も洋服も透過されちゃうよ（笑）コノキがこの状態ですね

（※この画像は例として出すためにトーンを貼っています）

f:id:kinoshitakonoki:20190324102302p:plain

３. 背景透過させる

さて背景透過させたら、次はブログの編集に移りましょうか。

「デザイン」→「カスタマイズ（スパナマーク）」→「デザインCSS」を開く

デザインCSSに下記のCSSをコピーして貼る

/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:0px;
right:0px;
color: #ffffff; /* 文字色 */
font-size:0px;
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 0px 0px;
border-radius: 50%; /* ボタンの丸み */
opacity: 1.0; /* ボタンの透明度 */
z-index: 99;
}
/* ページトップへ戻るボタン：ホバー時 */
#pagetop:hover {
color: #ffffff; /* 文字色 */
opacity: 0.7; /* ボタンの透明度 */
}
#pagetop img {
width:150px;
height:150px;
}

「デザイン」→「カスタマイズ（スパナマーク）」→「フッタ」を開く

フッタに下記のHTMLをコピーして貼る

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が200を超えた場合
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});
// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>