オリジナルの画像で上に戻るボタンを設置する方法

スポンサーリンク

スポンサーリンク

スポンサーリンク

みんなー!うしるだよー☆

 

ボクのマイガールのシャルのブログ「シャルの甘美なる日々」が更新されましたよ!

www.charlottehibi.com

 

埼玉県八潮市のパキスタン料理屋「アルカラム」の紹介だよ!みんなも見に行ってあげてねー☆

 

いつからアンタのマイガールになったのよ!?マイガールになった覚えは無いわよ、この変態!!

 

今回は「好きなアイコンで上に戻るボタンを設置する方法」を紹介しちゃうよ☆

 

ちゃんと話を聞きなさいよ!このオカマ!!

 

 

上に戻るボタンとは

f:id:UrushiUshiru:20180528224852j:plain

このブログをPCとかタブレットで見ると右下に表示されてるあれ(風子)です。

このボタンを押すと一番上まで戻ります。

 

つまり風子の胸を押すと上に戻るって事だよ!!

 

卑猥な風に言うなよ!!

 

f:id:UrushiUshiru:20180528225210j:plain

サブブログの「シャルの甘美なる日々」にはありませんので、導入がてら紹介いたします!

 

上に戻るボタンの導入方法

blog.mshimfujin.net

こちらのサイトと

 

kotoba2kai.hatenablog.com

こちらのサイトを参考に導入していきます。

 

上に戻るボタンのhtmlコード

<!-- 上へ戻るボタン -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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" aria-hidden="true"/></a>

まず最初に上記のhtmlコードを使用します。

28行目の「<img src="画像のURL" aria-hidden="true"/>」の「"画像のURL"」の部分に設定したい画像のURLを貼り付けます。

 

画像のURLの取得

f:id:UrushiUshiru:20180417185220j:plain

はてなフォトライフの画像を使用する場合は、使用したい画像のページに移動して、画像の上で「右クリック」⇒「画像のアドレスをコピー」とすると画像のURLが取得できるので、28行目の「<img src="画像のURL" aria-hidden="true"/>」の「"画像のURL"」の部分に貼り付けます。

 

 フッタのhtml記述欄に貼り付け

f:id:UrushiUshiru:20180528234811j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②フッタ」に上記のhtmlコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

上に戻るボタンのCSSコード

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:0px;
    right:0px;
    color: #ffffff; /* 文字色 */
    font-size:0px;
    text-decoration:none;
    background: linear-gradient(
    -45deg,
    #fff 25%,
    #f4f4ed 25%, #f4f4ed 50%,
    #fff 50%, #fff 75%,
    #f4f4ed 75%, #f4f4ed
  );
  background-size: 0px 0px; 
  border-radius: 50%; /* ボタンの丸み */
  opacity: 1.0; /* ボタンの透明度 */
  z-index: 99;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
    color: #ffffff; /* 文字色 */
    opacity: 0.7; /* ボタンの透明度 */
}

#pagetop img {
 width:300px;
 height:300px;
}

 次に上記のCSSコードを使用します。

上記コードの28行目~31行目の「#pagetop img {~}」で囲まれた部分の値を変更することで上に戻るボタンのサイズが変更できます。

ちなみに、widthは横幅、heightは縦幅です。

 

 デザインCSSにコードの貼り付け

f:id:UrushiUshiru:20180416005536j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

「③変更を保存」をクリックして設定を保存します。

 

f:id:UrushiUshiru:20180529003251j:plain

以上で「上に戻るボタン」の設定は完了です!!

 

これでユキの胸を押すと上に戻ることができるよ!!

 

そんなに私の胸が押したいんですか?変態さんですね、う・し・る・さ・ん・・・?

 

ああああああああああああああああああああああああああああああ!!!

 

まとめ

 オリジナルの画像を使って上に戻るボタンの設置はこのように行ってます。

ブログにオリキャラが居る人やバーチャルブロガーの方は設置してみてはいかがでしょうか?

 

ちょっと!!なんでユキが「上に戻るボタン」なのよ!?

 

私のブログなんだから私のアイコンを使うべきでしょ!?

 

だって、ユキさんが上に戻るボタンに採用しないとただで済むと思わない方がいいですよ?って脅はk・・・

 

うしるさん・・・?

 

ユキさんもシャルのブログの一員だし出してあげないと可哀想じゃん?

 

それにキャラ紹介の立ち絵だって、上に戻るボタンに採用するために人差し指を上に向けたポーズにしたんだからね!

www.charlottehibi.com


 

これ以上追求しないわ・・・理由はよく分かったわ・・・

 

最後にお聞きしたいことがあるんですけど、うしるさん?

 

冒頭に仰ってた「ボクのマイガールのシャル」ってどういう意味ですか?

 

えええ!ボクそんなこと言ったっけ?覚えてないなあ・・・

 

シャルちゃんは私のマイガールでもありペットですよ?分かってます?

 

ああああああああああああああああああああああああああああああ!!!

 

私は誰のマイガールでもペットでもないわよ!バカタレども!! 

 

 

 最後まで読んでいただきありがとうございました!

 

f:id:UrushiUshiru:20180528235011p:plain