makarotteの日記

プチプラ最強アフィリエイトブログ

マイ画像を使ったTOPへ戻るボタンを作りたくて

こんにちは、まかろんです!
ブログ内を見やすくする為に色々といじってみたんです。
テーマも新しくしたのですが、せっかく登録したCSSが全部パーになってしまいました(笑)

今回はブログ内を見やすく、快適になるようにTOPへ戻るボタンを作ってみました。

わかりやすく言うとカスタマイズしているブログや、ホームページを下へスクロールすると出てくるあの便利ボタンです(笑)

私はマークアップ言語もスタイルシートも勉強して来なかったので、頼るべき検索でお世話になりました。

初心者にも優しくコピペを用意しているブログを発見!

lumco-joy.hateblo.jp

シンプルな戻るボタンもとても良かったのですが、どうしても自分風にアレンジを入れたく、ラム子様が運営するブログに設置までの流れが一番、初心者でもわかりやすかったのでご紹介させて頂きました!

 

気を付ける点

CSSは念の為バックアップをとって置きましょう。(私みたくならないでね泣)

・大きい画像サイズはそのまま入ってしまうので小さくした物を用意しましょう!

詳しい設置の仕方については、上記でご紹介したラム子様のブログから参考にして頂ければと思います。

 

私が用意した手描きイラスト。

https://cdn-ak.f.st-hatena.com/images/fotolife/m/makarotte/20240213/20240213162624.png?changed=1707809187

 表示:非営利:改変禁止

 

久しぶりに絵を描いてみました。地域猫ちゃんが段ボールハウスに入って休憩しているのをヒントに、矢印型の段ボールハウスに入るマイキャラを作りました!

 

あぁかわいい。。。

ちなみに、画像のアドレスはブログ内の右の+写真投稿の下の部分にある『はてなフォトライフ』から画像編集でサイズ変更が行えます。

アップロード方法は下の画像で説明します。

画像の上で右クリック

 

アップロードした写真や画像ははてなフォトライフに保存されます。

※1ヶ月間毎に保存出来る容量が決まっています。

月が変わると容量がリセットされる仕組み。

・無料版 300MB  まで

・Pro(有料) 3GB まで

 

私は画像サイズを150pixelにしましたが、お好みで調整してみて下さい。

小さいサイズから大きいサイズに変更は出来ませんでしたみんなは当然知ってるよね!

 

 

ブログ内をアップグレードしようと色々HTMLやCSSに触れる機会が増えたこの頃。

これを機に勉強してみたくなってきました。(たぶん3日坊主)

 

備忘録に今後もHTMLについてあげると思います。(覚えられないんですよね;)

今回はこの辺で失礼します!

最後までお読み頂きありがとうございました!