My Concentration

お金を作る＋お金を増やす＋お金を守る

TOPに戻るボタンをオリジナルカスタマイズ

Talk

f:id:jyonetu:20171101043034j:plain

 

今回はブログの右下にあるTOPへ戻るボタンをリフレッシュしてみたので、記事にしたいと思います！

 

 

 

 

 

 

 

実は色々カスタマイズしてた

f:id:jyonetu:20171101051553j:plain

 

実は今回いじった箇所はTOPへ戻るボタンだけではなく以下をカスタマイズしてみました。

 

 

 

・ブログタイトル＆タイトル画像

・グローバルメニュー

・TOPへ戻るボタン

・その他細かい改造

 

 

 

もっといじりたいところや機能はあるんですが、ゆっくりぼちぼちとやっていきたいと思います。

 

 

ブログタイトルは『NewSpider』ということで、読んで字の如く「ニュースと蜘蛛」をかけてます(笑）

 

 

 

コンセプトは「多くの情報を発信して蜘蛛の巣のようにブログが広がっていくといいな」・・・・要するに多くの人に読んでもらえるようなブログになったらいいなって願いを込めてます。

 

 

 

 

 

で、本題のTOPに戻るボタンのデザインです。

f:id:jyonetu:20171101045204j:plain

 

揖保乃糸。じゃなくて、くもの糸。

 

 

 

一応ブログデザインと統一させたくて作りました。

 

 

 


で、このTOPに戻るボタンをカスタマイズしたわけですが、不思議と今まで感じてたモヤモヤがすっきりしたんです。

 

 

 

「なんかオリジナリティがないなぁ」って気持ち。

 

 

 

デザイン自体はそんなに手の込んだものではないのですが、このちっちゃなボタンがなんか嬉しくて・・・

 

f:id:jyonetu:20171101050454j:plain

 

 

ほんのちょっと手を加えるだけで幸せを味わえました。

 

 

 

 

 

 

 

 

 

 

まずはデザイン画を用意

f:id:jyonetu:20171101052804p:plain

 

自分の好きな画像をペイントソフトやフォトショップなどを駆使して作成しましょう。

 

 

 

 

 

サイズを100x100以内の幅でトリミング！

f:id:jyonetu:20171101053147p:plain

 

なぜか僕はPollarを使ってトリミングしましたが、ペイントソフトで大丈夫です。

 

 

好きなサイズまでトリミングします。

 

 

蜘蛛の糸を伸ばしたかったので僕は60×100pxで作成しましたが、お好みの大きさで。

 

 

 

 

画像を透過させる

 

TOPに戻るボタンは基本左端か右端に設置すると思いますので、サイドバーに裏地の色が被ってしまいます。なので、下記のサイトから透過変換を行いましょう！

 

 

GIF,PNG,JPEG,BMP透過ツール - 画像背景の透明化

 

手軽に透明png 透過png簡単作成フリーソフト（透過gifは作れません）

こちらはgifは透過できませんが、その他は大丈夫です。

 

 

 

 

TOPに戻るボタンを実装する

 

 

TOPに戻るボタンのコード実装はこちらのブログを参考にさせてもらいました。

www.colmin.xyz

 

 

 

 

コード本体はこちら

<!--トップへ移動ボタン-->

<div class="sy-topbtn"><i class="blogicon blogicon-chevron-up"></i></div>
<style>
.sy-topbtn{
    z-index:2;
  position:fixed;
  bottom:0;
  right:5px;
  background-color:rgba(80,81,79,.4);
  display:inline-block;
  padding:10px 15px;
  color:white;
  border-radius:50%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
  $(".sy-topbtn").click(function(){
  $("html,body").animate({scrollTop:0},200);
});
});
</script>

 

上記を「ヘッダー」→「タイトル下」に貼ります。

 

 

 

 

コードの一部をオリジナル画像のURLに書き換える

 

１．自分で作成した画像を記事作成から投稿して、HTML編集を開き、＜p＞＜/p＞で囲まれた部分をコピペします。

 

f:id:jyonetu:20171101055857j:plain

 

 

２．TOPへ戻るボタン本体コードの<i class="blogicon blogicon-chevron-up"></i>を削除して、先ほどの自分の画像のコードに書き換えて、ヘッダ→タイトル下に貼れば完成です。

 

 

<div class="sy-topbtn"><i class="blogicon blogicon-chevron-up"></i></div> <style>

 

 

 

 

 

 

 

 

 

 

 

ブログをカスタマイズすると気持ちいい

f:id:jyonetu:20171101043551j:plain

 

それにしても、色々とブログのカスタマイズをしたわけですが、かなり集中してやったので、時間が経つのがあっという間でした。

 

 

カスタマイズは正直コピペばかりで、まだまだオリジナル感を出しきれてない部分はありますが、とても楽しい作業です。

 

 

トライ&エラーを繰り返して1時間くらい経った頃には頭が湧いてきますが、上手くいった時にはすんんごぉい気持ちいいぃ。

 

 

 

それでは今回はこの辺で！

最後まで読んで頂きありがとうございました！