ブログに個性を！「トップへ戻るボタン」を画像で設置。イラスト描いてるならオススメ

最近カスタマイズが楽しすぎます。

情弱でも触ってれば何とかなるもんですね。というわけで難しいことはさておき、実はずっと気になっていたんですがはてなには、「トップへ戻る」ボタンがないということ。

いくつかカスタマイズ方法を紹介してくれてるブログ（サイト）がありますが、情弱の僕でもコピペだけで済むというありがたすぎる時代です。今回使わせていただいたのはコチラです。
【５分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜

設置方法は記事内を見ていただくとして、使わせていただいたお礼と、とりあえず実装したよというお知らせも兼ねます。

Contents

遊びでもイラスト書いてる人は是非

普段から当ブログを読んでいただいている読者様はご存知だと思いますが、一応イラスト書いてます（マウスで）。下手でもいいというところからスタートし、LINEスタンプまで調子に乗って販売したりしてます。

デザインの勉強とか一切したことはありませんが、モノを創り出すようなクリエイティブな作業は結構好きなんです。

というわけでPC版から。今回付けたのはこれです。

なんと、自分で描いた画像や好きな画像をそのまま「トップへ戻るボタン」に出来るんです。「なんかついてきたぁ！！」と思った人もいるかもしれませんが、お気になさらずに。

コードの紹介も下記に記してありますが、なにぶん僕自身素人なので詳しいことはわかりかねます。下記記事見れば誰でもできますので当ブログのものはご参考程度に。
【５分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜

上記画像だと小さいですが記事内で推奨されている通り、『縦, 横＝100px, 100px』で創ってみました。

スマホも同じように作ってみました。どういうことか分かってませんが<style>～</style>で囲ったところ普通に出来ました。

…地味に鬱陶しい…？と思わないでください。実はもう少し小さく（50px,50px）して創ってみたんですけど、逆に小さすぎて目立たなすぎるというか何というか…（じゃあ80ぐらいにすればいいとかいわない）。このぐらいなら許容範囲では？と勝手に判断しました。

動物の中でもやはりネコ！猫がイチバン好きなので「上を見上げるネコ」にしてみました。トップに戻りて～よ～という意味を込めまして上を仰いでおります。元画像はコチラ。

我ながら上出来。可愛すぎる。きっと猫好き女子のハートをがっちりキャッチできるに違いない。

変更点はほんの少しで、ほぼ同じですが、コードを下記に記します。元記事の方がわかりやすいと思いますので参考程度にしておいてください。

上のコードを「デザイン＞カスタマイズ＞フッタ」、下のコードを「デザイン＞カスタマイズ＞デザインCSS」にそれぞれコピペです。※ここでは触れてませんが“画像のURL”の変更も忘れずに！

ほとんど同じなんですが、PC版は画像が右端過ぎたので位置を変えてます。※元記事のコードとの変更箇所については後述します。

ハウツー紹介ではなく、僕のお披露目記事でしかないんですが、イラスト描いてる人こそ自分のスキルをアッピールも出来るし、こういうちょっとした遊び心あってもいいんじゃないでしょうか。

オリジナルキャラクターでも作って（いつか）使ってみようかなと今から策略してます。便利なので興味ある人はお試しください。

一応元記事と変えた点を記述しておきます。

８行目（PC,スマホ共）…スクロール位置を1000へ
下から３行目（PC,スマホ共）…“//画像をボタンに設定”という文字がそのまま反映されてしまったので消去（当ブログはフッターをいじっている為）※既に消してあるので関係ないです。そしておそらく通常はいじる必要ないはずです。

短いですが今日はこれだけ。

以上。

「トップへ戻るボタン」設置したけどなにか？

矢野りん MdN 2011-09-26

＜追記＞
先日の記事でこんなお褒めの言葉をいただきました。

自転車および原付を運転するお年寄りの生態。田舎のお年寄りの危険運転を考える - 非アクティビズム。

どうでもいいけどスクロール中に猫(でかい)に触れてしまって強制的にトップまで戻されるのされるのムカつく。/記事は面白かった。

2016/04/20 22:49

なので80px,80pxに変えました。そして画像もこっちになってます。

ユーザビリティにも配慮しないとね！