隣の花の育てかた

~気になるお隣さん【5人家族+ねこ】の家庭事情~

5人家族節約術
ねことの暮らし
我が家の愛用品
子ども3人子育てのあれこれ

TOPページに戻るボタンを画像で設置したら激かわに【はてなブログ】

f:id:Sakuranbox:20210208162953j:image

 

 

ずっとやってみたかったカスタマイズ

 

 

それは【上に戻るボタン】の設置!!

 

 

コピペするだけなのでとっても簡単

好きな画像で作ることができるのでオリジナルのボタンができちゃいます

 

 

ボタン画像に必須な丸くトリミングする便利なツールもご紹介します

 

 

参考になれば幸いです

 

 

 

 

 

完成はこんな感じに

f:id:Sakuranbox:20210208152916j:plain

 

 

可愛い~~~!!!

 

 

文章の邪魔にならないように薄めで作ってみました

 

 

矢印ではないから自分だけのオリジナルボタンができるのはイイですね!

 

 

 

ボタンを設置する前に画像の下準備が必要です
 

 

ちょっと手こずる写真URLと写真を丸くトリミングする便利なツールを先に紹介していきます

 

 

 

画像URLは はてなフォトライフから

 

戻るボタンを設置するにはフォトURLが必要になります

 

 

そのURLを手に入れるためにまず、はてなブログに画像を取り込まなくてはいけません

 

 

私はスマホで画像を作ったので記事の下書きに写真を添付して「下書きを更新する」を押して取り込ませました

 

 

取り込んだらPCを開いて上の黒いタスクバーの四角がいっぱいある「利用中のサービス」からはてなフォトライフに飛びます

 

 

f:id:Sakuranbox:20210207171938p:plain

 

フォルダの中からボタンにする画像をクリック

 

 

表示したら画像にカーソルを合わせて右クリック

画像アドレスをコピーでURLがGETできます

 

 

f:id:Sakuranbox:20210207171928p:plain

 

これで必要な画像URLはOK!

 

 

 

画像を丸くトリミングしたいならこのツールがおすすめ!

 

写真をそのまま使うとどうしても四角くなってしまって丸くできない…

 

 

ボタンに使いたいからどうしても丸くしたい!!

 

 

パワーポイントやペイントで加工することもできるのですが

PCを買い替えたのでペイント3Dになってて使い勝手がわからない!!

 

 

どうしようか…

 

 

そんなときに見つけたサイトがめっちゃ楽に丸くしてくれて余分な手間を省かせてくれました!

 

 

それがこちら☟

 

画像を入れれば自動で丸くトリミングしてくれるので使い勝手が抜群です

 

 

PC初心者にはありがたいツール!!

 

 

丸くしたい画像があるときにも時間短縮になるのでぜひ活用してみてください

 

 

 

【メイン】コピペで簡単!TOPに戻るボタンのCSS

 

参考にさせて頂いたのはこちらのブログです☟ 

 

www.milkmemo.com

 

 

とても分かりやすく説明してくださってます

 

 

その通りにCSSをフッター&デザインCSSに追記していくだけなので簡単に設置する事ができました!

 

 

ボタンのサイズはお好みのサイズを指定します

 

 

私はスマホからでも文章の邪魔にならないようにwidthを70で設定しました

 

 

 

オリジナルのTOPに戻るボタンで差別化しよう

 

戻るボタンは同じようなものばかりで自分だけのオリジナルボタンを作りたい!

 

 

そんな方にピッタリなツールです

 

 

文章の邪魔にならないように薄色で作るのが個人的にはおすすめ!

 

 

最初、濃い色で作ったら目がボタンのほうに行っちゃって文章を読むどころではありませんでした

 

 

今回はずっとやってみたかったTOPに戻るボタンを画像で作ってみました

 

 

オリジナルボタン作ってみてね