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


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

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


これまでの経緯

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


バージョンアップ

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


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


使い方

(2019.4.4)下記ページに Ver.2.0 があります。

www.imuza.com


(2019.4.4)以下記事に誤りはありませんがスクリプトが移動されています。


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

<script type="text/javascript" src="https://*****"></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] を入れておきますと、見出しを目次化してくれますが、そのリンクをスムーズスクロール化します。

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