IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2019/01/7 javascript, はてなテーマ, はてなブログ

  • これまでの経緯
  • バージョンアップ
  • 使い方
    • 追加オプション 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] を入れておきますと、見出しを目次化してくれますが、そのリンクをスムーズスクロール化します。

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

はてなブログ 当サイトのデザインテーマを変更しました。
はてなブログカードの iframe 内を弄る(自サイトのみ)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com