Blogの『Topへ戻るﾎﾞﾀﾝ』を可愛い画像で設置できたよ！

hello！

ᏞUꮇ'Ꮳꭴ. ﾃﾞｰｽ！

今回は、『Topへ戻るﾎﾞﾀﾝを画像で設置する』っていうお題目で頑張ったんですよ。

で、該当する記事見つけて、書いてある通りにやっても作動しなくて･･

幾つものBlogを見比べつつ、四苦八苦して何時間も費やして出来たんですよ！！

でもね･･

ぶっちゃけ、何が原因なのか解んないの。

だから、記事にするのやめようかなぁ‥ って思ったんだけどさ。

めっちょこ可愛いから、やっぱ記事にするｺﾄにしましたぁ～！ ٩(ˊᗜˋ*)و ｩｪ～ｨ

この作業に取り掛かるまでは、

画像を使用せずにｺｰﾄﾞだけで表示させるﾀｲﾌﾟのﾓﾉを活用していたので、

そのｺｰﾄﾞを活かしつつ、画像要素を追加してみようと思い付く。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function () {
   /** トップへ戻るボタン **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut();
       }
   });
   // ページトップクリック
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="画像のURL" align="right" ></a> 
</a>

ﾃﾞｻﾞｲﾝ ▶ ｶｽﾀﾏｲｽﾞ ▶ ﾌｯﾀに貼り付け。

末尾にある『画像のURL』に表示させたい画像のｱﾄﾞﾚｽをｺﾋﾟﾍﾟ。

CSS

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:0px;
    right:0px;
}

ﾃﾞｻﾞｲﾝ ▶ ｶｽﾀﾏｲｽﾞ ▶ CSS に貼り付け。

ｷﾀﾜｧｧｧ *･゜･*:.｡..｡.:*･゜(n‘∀‘)ηﾟ･*:.｡. .｡.:*･゜･*

解らないながらも格闘し続けた甲斐があった！

お疲れ様、私。

ちょっと大きいかなぁ‥？と思ったｹﾄﾞ。

可愛いから、このままのｻｲｽﾞで！

以下、今回使用させて頂いた諸々。

画像 ▶ 商用可能な無料(フリー)のイラスト素材ならストックマテリアル
画像文字入れ＆編集 ▶ https://www.canva.com/
透過処理 ▶ WEBブラウザ上で簡単に透過PNG画像を作成できるツール | 無料で画像を加工できるサイト PEKO STEP

お蔭様で可愛いｱｲｺﾝを作るｺﾄができました❤

御礼申し上げます。 (❀ᴗ͈ˬᴗ͈)⁾⁾ᵖᵉᵏᵒ

今回は、この辺でお終いです。

最後までお付き合いくださいまして、ありがとうございました。

情報をｼｪｱしてくださる先人の皆々様に感謝。

必要な言葉が

必要な人に

必要な時に届きますように･･

愛と祝福を込めて ❤ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

ﾟ*｡.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.｡*ﾟ

𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.

𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.

Lum'Co's Diary

興味の赴くままに生きていますｳﾌ♡

Blogの『Topへ戻るﾎﾞﾀﾝ』を可愛い画像で設置できたよ！

HTML

CSS