制作テクニックこんにちは、デザイナーの真琴です。ガジェットの最新情報にはいつも気にして確認しているんですが、iPhone6sのバッテリー不具合の情報をいまさら知って修理依頼予約中です。iPhone6s使用中の方でまだ確認されていない方は自分のiPhoneもバッテリー交換プログラム対象になっていないか確認をオススメします。確認ページはこちらからどうぞ。今回は、楽天市場のスマートフォン版についての裏ワザ?!を紹介したいと思います。楽天市場に出店されている方なら、PC版とスマートフォン版(以下、SP版)でどちらの方がアクセス数が多いのかは知っているとは思いますが、楽天市場全体ではPC版が年々下降気味になりSP版が年々上昇しているという結果が出ています。PCページだけしっかり作り込んでたらいいやぁって時代ではなくなっています。モバイルファーストでページ構成も考えるようにしていかないと売上の向上に繋がらなくなってしまいます。楽天市場なんですが、SP版のデザインを楽天RMSで設定できるようになっています。ページ共通パーツ・カテゴリページ共通パーツなどが設定可能になっています。決められた枠組みに制限されたタグしかできない仕様になっていて自由度がかなり低いです。トップページのデザインだけは、以前に紹介した楽天Goldを利用すれば自由度の高いカスタマイズは可能ですが商品ページなどのトップページ以外のページではCSSやiframeなどが使いない点は解決できません。楽天市場のスマホページをカスタマイズCSSがスマホページでも使えるiframeがスマホページでも使えるまとめ見出し楽天市場のスマホページをカスタマイズスマホで楽天市場のいろんなショップを見てたら、『なんでここのショップこんなデザインのページにできるんだろう??』って思うことはないですか??SP版では使えるHTMLタグが制限されていて自由度がかなり低いはずなのですが固定ヘッダーが付いていたり、商品ページにスライダーバナーがあったり、固定バナーがあったりとPC版と同じような自由度のショップがあると思います。自分のショップもそんな感じにしたいのにやり方がわからない方に詳しく説明していこうと思います。スマートフォン用入力項目で利用できるタグが以下の通りです。※今から説明する方法は楽天Goldを利用していることが条件になります。CSSがスマホページでも使えるPCのように固定バナーを入れたい!オリジナルのヘッダーメニューを設置したい!と思ったら絶対に必要になってくるのがCSSです。<link>タグは禁止タグになっています。そこで、入力エラーをすり抜けて登録できてしまう裏ワザがあるのです。タグ内に13個の全角スペースを入れるまたは、『=””』をタグの後にいれるとスマホでもlinkなど使えなかったタグが使える様になります。type="text/css">事前に作成したcssファイルをFTPソフトで任意のフォルダに保存します。自店舗のURLを入れて下さい。次に、cssを読み込ませたいページの編集画面に貼り付けます。共通パーツ』の『商品ページ共通説明文』に貼り付けます。確認画面に進み、登録すると商品ページでCSSが読み込まれているはずなので確認します。読み込まれていれば、成功です。iframeがスマホページでも使える次は、iframeの挿入です。iframeもlinkタグとほぼ同じ要領です。linkタグと違う部分は閉じタグが存在するので、閉じタグにも加工が必要になってくる点です。開始タグは、cssの時と同様にタグ内に13個の全角スペースを入れるまたは、『=””』をタグの後にいれます。閉じタグの場合は、>(大なり)の前に全角スペースを1つ入れます。>事前に作成したhtmlファイルをFTPソフトで任意のフォルダに保存します。自店舗のidを入れて下さい。次に、iframeを読み込ませたい部分に貼り付けて確認できれば成功です。(商品ページなどにも貼り付けが可能になります。)これを使えば、転換率アップに繋がりそうな注文状況ツール(人気ツール)を埋め込んだり、レコメンド商品ページを埋め込んだり色々とできるようになります。まとめ今回は、linkタグとiframeタグだけの紹介でしたが、応用するとclassやidなどの属性を振ることも可能になります。制限されていたタグを使えるようにするだけでものすごくいろいろなことができるようになります。いろんなショップを見て、すごいなぁと思うショップを見つけた時はそのページのソースを分解していくと構造がわかることがあるのでとても勉強になります。こんなことできないかなぁ?と思うことは大体のことは何らかの手段を使えばできるようになることがほとんどだと思っています。チャレンジしてより良いショップになるようにしていきましょう。この方法はあくまでも楽天RMSの入力エラーチェックを回避する裏ワザで楽天株式会社の公式の方法ではないので楽天市場側が対応して使えなくなってしまう可能性もあります。そこを理解した上、自己責任でご使用下さい。デザイナーのマコトです。制作関係の記事を主に初級~あまり知られていなテクニックまで幅広く書いていきます。ついて株式会社松平商会は貿易商社として顧客への新価値の提案を行っています。EC事業とWEB制作からなるインターネット部門と法人営業をメインとした営業部門から成り立っています。ネットショップ様向けに特化したスマートフォンケース卸販売を行う「スマホケース卸問屋」の運営をはじめとするEC事業に特化した事業を展開しています。個人情報の取扱についてはこちらを御覧ください。