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

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

  • この記事を書いた人

つっちー。

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

おすすめポケットWi-Fi・モバイルルーター

当サイトで、多く紹介している中華デバイスの弱点といえば、対応電波の弱さ(少なさ)です。

都市部はほぼ問題なく使えるものの、山間部はやや心許ないというのが現状です。

そこで、対応策として、対応電波の多いSIM(ソフトバンク系)を新たに契約するか、「モバイルルーター」を契約するかの二択となります。

当サイトでは、断然モバイルルーターをおすすめします。

理由は単純、すぐに使えて(抜き差しする必要もなく)複数端末でも使用でき、あらゆる作業が快適に行えるからです。

また、中華端末に限らず、外出先で通信デバイスを使用する機会が多い方ならなおさら、フリーWi-Fiはセキュリティが心配ですし、かと言ってデザリングではサクサク作業するとなると厳しいですよね。

当メディア管理人が実際に使って満足だった「おすすめのWi-Fiルーター」を“厳選して”います!

お得なキャンペーンも開催しているので、実質無料で契約できちゃうかも?!

この機会にぜひチェックしてみてください!

BroadWiMAX

最大速度708Mbps最大下り速度440Mbps対応の「Broad WiMAX」。

月額は2,726円とリーズナブル。提供エリア都市部はほとんどカバー、速度も早く回線も安定しています。

今なら初期費用や端末代金が無料のキャンペーンの他、工事の必要がなく即日発送ですぐに使えます。

月あたり約100GBまで使えるため、実質これ一台でほぼ無制限にネット利用が可能です!

これまでモバイルルーターはいくつか試してきましたが、「Broad WiMAXのW05というモデルのギガ放題プラン」が、トータルしておすすめです!

CHECK!!

  • WiMAX業界最安級、月額2,726円
  • 全国主要都市の実人口カバー率99%超
  • 最大708Mbpsの高速通信
  • 工事不要、最短当日利用可能

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

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