はてなブログを便利にするカスタマイズ

はてなブログ JavaScript CSS

※追記(2016/12/22)
ページトップへ戻るボタンを書く所を間違えてたので修正

※追記２(2016/12/22)
この記事から色々変更してるので終わったら新しく記事を書きます。（作業中）

※追記３(2016/12/29)
書きました。

またこの記事も使う見出しタグをh2～h4からh3～h5に変更しました。


はじめに

  • 記事の編集はMarkdownモードでh3～h5タグを見出しに使う
  • デザインは公式テーマのEpicを使っているので、他のテーマではおかしい所があるかも
  • スマホ版のことは考えてない
  • 見た目に関してはそのうち変えそう

やること

見出しに自動で番号をつける

記事に自動で目次をつける

  • 参考にした記事では上の階層の数字をつけてなかったので追加した

TOPへ戻るボタンを設置

右下に表示されているはずのやつ。

  • 背景色と形と文字を変えた
  • フェードをなくした

その他見た目の変更まとめて

この辺はお好みで。

  • 記事の横幅を120px大きく
  • サイドバーを20px大きく
  • フォントサイズを2px大きく
  • 見出しのサイズや背景色などを調整
  • ブログタイトルの調整

やり方

※テーマに追加する形でCSSを変更する場合はデザインCSSのsystemタグなどはそのままにしてください↓

/* <system section="theme" selected="alpha2"> */
@import "/css/theme/alpha2/alpha2.css";
/* </system> */


自動見出し番号付加

その他見た目の変更まとめてに書いた部分がいらない場合は「見た目の変更を含まない」を使ってください。

見た目の変更を含む

デザイン設定の[カスタマイズ]-[デザインCSS]に貼り付ける。

/* 横幅 */
#container{width:1100px;}
#wrapper{width:840px;}
#main{width:680px;}
#box2{width:200px;}
/* ブログタイトルと説明文 */
#blog-title h1 a{color:#5C5C5C; font-size:24px;}
#blog-description{color:#7C7C7c; font-weight:normal;}
/* 記事のフォントサイズ */
.entry-content{font-size:16px;}


/* 記事の見出し */
/* counter-increment と counter-reset の行が番号を付けるのに必要 */
.entry-title{
  counter-reset: h3;
  font-size: 130%;
}
.entry-content h3{
  counter-increment: h3;
  counter-reset: h4;
  font-size: 130%;
  background: #F4F4F4;
  border-left: solid 7px #AEAEAE;
  border-bottom: 0;
  margin-top: 36px;
  padding: 8px 8px 4px;
  position: relative;
}
.entry-content h4{
  counter-increment: h4;
  counter-reset: h5;
  font-size: 120%;
  background: #F4F4F4;
  border-left: solid 4px #AEAEAE;
  border-bottom: 0;
  padding: 6px 8px 0px;
  position: relative;
}
.entry-content h5{
  counter-increment: h5;
  font-size: 105%;
  border-left: solid 4px #AEAEAE;
  padding: 6px 8px 0px;
  position: relative;
}
/* 番号の色はcolorの部分 */
.entry-content h3:before{
  content: counter(h3) "\a0";
  color: #A3A3A3;
}
.entry-content h4:before{
  content: counter(h3) "\2e" counter(h4) "\a0";
  color: #A3A3A3;
}
.entry-content h5:before{
  content: counter(h3) "\2e" counter(h4) "\2e" counter(h5) "\a0";
  color: #ABABAB;
}
.entry-content h3:before, .entry-content h4:before, .entry-content h5:before{
  font-size: 75%;
  font-weight: normal;
  top: 0px;
  left: 4px;
  line-height: 1;
  position: absolute;
}
見た目の変更を含まない

デザイン設定の[カスタマイズ]-[デザインCSS]に貼り付ける。

/* 記事の見出し */
.entry-title{counter-reset:h3}
.entry-content h3{counter-increment:h3;counter-reset:h4;}
.entry-content h4{counter-increment:h4;counter-reset:h5;}
/* 番号の色はcolorの部分 */
.entry-content h3:before{content:counter(h3) "\a0";color:#bbb;}
.entry-content h4:before{content:counter(h3) "\2e" counter(h4) "\a0";color:#bbb;}
.entry-content h5:before{content:counter(h3) "\2e" counter(h4) "\2e" counter(h5) "\a0";color:#bbb;}

自動目次作成

デザイン設定の[カスタマイズ]-[記事]-[記事上]に貼り付ける。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
<script>
$(function() {
  var win = $(window);
  var list = [];
  var currentLevel = 0;
  var entryContentLen = 0;

  // 見出しを検索
  $('.entry-content h3,.entry-content h4,.entry-content h5').each(function(i){
    var self = this;
    var idName = 'section' + i;
    var level = 0;

    $(self).attr('id', idName);
    list.push('<li><a href="#' + idName + '">' + $(self).text() + '</a>');
    if (self.nodeName.toLowerCase() == 'h4') {
      level = 1;
    } else if (self.nodeName.toLowerCase() == 'h5') {
      level = 2;
    }
    while (currentLevel < level) {
      list[i] = '<ol class="chapter">' + list[i];
      currentLevel++;
    }
    while (currentLevel > level) {
      list[i] = '</ol></li>' + list[i];
      currentLevel--;
    }
    entryContentLen++;
  });
  // 見出しが2つ以上あったら目次を表示する
  if (entryContentLen >= 2) {
    $('<div class="sectionList"><ol>' + list.join('') + '</ol></div>').prependTo('.entry-content');
  }
  // スクロールを滑らかにする
  $('.sectionList a').on('click', function() {
    $('html,body').animate({scrollTop: $(this.hash).offset().top}, 300);
    return false;
  });
});
</script>

デザイン設定の[カスタマイズ]-[デザインCSS]に貼り付ける。

/* 目次 */
.entry-content .sectionList{
  background: #F6F6F6;
  margin: 20px 0;
  padding: 10px 15px;
  border: 1px solid #CCC;
}
.entry-content .sectionList:before{
  content: "目次";
  font-size: 110%;
  margin: -5px 0px;
  border-bottom: 1px dotted #999;
  display: block;
}
.entry-content .sectionList ol{
  counter-reset: section;
  list-style-type: none;
}
.entry-content .sectionList > ol{
  margin-top: 10px;
  margin-left: 0;
}
.entry-content .sectionList li:before{
  counter-increment: section;
  content: counters(section, ".") " ";
}

TOPへ戻るボタン

デザイン設定の[カスタマイズ]-[フッタ]に貼り付ける。

自動目次作成のコードを記事上に貼り付けていない場合、一行目の <!-- と --> を削除してください。

<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script> -->
<script>
$(function () {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $('#pagetop').show();
    } else {
      $('#pagetop').hide();
    }
  });
  $('#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>

デザイン設定の[カスタマイズ]-[デザインCSS]に貼り付ける。

/* トップへ戻るボタン */
#pagetop {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px 20px;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  background: rgba(0,0,0,0.2);
  border-radius: 22px;
}
#pagetop:hover {
  background: #5B9DF4;
}

蛇足

cssやjavascriptをminify(軽量化)しておくと少しは軽くなるかも。