※アフィリエイト広告を利用しています

SEO ブログ マネタイズ

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

投稿日:




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

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

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

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

 

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

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

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

 

PC版

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

f:id:Daisuke-Tsuchiya:20160420191256p:plain

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

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

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

 

スマホ版

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

f:id:Daisuke-Tsuchiya:20160420223546p:plain

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

 

一応元画像紹介 

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

f:id:Daisuke-Tsuchiya:20160420183049p:plain

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

 

コード

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

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


gist.github.com

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

 

広告

最後に

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

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

 

 

元記事との変更個所

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

jQueryのコード

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

cssのコード

  • 5行目(PCのみ)…rightを300px
  • 4行目、5行目(スマホのみ)…bottom,rightをそれぞれ、5px

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

以上。

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

 

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

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

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

2016/04/20 22:49

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

f:id:Daisuke-Tsuchiya:20160421112921p:plain

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

  • この記事を書いた人

つっちー。

管理人の「つっちー。」です。 「非アクティビズム。」は、主に管理人が気になったモノやコトを紹介するエンタメメディアです。 ガジェット/アプリ/アウトドア全般

-SEO, ブログ, マネタイズ

Copyright© 非アクティビズム。 , 2024 All Rights Reserved.