▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

  当Blogはプロモーションが含まれています

ブログにページトップへ戻るボタンをつけたい

  本ページはプロモーションが含まれています

 

 

 

f:id:bless-you:20161103061436j:plain

 

 

ブログの右下あたりに鎮座しているこのアイコン。

慣れるともぉ手放せない!!

愛するボタンの設置方法デスん。

 

 

▼・ェ・▼ね。

「シンプル」を心掛けてブログ始めたのね?

ブログのデザインも文章も。

 

 

 【 当初心掛けていたこと 】

  • マウススクロールは少な目に
  • サクッと読み終わることができる
  • 知りたいことがすぐ見つけられる
  • 要点を押さえて解りやすく

 

 

だからさ、最初の頃はサクサク絵日記状態でいけたよね。

ところがさ、ブログのデザイン変更してカスタマの記録つけ始めたらさ。

 

 

すんごい長くなったよね!!

 

 

マウススクロールとかさ、

昨日の記事で試してみたら、20回もクルクルしちゃったよ!?

 

 

まぁさ、前のデザインの時と比べると、

1枚あたりの画像表示がデカくなったってのと、

コピペ用のCSSのコードが死ぬほど長いってのがあるよね。

 

 

ぇ? 内容は浅いだろって?

 

 

お黙り!! ( ・ὢ・ ) オコッ!

 

 

てことでね?

 

 

「トップへ戻るボタン」を導入することにしたよ!(๑•̀ㅂ•́)و✧

 

 

今回の先生は、コチラ

*リンク先消えました*

 

 

詳しい仕組みとか理屈とかを知りたい人は、

先生のところで、ためになる記事を読んでね!

 

 

コピペするコードは以下。

<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;">ページTOPへ ▲</a>

 

 

貼り付ける場所は、

「デザイン」⇨「カスタマイズ」⇨「フッタ」

 

 

f:id:bless-you:20161027194421j:plain

 

 

ボタンの文字を変えたい時は、

一番下のコードの「ページTOPへ ▲」ってところで、

好きな文字に変えられるよ!

上の画像の赤い枠のところね。

 

 

もう一つコードを張り付けるよ!

コピペするコードは以下。

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#fff;
    font-size:20px;
    text-decoration:none;
    background:#000;
}

/* ページトップへ戻るボタン:ホバー時 */
#pagetop:hover {
    background:#e74c3c;
} 

 

貼り付ける場所は、

「デザイン」▶「カスタマイズ」▶「デザインCSS」

 

f:id:bless-you:20161027195434j:plain

 

 

▼・ェ・▼はね、

font-family: "Meiryo",“arial unicode ms”;

っていうのを付け足して、フォントを変更したよ。

あと、ボタン自体の色も変更した!

 

 

f:id:bless-you:20161027195632j:plain

 

 

うぇ~い! ٩(ˊᗜˋ*)و

先生ありがとうございましたー!

 

 

ボタンの位置を変更したいとかいう人は、

先生のところで詳しく説明してくれてるから、

教えてもらえばいいよ!

 

 

ってところで。

今日の改造は、これでおしまい!

 

 

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

Thank you.

I love you.