楽天市場 PC表示でのiflame活用について

Question

楽天市場にて、以下の内容をiframeを活用して表示を行っている店舗がありました。
ぜひ当店でも実装したいのですがどのようにしたら良いのでしょうか？
お手数をおかけしますして誠に申し訳ございませんが何卒宜しくお願いします。

https://www.rakuten.ne.jp/gold/amiami345/cms/item/ot-shimazouri/detail.html

Answer

ECマスターズの 稗田です。

> ぜひ当店でも実装したいのですがどのようにしたら良いのでしょうか？

活用方法によってご案内方法が異なりますが、
ECステーションにてご提供している
ページクリエイターにて同じようなものを作成できますので
ご活用くださいませ。

ページクリエイター利用マニュアル
https://manual.ecsystem.jp/category/search_service/page_creator/

また、iframeのタグはPCページ上のみ利用可能なタグとなっており
SPページ上では利用できませんので、ご注意くださいませ。

Answer

ECマスターズ稗田様

お忙しい中回答ありがとうございます。
ECステーションのツールが優秀なのは存じておりますが、
当方ビーノを利用しておりECステーションに切り替える予定がございません。

参考URLの店舗はページクリエイターを使用してないように見受けられます。
質問時のキーワードもiframe、HTML、JavaScript、PCページと明記致しましたので
質問の意図をくみ取ってもらえるだろうと思い質問させていただきました。
ページクリエイター以外での実装方法のご説明をお願いしたく存じます。

誠に恐縮ですが何卒宜しくお願い致します。

Answer

ECマスターズの土屋です。

>ページクリエイター以外での実装方法のご説明をお願いしたく存じます。

事務局側でhtmlのテンプレートを作らせて頂きました。
htmlに「xxx」が記載されている箇所にショップURLを
ご記入していただきますと、画像が表示される
仕様となっておりますのでお試し頂けますと幸いです。

またこちらのテンプレートファイルを楽天GOLDに
アップロードして頂きましたら、アップロード先の
URLをiframeタグに挿入して頂きますと
表示される様になります。

(例)


テンプレートと同様に「xxx」にはショップ名「△△△」はアップロードした
htmlのファイル名をご記入下さい。

どうぞよろしくお願いします。

【テンプレート】




    
    
    
    



    
        @charset "utf-8";

        @media screen and (min-width:600px) {
            body {
                width: 730px;
                margin: .5rem
            }
        }

        #detail .title {
            width: 100%;
            padding: 4% 8% 2%;
            font-size: 1.5rem;
            font-family: Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif;
            color: #333;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        #detail .title span {
            display: none
        }

        @media screen and (min-width:600px) {
            #detail .title {
                width: 700px;
                padding: 0;
                margin: 5px 15px;
                font-size: 30px;
                font-family: Lora, Arial, Verdana, 'Helvetica Neue', Helvetica, sans-serif
            }

            #detail .title span {
                font-size: 1rem;
                color: #666;
                margin-left: 2.25rem;
                display: inline
            }
        }

        #detail .content {
            width: 90%;
            margin: 0 auto;
            border-top: 1px dashed #eaeaea;
            padding-top: .65rem
        }

        @media screen and (min-width:600px) {
            #detail .content {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                width: 800px;
                margin: 0 15px;
                padding-top: 10px
            }
        }

        #detail .left_box {
            margin: 0 auto;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            height: 100%
        }

        @media screen and (min-width:600px) {
            #detail .left_box {
                -webkit-box-ordinal-group: 2;
                -ms-flex-order: 1;
                order: 1;
                width: 320px;
                height: 100%;
                overflow: hidden
            }
        }

        #detail .left_box:before {
            content: "※タップで拡大表示";
            width: 100%;
            font-size: .8rem;
            letter-spacing: .075rem;
            display: block;
            margin: 6% auto 6% 4.5%
        }

        #detail .left_box img {
            width: 24.5%;
            height: 31.1%;
            margin: 0 0 .4% .4%;
            float: left;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }

        @media screen and (min-width:600px) {
            #detail .left_box:before {
                display: none
            }

            #detail .left_box img {
                width: 130px;
                height: 115px;
                margin: 0 0 11px 20px
            }

            #detail .right_box {
                -webkit-box-ordinal-group: 3;
                -ms-flex-order: 2;
                order: 2;
                width: 480px
            }

            #detail .right_box #result {
                width: 480px
            }

            #detail .left_box img:nth-of-type(n 10) {
                margin-bottom: 8px
            }

            #re_btn {
                display: none
            }
        }

        #detail .right_box img {
            width: 100%
        }

        #re_btn {
            background-color: #999;
            text-align: center;
            margin: 5% 5% 3%;
            padding: 3.5% 0;
            letter-spacing: .1rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        #re_btn a {
            color: #fff
        }

        #re_btn a:before {
            content: '\003c\003c';
            margin-right: .25rem;
            vertical-align: middle;
            letter-spacing: 0
        }
    
    
        Detail※カーソル選択で拡大表示

Answer

ECマスターズ　土屋様

ご丁寧な解説に加えテンプレートまで。。。
本当にありがとうございます！

頂戴しましたテンプレートを実装する事で、
お客様にとって非常にわかりやすいものになると確信してますので、
売上も変わってくるだろうと希望が持てます！
色々な商品で活用させていただきます。
この度は迅速なご対応誠にありがとうございました。

Answer

ECマスターズの土屋です。

とんでもないです。

何かお困りな事がございましたら
遠慮なくご相談して頂きますと幸いです。

引き続きどうぞよろしくお願いします。