ずっとやってみたかったカスタマイズ
それは【上に戻るボタン】の設置！！
コピペするだけなのでとっても簡単
好きな画像で作ることができるのでオリジナルのボタンができちゃいます
ボタン画像に必須な丸くトリミングする便利なツールもご紹介します
参考になれば幸いです
- 完成はこんな感じに
- 画像ＵＲＬは はてなフォトライフから
- 画像を丸くトリミングしたいならこのツールがおすすめ！
- 【メイン】コピペで簡単！ＴＯＰに戻るボタンのＣＳＳ
- オリジナルのＴＯＰに戻るボタンで差別化しよう
完成はこんな感じに
可愛い～～～！！！
文章の邪魔にならないように薄めで作ってみました
矢印ではないから自分だけのオリジナルボタンができるのはイイですね！
ボタンを設置する前に画像の下準備が必要です
ちょっと手こずる写真ＵＲＬと写真を丸くトリミングする便利なツールを先に紹介していきます
画像ＵＲＬは はてなフォトライフから
戻るボタンを設置するにはフォトＵＲＬが必要になります
そのＵＲＬを手に入れるためにまず、はてなブログに画像を取り込まなくてはいけません
私はスマホで画像を作ったので記事の下書きに写真を添付して「下書きを更新する」を押して取り込ませました
取り込んだらＰＣを開いて上の黒いタスクバーの四角がいっぱいある「利用中のサービス」からはてなフォトライフに飛びます
フォルダの中からボタンにする画像をクリック
表示したら画像にカーソルを合わせて右クリック
画像アドレスをコピーでＵＲＬがＧＥＴできます
これで必要な画像ＵＲＬはＯＫ！
画像を丸くトリミングしたいならこのツールがおすすめ！
写真をそのまま使うとどうしても四角くなってしまって丸くできない…
ボタンに使いたいからどうしても丸くしたい！！
パワーポイントやペイントで加工することもできるのですが
ＰＣを買い替えたのでペイント３Ｄになってて使い勝手がわからない！！
どうしようか…
そんなときに見つけたサイトがめっちゃ楽に丸くしてくれて余分な手間を省かせてくれました！
画像を入れれば自動で丸くトリミングしてくれるので使い勝手が抜群です
ＰＣ初心者にはありがたいツール！！
丸くしたい画像があるときにも時間短縮になるのでぜひ活用してみてください
【メイン】コピペで簡単！ＴＯＰに戻るボタンのＣＳＳ
参考にさせて頂いたのはこちらのブログです☟
とても分かりやすく説明してくださってます
その通りにＣＳＳをフッター＆デザインＣＳＳに追記していくだけなので簡単に設置する事ができました！
ボタンのサイズはお好みのサイズを指定します
私はスマホからでも文章の邪魔にならないようにwidthを７０で設定しました
オリジナルのＴＯＰに戻るボタンで差別化しよう
戻るボタンは同じようなものばかりで自分だけのオリジナルボタンを作りたい！
そんな方にピッタリなツールです
文章の邪魔にならないように薄色で作るのが個人的にはおすすめ！
最初、濃い色で作ったら目がボタンのほうに行っちゃって文章を読むどころではありませんでした
今回はずっとやってみたかったＴＯＰに戻るボタンを画像で作ってみました
オリジナルボタン作ってみてね
