月収が12万しかないので、お金稼いでみた

超初心者のアフィリエイト実践記

トップに戻るボタンを自分で作ってみた【かわいい柴犬】

 f:id:sibalove:20171013204759j:plain

 

こんにちは、しばらぶです!

はじめましての方ははじめまして。

 

画面右下にいる子を見て、既に気づいた方もいらっしゃるかもしれませんが、今回は「トップに戻る」のボタンについてです。

 

以前からこちらのサイト様のオオカミの「上に戻る」ボタンが気になっておりました。

www.already-match.com

 

こちらの記事を見て私は、

f:id:sibalove:20171013142742j:plain

 

うおおおお!私も柴犬の上に戻るボタンが作りたい!!!

 

という熱い思いがついに抑えきれなくなったので、休日をフルに使って柴犬のトップに戻るボタンをカスタマイズしていこうと思います。

 

 

イラストを描く

まずはどんなトップに戻るボタンにするか考えます。

もちろんフリーのイラスト素材から探してきてもいいですが、筆者の場合、異常なまでの柴犬へのこだわりがあったので、自分で描くことにしました。

 

ラフを描く

必要なものは紙とペンです。

所要時間約3分で案外すんなりとデザインが決まりました。(絵が下手くそなのは大目に見てください)

f:id:sibalove:20171013143700j:plain

 

個人的には可愛く書けたかなと思うので、これでいこうと思います。

 

デジタルで描く

用意するもの

・お絵かきソフト(絵が描ければなんでもOK)

・スキャナ(写真を撮ってもOK)

ペンタブレット(あると描きやすい)

 

お手持ちのイラストツールを使用してデジタルのイラストを描きます。

筆者は一昔前にデジタル絵にはまっていた時のもので、SAIというソフトを持っていたのでそれを使用しました。

 

ペイントで描く!という人はペイントでも描けると思いますが、それなりのものを描きたい場合はそれなりのソフトやペンタブはあった方が描きやすいです。

 

↓スキャンして

f:id:sibalove:20171013150130j:plain

 

↓ペンタブで描く

f:id:sibalove:20171013150136j:plain

 

【中古】ワコム(WACOM)WACOM Bamboo Comic (CTH-461/S1)【291-ud】

価格:5,162円
(2017/10/13 15:09時点)
感想(0件)

久しぶりのデジタル絵に四苦八苦しながら描いた絵がこちら↓

f:id:sibalove:20171013164517j:plain

まぁ、こんなもんですよね。

 

トップに戻るのボタンはかなり小さくなるので細かいところは気にしないことにして、次に行きましょう!

 

画像のサイズを変更する

 

ここからは 自分の力ではできないので、以下のサイト様を参考にさせていただきました。

 

www.already-match.com

demacassette2.hateblo.jp

 

大きさは60~90pxくらいがよさそうということだったので、SAIで幅70縦85に設定しました。(もちろんペイントでもできます。)

 

ちなみに、SAIをお使いの場合はPNG型式で保存すると、こういったウィンドウが開きます。

f:id:sibalove:20171013195711p:plain

ここで「32bpp.ARGB(不透明度あり)」にすると透過処理された画像で保存できます。あとで透過処理しなくていいのでちょっとだけ楽です。

もしSAIを使って描こうという方がいましたら参考にどうぞ。

 

サイズを調節した画像がこちら↓

f:id:sibalove:20171013193546p:plain

 

かろうじて「Topへ」の文字も読めるので、このくらいでいいかなと思います。

 

HTMLとCSSをコピペする

先ほどのサイト様の手順に従ってコードをコピペします。

 

HTMLは、ダッシュボード→デザイン→カスタマイズ→フッタへ貼ります。

そして、画像のURLを書き換えます。

f:id:sibalove:20171013200943p:plain

 

CSSはダッシュボード→デザイン→カスタマイズ→デザインCSSへ。

f:id:sibalove:20171013200946p:plain

 

※詳しい手順およびソースは上記サイト様参照です。

 

結果

f:id:sibalove:20171013183017p:plain

 

無事に「トップに戻る」のボタンを出現させることができました!!

 

なんだよめっちゃかわいいやん!!(←自画自賛

一応スマホの画面からも確認してみました。

 

f:id:sibalove:20171013194402p:plain

 

いい感じですね!

透過処理もできています♪ 

実際に柴犬を押してみると、シューンと上まで戻ってくれるので、動作も大丈夫そうです。

 

最後に

今回は、念願のトップに戻るのボタンをカスタマイズしていきました!

 

なんだかこの柴犬の存在だけで、急に癒し系のブログになった気がします(笑)

 

ソースもほとんどコピペだけで、簡単に設定することができました。(参考にさせていただいたサイト様に感謝)

 

興味のある方はぜひ、オリジナルのイラストを描いて、ブログのカスタマイズを楽しんでみてはいかがでしょうか?

 

折角描いたので、トップに戻りたいときは柴ちゃんをクリックしていってくださいね!

あなたをトップまで導いてくれますよ(笑)

 

f:id:sibalove:20171013193546p:plain