楽天Yahoo!【第一弾】ogaRiaツールを細かいところまでカスタマイズする方法2016/11/22ogaRiaツールお役立ちツールカウントダウンタイマーなんでも商品ランキングリアルタイムde切替くん上級者向け自動カレンダーお気に入りに追加する最近ダウンロードしたスマホのゲームに珍しくハマッてしまい隙あらば遊んでいるogaRia佐藤です。ogaRiaツールを細かいところまでカスタマイズする方法をご紹介したいと思います。知識がある方なら大きくカスタマイズが可能です!今回はサンプルカスタマイズを5種類ご用意してみました。この記事は楽天GOLD、ヤフーのトリプルでショップページを構築されているショップ様向けの内容となっております。RMSやストアクリエイターでページ構築されている店舗様は非対応となります。GOLDサーバーの扱いなどご理解頂いている前提でご説明していますので予めご了承お願い致します。このカスタマイズはサーバー上でないと機能しませんのでローカル上では確認ができませんのでご注意ください。自動カレンダー横並びなんでもランキングの商品画像にエフェクト効果をプラスまとめカスタマイズ方法このカスタマイズはjqueryで動いています。具体的にはogaRiaツールタグ(iframeタグ内)をiframe外から操作しちゃおう!という方法です。ベースタグ(jqueryの本体も)をogaRiaツールタグが貼られているページのタグ内などに貼り付けておきます。※ここでいうページとはRMS上のページではなくGOLDで作られたindex.html等の事を指します。続いて試してみたいサンプルタグを同じくタグ内に貼り付ければ反映されます。ベースタグ下記ベースタグをページのタグ内に貼り付けましょう!これで準備は完了です。貼り付けソース内の赤字の部分を修正してから貼り付けてください。タグはすべてPC版を想定しています。urlの部分はカスタマイズを当てたいツールのsrc=””部分がURLになります。frameborder="0"></iframe>リアルタイムde切替くんのナビゲーションボタンを丸にするリアルタイムde切替くんのナビゲーションボタンは四角ですが、スマホのデザインのように丸くデザインを変更できます。a"},function(p,d){d.css({"border-radius":"100%","text-indent":"-9999px",});});});--></script>リアルタイムde切替くんで表示バナーが空の時、iframeを自動非表示リアルタイムde切替くんにて表示バナーするバナーが1つもない時、ツールの仕様上どうしても空白ができてしまいます。そこで下記のタグを使えば表示状況を判別して表示がなければツール自体を非表示にして空白を無くすことができます。自動的にカウントダウンタイマー自体を非表示にすることができます。+'"]').hide();}},500);});});--></script>自動カレンダー横並び自動カレンダーを横並びにデザインを変更できます。レフトナビではないフッターなどに設置したい時など。管理画面で横、縦のサイズを再調整してください。<script><!--//自動カレンダー横並び$(function(){checkDOM({url:"自動カレンダーのツールタグURL",selecter:".ui-datepicker-group"},function(p,d){d.css({"float":"left","margin-right":"3px",});d.parent().find(".ui-datepicker-row-break").remove();});});--></script>なんでもランキングの商品画像にエフェクト効果をプラス商品画像をマウスオーバーすると画像がズームUPする効果をつけます。ズームUP時若干ボケるのでこの仕様だけご注意ください。scale(1.1);}</style>");});});--></script>まとめいかがでしたでしょうか。今まで出来ないようなカスタマイズを実現する事ができましたね!また色々なカスタマイズの参考をご紹介できればと思います。佐藤ディレクターCSSやjavascriptなどを使ってワンランク上のショップ作りをサポートできるようなノウハウを中心にお伝えできればと思います!業務の簡略化、効率化に情熱を注いでいます。=コメント*内容をご確認の上、送信してください。Us[株式会社オーガランド]現在24のネットショップを運営する鹿児島の企業です。販促支援システムを提供する「ogaRia(オガリア)」サービスを運営しています。株式会社オーガランド。