Travel Banana

旅と映画とバナナの話

「一番上に戻るボタン」付けてないブログ、やり方教えてやるから今すぐ付けろ。読みにくいんだよ【はてなカスタマイズ】

スポンサーリンク

 ブログを始めてから色んなブログを読むようになったんですが、「一番上に戻るボタン」がついてないブログがあるんですよね。

f:id:kogawahayato:20170423133046j:plain

 

 これです。これ。こういうやつ。押すと上までギューンって戻るやつ。なんで付けないの? 何か意図があるの? 無いならつけてよね! 無いと読みにくいと思います。読みにくいよね? 1記事読み終わって、さて他にはどんな記事があるのかな、トップページに移動してみようと思ったら、ボタンが無い。マウスホイールをぐるぐるする必要がでてきます。それは面倒くさい。そういえばこのブログってなんていうブログだっけ? とか思ってホイールぐるぐるさせるのはもうウンザリなんです!

 

関連記事:

日曜日に書いた記事がバズった(炎上した?)件についての反省会 - Travel Banana

 

付け方教えてやる

 なんで付けないの? いやホントに。やり方知らないとか? 僕が教えるまでもなく検索すれば色々でてくるのに? 本当に意味がわかりません。僕の快適ブログライフのために、まだ付けていないはてなブロガーの皆さんは早急にこのボタンをつけてください。付けない理由があったら教えてください。

 あ、ワードプレスの人は割と簡単につけられるみたいなんでさっさと設定しちゃってください。はてなはちょっと面倒臭い感じなので説明します。

 

関連記事: 

ブログアイコン作ったこととブログデザインにあんまり興味がない理由 - Travel Banana

コレとコレとコレをコピペするだけじゃ!

 

デザイン→ヘッダ→タイトル下

コレを"タイトル下"にコピペ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

 

フッター

コレを"フッター"にコピペ

<div id="page-top">

  <a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>

</div>

<script>

  $(window).scroll(function(){

    var now = $(window).scrollTop();

    if(now > 500){

      $("#page-top").fadeIn("slow");

    }else{

      $("#page-top").fadeOut("slow");

    }

  });

  $("#move-page-top").click(function(){

    $("html,body").animate({scrollTop:0},"slow");

  });

</script>

 

デザインCSS

コレを"デザインCSS"にコピペ

/*上に戻る*/

#page-top {

  display:none;

  position:fixed;

  right:10px;

  bottom:20px;

  margin: 0;

  padding: 0;

  text-align:center;

}

#move-page-top{

  color:rgba(0,0,0,0.4);

  text-decoration:none;

  display:block;

  cursor:pointer;

}

#move-page-top:hover{

  color:rgba(0,0,0,0.6);

}

@media only screen and (min-width: 400px){

  #page-top{

    right:35%;

    margin-right: -450px;

  }

}

 

 これで完成。テーマをBlooklynにしてる人はこのまま使えます。他のテーマだと位置がずれてるかも。位置が変なときは、下から4行目 right:35% っていう部分を色々調整すると左右の位置が変えられます。

 

スポンサーリンク

?

 

参考記事

glory0301.hatenablog.com

hatebumaru.hatenablog.com

 

 こちらの記事を参考にさせていただきました。ありがとうございました。

 

まとめ

 ブロガーの皆様、僕の読みやすさ向上のために是非ともボタン設置をお願いいたします。ホイールぐるぐるが本当に面倒くさいんです。特に長い記事書く人、いい加減にしてください。

 お手数をおかけしますが、一読者の切実な願いだと思って聞いてやってください。いやマジでさっさと設置しろ下さい。

 

 ではまた。

 

続き:

日曜日に書いた記事がバズった(炎上した?)件についての反省会 - Travel Banana

連続ドラマW しんがり~山一證券 最後の聖戦~ DVD BOX

連続ドラマW しんがり~山一證券 最後の聖戦~ DVD BOX

 

 こんな記事も書いてます

バナナファームで働いていた僕が教える正しいバナナの保存方法【永久保存版】

竹原ピストルというおっさんの歌が大好きなのでみんなにも聞いてほしい 

Chromeのオフライン恐竜ゲームをガチ攻略する 

ブログアイコン作ったこととブログデザインにあんまり興味がない理由 

Youtubeで英語の勉強するならバイリンガールじゃなくて桂三輝の落語聞こうぜ! 

【運営報告】ブログを1か月続けてみた結果 

Google AdSense審査通過しました! これでブロガーっぽくなったぞ 

Twitterライクな新SNS「Mastodon」早速使ってみたぜ! ブログ宣伝に効果的…!?