はてなブログ簡単カスタマイズ imzModules バージョンアップ


はてなブログをカスタマイズする場合、css だけでは思うようにならないことがあります。その場合は Javascript を使い、DOM 操作をおこなって要素を追加したり、移動したりするしかありません。

その DOM 操作をモジュール化して ON/OFF 指定だけで行うことができるようにしようというのが imzModules です。


これまでの経緯

次の記事を参照してください。


バージョンアップ

今回のバージョンアップは次のとおりです。


  • 外部リンクを別タブ(ウィンドウ)で開く
  • 記事の見出しを目次化する [:contents] にスムーズスクロールを追加


使い方

カスタマイズ > フッタ に次のスクリプトを入れて、必要なオプションに true を指定するだけです。

<script type="text/javascript" src="https://ausnichts.github.io/imzModules/imzModules.min.js"></script>
<script>
(function(){
var initialSetting = new imzModules({
    mvBgImg: true,
    chgFeturedImg: true,
    mvCategory: true,
    scrNavi: true,
    // 追加オプション
    linkBlank: true
});
document.addEventListener("DOMContentLoaded", initialSetting.init(), false);
})();
</script>


追加オプション linkBlank

linkBlank: true を指定しますと、外部リンクを別タブ(ウィンドウ)で開くように a タグに target=_blank を追加します。


見出しのリンクをスムーズスクロール化

はてなブログでは、 [:contents] を入れておきますと、見出しを目次化してくれますが、そのリンクをスムーズスクロール化します。

これは追加オプション無しで、すでにスムーズスクロールを使用していれば自動的に差し替わります。