【第二弾】ogaRiaツールを細かいところまでカスタマイズする方法

楽天
Yahoo!

【第二弾】ogaRiaツールを細かいところまでカスタマイズする方法

2016/11/29

お気に入りに追加する

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-13

眼圧を測る時の風が怖いogaRia佐藤です。

今回も引き続きogaRiaツールを細かいところまでカスタマイズする方法第2弾をご紹介したいと思います。

この記事は楽天GOLD、ヤフーのトリプルでショップページを構築されている
ショップ様向けの内容となっております。
RMSやストアクリエイターでページ構築されている店舗様は非対応となります。
GOLDサーバーの扱いなどご理解頂いている前提でご説明していますので
予めご了承お願い致します。

また、このカスタマイズはサーバー上でないと機能しませんのでローカル上では確認ができませんのでご注意ください。

カスタマイズ方法

詳しい初期設定などは下記記事よりご確認ください。
【第一弾】ogaRiaツールを細かいところまでカスタマイズする方法

思いViewer ナビゲーションを右側にする

ナビゲーションを右側に表示する事ができます。

<script>
<!--
//思いViewer ナビゲーションを右側に
$(function(){
	checkDOM({
		url:"思いViewerのツールタグURL",
		selecter:".navi"
	},function(p,d){
		var $wrap = d.closest("#image-navigation");
		$wrap.append(d.clone());
		var wrap_w = $wrap.width();
		var navi_w = $wrap.find(".navi").width();
		var main_w = wrap_w - navi_w;
		d.closest("body").append("<style>#image-navigation ul li{left: " + main_w + "px!important;}</style>");
		d.remove();
	});
});
-->
</script>

リアルタイムde切替くんにエフェクト効果をプラス

商品画像をマウスオーバーすると画像がズームUPする効果をつけます。
ズームUP時若干ボケるのでこの仕様だけご注意ください。

<script>
<!--
//リアルタイムde切替くんにエフェクト効果をプラス
$(function(){
	checkDOM({
		url:"リアルタイムde切替くんのツールタグURL",
		selecter:".image_url"
	},function(p,d){
		d.closest("body").append("<style>#display_image{overflow:hidden;}.image_url img {    -moz-transition: -moz-transform 0.1s linear;    -webkit-transition: -webkit-transform 0.1s linear;    -o-transition: -o-transform 0.1s linear;    -ms-transition: -ms-transform 0.1s linear;    transition: transform 0.1s linear;}.image_url img:hover {    -webkit-transform: scale(1.1);    -moz-transform: scale(1.1);    -o-transform: scale(1.1);    -ms-transform: scale(1.1);    transform: scale(1.1);}</style>");
	});
});
-->
</script>