My Hot News

読者です 読者をやめる 読者になる 読者になる

My Hot News

自由気ままに思ったことを書きます。

My Hot News

なんでもかんでも思ったこと書きます

ブログ開設ではじめにやったカスタマイズ

Design

ブログを読む際の利便性を少しでも上げるために、まず初めにやった2つのカスタマイズを紹介します。どちらも広く知られていると思います。

 

上に戻るボタン

f:id:s0sem0y:20160326125621j:plain

画像のボタンを押すと、どんな場所からも一番上までスクロールしてくれます。

長いこと記事を読んでいって、戻るためにスクロールを必死に回すのは読む側にも手間ですよね。このボタンがあればワンクリックでTOPまで戻れるのです。

www.task-notes.com

 

ここを参考にしました。

僕のページにあるようなボタンならば、たった2ステップです。

1.下記のコードを、設定⇛詳細設定⇛headに要素を追加 にコピー

 ※デザインの方ではなく設定の方ですよ!

<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>

2.下記のコードを、デザイン⇛カスタマイズ⇛フッタ にコピー

<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>

3.デザインを変更は下記のコードをデザイン⇛カスタマイズ⇛デザインCSSにコピペ

ピンク色の数字などのパラメータを変更しながら調整してください。 

#page-top {
  display:none;
  position:fixed;
  right:30px;
  bottom:30px;
  margin: 0;
  padding: 0;
  text-align:center;
}
#move-page-top{
  color:#333;
  text-decoration:none;
  display:block;
  cursor:pointer;
}
#move-page-top:hover{
  color:#009416;
}
@media only screen and (min-width: 1400px){
  #page-top{
    right:50%;
    margin-right: -650px;
  }
}

サイドバーを編集

コンテンツの追加と順番変更

デザイン⇛カスタマイズ⇛サイドバー⇛モジュール追加で様々なコンテンツを追加できます。

また既にあるものも編集を行うことで表記を変えられます。

僕の場合はプロフィールをAboutという表記に変更しています。

またサイドバーをドラック&ドロップすることで、表示の順番を変えることもできますよ。

f:id:s0sem0y:20160326131723p:plain

 

サイドバーの最後のコンテンツを固定 

スクロールしていっても、サイドバーの最後のコンテンツを下までついてくるように設定できます。僕のブログの場合はPopularが右についていきますよね。今の記事を読み終わった後も自分のブログを読んでもらう作戦です。参考は以下のリンク。

itgeekgirl.hateblo.jp

 

以下のコードをデザイン⇛カスタマイズ⇛記事⇛記事下にコピペしてください。

50とか20とかの数字で調整ができます。色々試してみてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

$(function(){
console.log("TESTTEST");
    var target = $(".hatena-module").filter(":last");
    var targetTop = target.offset().top + 50;
    $(window).scroll(function () {
      if( $(window).scrollTop() > targetTop) {
                target.css({position:"fixed", top: 20});
      } else {
                target.css({position:"static"});
      }
    });
});

</script>

 

これくらいやればとりあえず見栄えと機能の最低限の機能が揃うのではないでしょうか。

今回はサイドバーや上に戻るボタンだけでしたが、他にも色々機能の追加ができるので探してやってみてください。