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

• これまでの経緯
• バージョンアップ
• 使い方
  • 追加オプション linkBlank
  • 見出しのリンクをスムーズスクロール化

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

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

これまでの経緯

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

• はてなブログでページ読み込み時のDOM操作をモジュール化する
• はてなブログをグリッドレイアウトとDOM操作モジュールでカスタマイズ
• オフキャンバスメニュー付 はてなブログテーマ（開発環境）

バージョンアップ

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

• 外部リンクを別タブ（ウィンドウ）で開く
• 記事の見出しを目次化する [: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] を入れておきますと、見出しを目次化してくれますが、そのリンクをスムーズスクロール化します。

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