最近カスタマイズが楽しすぎます。
こんにちは、ツチヤです。
情弱でも触ってれば何とかなるもんですね。というわけで難しいことはさておき、実はずっと気になっていたんですがはてなには、「トップへ戻る」ボタンがないということ。
いくつかカスタマイズ方法を紹介してくれてるブログ（サイト）がありますが、情弱の僕でもコピペだけで済むというありがたすぎる時代です。今回使わせていただいたのはコチラです。
【５分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜
設置方法は記事内を見ていただくとして、使わせていただいたお礼と、とりあえず実装したよというお知らせも兼ねます。
遊びでもイラスト書いてる人は是非
普段から当ブログを読んでいただいている読者様はご存知だと思いますが、一応イラスト書いてます（マウスで）。下手でもいいというところからスタートし、LINEスタンプまで調子に乗って販売したりしてます。
デザインの勉強とか一切したことはありませんが、モノを創り出すようなクリエイティブな作業は結構好きなんです。
PC版
というわけでPC版から。今回付けたのはこれです。
なんと、自分で描いた画像や好きな画像をそのまま「トップへ戻るボタン」に出来るんです。「なんかついてきたぁ！！」と思った人もいるかもしれませんが、お気になさらずに。
本当ははコードの紹介もしようかと思ったんですが、丸パクリになるのでやめてます。下記記事見れば誰でもできます。
【５分でできる】はてなブログで「トップに戻る」ボタンを画像で作成する方法 - 復活のM〜快適生活のすすめ〜
上記画像だと小さいですが記事内で推奨されている通り、『縦, 横＝100px, 100px』 で創ってみました。
スマホ版
スマホも同じように作ってみました。どういうことか分かってませんが<style>～</style>で囲ったところ普通に出来ました。
…地味に鬱陶しい…？と思わないでください。 実はもう少し小さく（50px,50px）して創ってみたんですけど、逆に小さすぎて目立たなすぎるというか何というか…（じゃあ80ぐらいにすればいいとかいわない）。このぐらいなら許容範囲では？と勝手に判断しました。
一応元画像紹介
動物の中でもやはりネコ！猫がイチバン好きなので「上を見上げるネコ」にしてみました。トップに戻りて～よ～という意味を込めまして上を仰いでおります。元画像はコチラ。
我ながら上出来。可愛すぎる。きっと猫好き女子のハートをがっちりキャッチできるに違いない。
最後に
ハウツー紹介ではなく、僕のお披露目記事でしかないんですが、イラスト描いてる人こそ自分のスキルをアッピールも出来るし、こういうちょっとした遊び心あってもいいんじゃないでしょうか。
オリジナルキャラクターでも作って（いつか）ここに使ってみようかなと今から策略してます。便利なので興味ある人はお試しください。
元記事との相違個所
一応元記事と変えた点を記述しておきます。
jQueryのコード
- １０行目（PC,スマホ共）…スクロール位置を500から1000
- 下から３行目（PC,スマホ共）…“//画像をボタンに設定”という文字がそのまま反映されてしまったので消去（当ブログはフッターをいじっている為）※通常はいじる必要ないはずです。
cssのコード
- ４行目、５行目（スマホのみ）…bottom,rightをそれぞれ、10pxを5px
短いですが今日はこれだけ。
以上。
「トップへ戻るボタン」設置したけどなにか？
＜追記＞
先日の記事でこんなお褒めの言葉をいただきました。
自転車および原付を運転するお年寄りの生態。田舎のお年寄りの危険運転を考える - 非アクティビズム。
どうでもいいけどスクロール中に猫(でかい)に触れてしまって強制的にトップまで戻されるのされるのムカつく。/記事は面白かった。
2016/04/20 22:49
なので80px,80pxに変えました。そして画像もこっちになってます。
ユーザビリティにも配慮しないとね！