画像ブロックの「ブラウザ風・デスクトップ風」スタイルをカスタマイズ – SWELLカスタマイズ

.no-luminous img {
  pointer-events: none;  /* クリックイベントを無効化 */
}

/* ----- スタイルの設定を初期化 ----- */
.is-style-desktop .wp-block-group__inner-container,
.is-style-browser_mac .wp-block-group__inner-container {
    padding: 0;
    min-height: initial;
    max-height: initial;
}
/* スタイルのサイズ設定 */
.scrlbar_wrap {
    margin: 0 auto;
    width: 350px;
}
.scrlbar_wrap.is-style-browser_mac figure {
    height: calc( 338px * 0.625 );
    overflow: hidden;
}
.scrlbar_wrap.is-style-desktop figure {
    height: calc( 334px * 0.625 );
    overflow: hidden;
}
/* レスポンシブ設定 */
@media screen and (max-width: 600px) {
    .scrlbar_wrap {
        width: 85vw;
    }
    .scrlbar_wrap.is-style-browser_mac figure,
    .scrlbar_wrap.is-style-desktop figure {
        height: calc( 85vw * 0.625 );
    }
}

/* スクロールバーの設定 */
.scrlbar_wrap figure::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}
.scrlbar_wrap figure::-webkit-scrollbar-thumb {
    border-radius: 6px; 
    background-color: rgb(96,97,99,0.5);
}
.scrlbar_wrap figure:hover {
    overflow-y: overlay;
}
/* Firefoxはスクロールバーをデフォルトにする */
@-moz-document url-prefix(){ 
    .scrlbar_wrap figure {
        overflow-y: auto;
    }
}
/* デスクトップスタイルのアプデ対応 ver.2.5.8 - 2022.01.28 */
.is-style-desktop .wp-block-group__inner-container::-webkit-scrollbar {
  display: none;
}
is-style-desktop .wp-block-group__inner-container {
  scrollbar-width: none;
}

.no-luminous img {
  pointer-events: none;  /* クリックイベントを無効化 */
}

/* ----- スタイルの設定を初期化 ----- */
.is-style-desktop .wp-block-group__inner-container,
.is-style-browser_mac .wp-block-group__inner-container {
    padding: 0;
    min-height: initial;
    max-height: initial;
}
/* スタイルのサイズ設定 */
.hover_wrap {
    margin: 0 auto;
    width: 350px;
}
.hover_wrap.is-style-browser_mac figure {
    height: calc( 338px * 0.625 );
    overflow: hidden;
}
.hover_wrap.is-style-desktop figure {
    height: calc( 334px * 0.625 );
    overflow: hidden;
}
/* 画像のスタート位置 */
.hover_wrap figure img {
    position: relative;
    vertical-align: top;
}
/* レスポンシブ設定 */
@media screen and (max-width: 600px) {
    .hover_wrap {
        width: 85vw;
    }
    .hover_wrap.is-style-browser_mac figure.,
    .hover_wrap.is-style-desktop figure {
        height: calc( 85vw * 0.625 );
    }
}

/* 特定の投稿ページにjQueryを読み込ませる */
function addScript() {
	wp_deregister_script( 'jquery' );
	if ( is_single(****) ) {
		wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js');
	}
}
add_action('wp_enqueue_scripts', 'addScript');

jQuery(function($) {
	$(".hover_wrap figure").hover(
	function(){
		var imgWidth = $(this).children("img").width();
		var imgHeight = $(this).children("img").height();
		var capHeight = $('.is-style-browser_mac').height() +6;
		$(this).children("img").stop(true).animate({'top': -imgHeight+capHeight},imgHeight*6);
	},
	function(){
		var imgWidth = $(this).children("img").width();
		var imgHeight = $(this).children("img").height();
		$(this).children("img").stop(true).animate({'top': 0},imgHeight*1);
	});
});