【リリース完了】デザインテーマ（hbm-visual, hbm-text）の目次機能のアップデートを行います

平素は、はてなブログMediaをご利用いただきありがとうございます。

はてなブログMediaでは、デザインテーマ（hbm-visual, hbm-text）の目次機能に関し、目次リンクが正しい位置にリンクされない不具合を確認したため、アップデートを行います。

このアップデートに対し、お客様側で追加で行っていただく作業はございません。

対象となるブログ・変更箇所

• デザインテーマ（hbm-visual, hbm-text）をご利用いただいているブログ
• しかし、以下に該当するブログは弊社側よりアップデートを行うことができないため、必要であればご自身でご対応お願いいたします。
• hbm-visual, hbm-text カスタマイズドキュメントに記載されていない独自のカスタマイズを行っている
• デフォルトで設定されているjQuery 2.0.3のバージョン変更を行っている
• 設定画面 ⇒デザイン ⇒ ヘッダ⇒ タイトル下に記載されいてるJavaScriptを変更いたします。
• 記事ページで目次機能を利用した際、目次リングが正しい位置にリンクされるよう変更いたします。

仕様変更の実施日

• 2020年4月9日（木）を予定しております。
• 以降は記事ページで目次機能を利用した際、目次リングが正しい位置にリンクされるようになります。

【4月9日追記】デザインテーマ（hbm-visual, hbm-text）の目次機能のアップデートを行いました

本機能は予定通り、2020年4月9日（木）にアップデートいたしました。

引き続き、はてなブログMediaをどうぞ宜しくお願い致します。

アップデート内容

• 設定画面 ⇒デザイン ⇒ ヘッダ⇒ タイトル下の記述を以下のように変更いたしまします。

変更前

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
(function($){

var headerH = $('.blog-header').outerHeight(false);
 var blogDescriptionHeight = $('.blog-description').offset().top;
 $('body').css('padding-top', headerH+'px');
 $('.navbar').css('top', headerH+'px');
 $('.navbar-toggle-btn').css('top', (headerH / 2) +'px');

$('.navbar-toggle-btn').click(function() {
 resizeHeader();
 $(this).toggleClass('is-open');
 $('.navbar').toggleClass('is-open');
 if($(this).hasClass('is-open')) {
 $('.navbar-inner').slideDown(500, 'swing');
 } else {
 $('.navbar-inner').slideUp(500,'swing');
 }
 });
})(jQuery);
</script>

 変更後

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
(function($){

var headerH = $('.blog-header').outerHeight(false);
 var blogDescriptionHeight = $('.blog-description').offset().top;
 $('body').css('padding-top', headerH+'px');
 $('.navbar').css('top', headerH+'px');
 $('.navbar-toggle-btn').css('top', (headerH / 2) +'px');

$('.navbar-toggle-btn').click(function() {
 resizeHeader();
 $(this).toggleClass('is-open');
 $('.navbar').toggleClass('is-open');
 if($(this).hasClass('is-open')) {
 $('.navbar-inner').slideDown(500, 'swing');
 $('.blog-header').addClass('is-open');
 } else {
 $('.navbar-inner').slideUp(500,'swing');
 setTimeout(function() {
 $('.blog-header').removeClass('is-open');
 }, 500);
 }
 });


 $(function() {
 $('a[href^=#]').click(function(){
 var href= decodeURI($(this).attr("href"));
 console.log(href);
 var target = $(href == "#" || href == "" ? 'html' : href);
 
 var headerH = ($('.blog-header').hasClass('not-fixed')) ? 0 : $('.blog-header').outerHeight(false);
 var position = target.offset().top - headerH;
 
 
 $("html, body").animate({scrollTop:position}, 0, "swing");
 return false;
 });
 });
 $(window).resize(function(){
 resizeHeader();
 headerH = $('.blog-header').outerHeight(false);
 blogDescriptionHeight = $('.blog-description').outerHeight(false);
 });
 $(window).scroll(function(){
 if ($(window).scrollTop() > blogDescriptionHeight) {
 $('.blog-description').hide();
 if(!$('body').hasClass('scrolled')) {
 $('body').addClass('scrolled');
 }
 }
 else {
 $('.blog-description').show();
 $('body').removeClass('scrolled');
 }
 resizeHeader();
 });

function resizeHeader() {
 var headerH = $('.blog-header').outerHeight(false);
 $('body').css('padding-top', headerH+'px');
 $('.navbar').css('top', headerH+'px');
 $('.navbar-toggle-btn').css('top', (headerH / 2) +'px');
 }
})(jQuery);
</script>