はてなブログでトップに戻るボタンを好きな画像にカスタマイズする方法!2017-10-15はてなブログでトップに戻るボタンを好きな画像にカスタマイズする方法!ブログTweetブログを公開し初めて2週間ほどが経ちました。記事を書きながら、少しずつ気になるところをカスタマイズできるようになってきました。コードとか本当に分からないど素人ですが、先輩方の記事のおかげでやっと自分がしたい形に整ってきたかな?という感じです。ありがたいです(^^)カスタマイズした中でも、「トップに戻るボタン」が自分の中では一番気に入ってます。!わたしはくまのボタンを見る度に、一人でにやけています(笑)ということで今回は、オリジナルのトップに戻るボタンをカスタマイズする方法を、参考にさせていただいた記事と一緒にまとめていきます。ボタンにしたい画像を用意しよう画像を透過PNGに変更するには?画像をボタンのサイズに縮小しようデザインCSSにコードを書き足そう自分だけのTOPに戻るボタンで、ブログに愛着をボタンにしたい画像を用意しようわたしは自分で描いたLINEスタンプと同じキャラクターの画像を使うことにしました。わーい!それにちょいと「TOP」の文字を付け足して完成♬こんな感じになりました。この画像は透過PNGという形式で保存されています。透過とは背景が透けているということです。分かりやすいように色を付けてみました。これは透過になっていない状態です。これだと四角の背景が邪魔ですよね。スマホでブログを見ると、トップへ戻るボタンが文章に重なるように表示されることになります。こんな背景があると文章に重なって読みづらくなってしまいます。画像を透過PNGに変更するには?自分でイラストを描いて作りたい方は、そこでの保存形式を透過PNGにしてもらえれば大丈夫です。フリーの画像などを使う方は、もともと透過PNG形式でダウンロードできるサイトから好きな画像を見つけると便利ですよ!たとえば、こんなサイトがあります。無料イラストなら「イラストAC」かわいいイラストが無料のイラストレインもし使いたい画像が透過PNGでない場合は、変更する必要があります。STEP」というサイトです。STEPまず、透過したい画像をドロップします。次に、下の「透過対象」が「クリックした色を透過する」になっていることを確認し、背景部分をクリックします。すると、きれいに背景の色だけが消えます。あら、すごい!!こうやって見ると若干くまの周りにピンク色が残っていますが、このあとサイズを縮小するとそこまで見えないので問題ないです(^^)次に、残ったくまの部分の色を半透明にします。これはなぜかというと、先ほど書いたように、スマホでブログを見た場合、ボタンと文章が重なる部分が出てきます。その時にはっきりとした画像のままだと邪魔になってしまうのです。半透明にすることで、その邪魔な感じが少しなくなるので、少し透ける感じにしておくことをおすすめします。やり方は簡単!「透明度」のところを60〜70くらいに設定して、くまの色が付いている部分を全てクリックします。数値は目安なので、気に入らなかったら「編集をやり直す」を押して、もう一度お好みの透明度にしてくださいね。下の保存ボタンを押したら完了です。画像をボタンのサイズに縮小しようこのままだと大きすぎるので、サイズを調整します。わたしはMacユーザーなので、保存した画像を開いてプレビューからサイズを変更しました。Mac以外の方はそれぞれやり方が違うと思います。説明できず、ごめんなさい。サイズですが、これはお好みで幅を調整してみてください。わたしは「100ピクセル」にしてあります。幅を変えると高さは自動で調整されます。(汗)、先輩ブロガーさんの力を貸していただきました。参考にさせていただいた記事はこちらです。www.already-match.comコードをわたしの記事に書くのは恐縮なので、コードの書き足し部分の作業はこちらの記事を参考にお願いいたします(@_@)!自分だけのTOPに戻るボタンで、ブログに愛着を無事にカスタマイズできたでしょうか?最後だけ丸投げ状態になってしまって申し訳ないです!いや、コードの部分はど素人が書くもんじゃないですからね(^^;)分かっている方のを真似させていただくのが間違いないです!オリジナルのボタンになっただけで、自分のブログに愛着がわいてきませんか?また、ブログに来てくれる方の印象にも残るんじゃないかなと思います。(2)人気記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。