*くるてぃぷ LIFE*

毎日の生活に ほんの少しの良いヒント (tips) を プラスしよう

はてなブログでトップに戻るボタンを好きな画像にカスタマイズする方法!

 

ブログを公開し初めて2週間ほどが経ちました。まいかるです。

 

記事を書きながら、少しずつ気になるところをカスタマイズできるようになってきました。コードとか本当に分からないど素人ですが、先輩方の記事のおかげでやっと自分がしたい形に整ってきたかな?という感じです。ありがたいです(^^)

 

カスタマイズした中でも、「トップに戻るボタン」が自分の中では一番気に入ってます。矢印とか、他のボタンでも良かったんですけど、いろいろ調べていたら、自分の好きな画像でも作れることを知って、”自分のイラストを使いたい!”もう、その一心でパソコンと格闘しました!

 

自分の好きなイラストで作ると、とっても愛着がわきますよ〜 !わたしはくまのボタンを見る度に、一人でにやけています(笑)

 

ということで今回は、オリジナルのトップに戻るボタンをカスタマイズする方法を、参考にさせていただいた記事と一緒にまとめていきます。

 

 

ボタンにしたい画像を用意しよう

 

わたしは自分で描いたLINEスタンプと同じキャラクターの画像を使うことにしました。ちょうど片手を上に挙げているイラストがあって、「ラッキー!!」

このために描かれたかのようなイラストだったので、ちょうど良いのを見つけて一人でテンション上がりました(^^)/ わーい!

 

それにちょいと「TOP」の文字を付け足して完成♬こんな感じになりました。この画像は透過PNGという形式で保存されています。

 

f:id:nice_creators:20171004155633p:plain

 

透過とは背景が透けているということです。分かりやすいように色を付けてみました。これは透過になっていない状態です。これだと四角の背景が邪魔ですよね。

スマホでブログを見ると、トップへ戻るボタンが文章に重なるように表示されることになります。こんな背景があると文章に重なって読みづらくなってしまいます。

 

f:id:nice_creators:20171015171436p:plain

 

画像を透過PNGに変更するには?

自分でイラストを描いて作りたい方は、そこでの保存形式を透過PNGにしてもらえれば大丈夫です。フリーの画像などを使う方は、もともと透過PNG形式でダウンロードできるサイトから好きな画像を見つけると便利ですよ!

たとえば、こんなサイトがあります。

 

イラスト無料 「透過PNG」のイラスト素材

 

無料イラストなら「イラストAC」

 

かわいいイラストが無料のイラストレイン

 

 

もし使いたい画像が透過PNGでない場合は、変更する必要があります。

そこでおすすめなのが、「PEKO STEP」というサイトです。

WEBブラウザ上で簡単に透過PNG画像を作成できるツール - PEKO STEP

 

まず、透過したい画像をドロップします。

f:id:nice_creators:20171015172617p:plain

 

 

次に、下の「透過対象」が「クリックした色を透過する」になっていることを確認し、背景部分をクリックします。すると、きれいに背景の色だけが消えます。

f:id:nice_creators:20171015172805p:plain

 

あら、すごい!!こうやって見ると若干くまの周りにピンク色が残っていますが、このあとサイズを縮小するとそこまで見えないので問題ないです(^^)

 

 

次に、残ったくまの部分の色を半透明にします。これはなぜかというと、先ほど書いたように、スマホでブログを見た場合、ボタンと文章が重なる部分が出てきます。その時にはっきりとした画像のままだと邪魔になってしまうのです。半透明にすることで、その邪魔な感じが少しなくなるので、少し透ける感じにしておくことをおすすめします。

 

 

やり方は簡単!「透明度」のところを60〜70くらいに設定して、くまの色が付いている部分を全てクリックします。数値は目安なので、気に入らなかったら「編集をやり直す」を押して、もう一度お好みの透明度にしてくださいね。

そして、下の保存ボタンを押したら完了です。

f:id:nice_creators:20171015181423p:plain

 

 

 

画像をボタンのサイズに縮小しよう

 

このままだと大きすぎるので、サイズを調整します。わたしはMacユーザーなので、保存した画像を開いてプレビューからサイズを変更しました。Mac以外の方はそれぞれやり方が違うと思います。説明できず、ごめんなさい。

 

f:id:nice_creators:20171015174833p:plain

 

 

サイズですが、これはお好みで幅を調整してみてください。わたしは「100ピクセル」にしてあります。幅を変えると高さは自動で調整されます。

f:id:nice_creators:20171015174854p:plain

 

 

デザインCSSにコードを書き足そう

 

ここからは、もう自分の力では進めないので (汗)、先輩ブロガーさんの力を貸していただきました。参考にさせていただいた記事はこちらです。とてもありがたかったです。

 

www.already-match.com

 

コードをわたしの記事に書くのは恐縮なので、コードの書き足し部分の作業はこちらの記事を参考にお願いいたします(@_@)!

 

 

自分だけのTOPに戻るボタンで、ブログに愛着を

 

無事にカスタマイズできたでしょうか?最後だけ丸投げ状態になってしまって申し訳ないです!いや、コードの部分はど素人が書くもんじゃないですからね(^^;)分かっている方のを真似させていただくのが間違いないです!

 

オリジナルのボタンになっただけで、自分のブログに愛着がわいてきませんか?また、ブログに来てくれる方の印象にも残るんじゃないかなと思います。完全に自己満のカスタマイズでしたが、楽しくブログを続けていくためにも自分好みに変えていってみてくださいね(^^)*

 

 

f:id:nice_creators:20171004174533p:plain