ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング

ショップ運営のお悩みを解決!

ショップ運営や売上アップの方法など、ショップオーナー様のお悩みにお答えいたします。
ショップ運営Q&Aデザイン>コーディング
スマホにiframeを読み込んだのですが、機種によっては途中で切れてしまいます。どうすれば切れずに表示されますか?

スマ-トフォンの場合、機種によってブラウザの幅が違うためにこのような現象が起きてしまいます。
表示が切れている場合はiframeの高さが足りていないので、cssの「メディアクエリ」を利用して、ブラウザの幅に合わせて個別にiframeの高さを設定してあげるといいでしょう。
4パターン記載すればほぼすべてのスマートフォンのブラウザに対応することができます。(縦向きの場合) 下記cssの記載例です。(●●●●がiframeのclassまたはid、■■■■はiframeの高さ)

/* メディアクエリの範囲外には幅320pxの際のiframeの高さを記載(iphone5など) */
.●●●● {width: 100%;height: ■■■■px;}

/* 幅360px以上(一部のandroidのブラウザ向け) */
@media screen and (min-width: 360px) {
.●●●● {height: ■■■■px;}
}

/* 幅375px以上(iphone6,iphone7など) */
@media screen and (min-width: 375px) {
.●●●● {height: ■■■■px;}
}

/* 幅414px以上(iphone6 Plus,iphone7 Plusなど) */
@media screen and (min-width: 414px) {
.●●●● {height: ■■■■px;}
}
Yahoo!ショッピングで「お気に入りボタン」を好きな場所に設置したいのですが、どうすればよいでしょうか?

Yahoo!ショッピングのお気に入り登録URLを、任意の画像やテキストに設定すれば、好きな場所に「お気に入りボタン」として設置する事ができます。
記述例:
http://shopping.yahoo.co.jp/my/watchlist/add/?store_id=●●●&page_key=■■■&.scrumb=0 上記URLの
・●●● ⇒ストアID(ストアページURL内、yahoo.co.jp/◯◯/の部分)
・■■■ ⇒商品ID(商品ページURL内、□□.htmlの部分)
それぞれを書き換えてご利用ください。
参考:http://recipe.oga-ria.com/sell_knowhow/640
楽天で、GOLDのTOPページへリダイレクトさせる時のリダイレクトの表示画面を見させたくないので、リダイレクトの設定を0秒にしました。すると、旧RMS編集画面もすぐにリダイレクトされるので編集できなくなりました。編集できるように改善策を教えて頂けませんでしょうか。

「旧R-Storefront」をクリックして、直ぐにブラウザのショートカット「Alt+←」を連打しながら「説明文」の「画面上」を選ぶ方法や、「旧R-Storefront」をクリックして、直ぐに「Esc」ボタンを連打することでリダイレクトを防ぐことが出来ます。お使いのPC環境にあった方でお試しください。
また、RMSログイン後、下記URLで直接「旧R-Storefront」のリダイレクト設定画面にいけます。
https://master.rms.rakuten.co.jp/rms/mall/rsf/shop/vc?__event=WL05_010_001&num=1
ブックマークに入れておくと便利ですので参考にして下さい。
楽天市場で出店していますが、TOPページはGOLDで作っています。できればGOLDのページでデフォルトのカレンダーを表示したいのですが、何か方法はありませんでしょうか?

楽天のデフォルトのカレンダーには「カスタムタグ」と「HTMLタグ」の2種類があり、RMS「基本情報設定」>「営業日カレンダー設定」でカレンダーが生成できます
GOLDページの場合は「営業日カレンダー設定」で生成して最後に出てくる「HTMLタグ」をコピー&ペーストすることでデフォルトのカレンダーを表示させることが出来ます。
楽天でスマホページのフッターに固定バナーを設置していましたが、カート部分を隠すことが最近決まった楽天の違反制度に引っかかる為、設置をやめました。 フッターに固定する方法以外で、何かバナー設置に良い場所はありますか?

小さいバナーの場合は、スマホのサイド(商品ページの上へボタンの上など)に設置するのもありですが、横幅いっぱいの大きめバナーの場合は「楽天の看板下のスペース」を利用する方法がオススメです。
この場所ならば、ページに来たお客様はほぼ必ずといっていいほどバナーを目にする為、フッターへの固定バナーと同じようにオススメ商品やイベントページに誘導できます。
iframeを利用すると、文字数制限なくたくさんのコンテンツを表示する事ができるためおすすめです。
楽天でパララックスを使用することはできますか?

楽天GOLDを使えば自由度のあるページが制作できるようになるので、jsを利用して実装する事は可能です。パララックスについては様々なプラグインがあるので、それを使うといいでしょう。
GOLD使わない場合は、jsを利用した時のような複雑なアニメーションのパララックスは難しいですが、cssのみのパララックスなら実装可能です。
cssで背景画像を固定するだけの簡易なパララックスなら「各セクションの背景画像をbackground-position: fixed;で固定配置」する事と「テキストやイメージ画像などのコンテンツをposition: absolute;で絶対配置」する事で、ページをスクロールしても背景画像は動かず、そのまま次のセクションに隠れるといった表現が実現できるようになります。

●html—————-
<header></header>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>

●css—————-
header {
background: url(“../images/bg_header.png”) no-repeat;
background-attachment: fixed;
height: 500px;
}
.one {
background: #333333;
height: 500px;
}
.two {
background: url(“../images/bg_two.png”) no-repeat;
background-attachment: fixed;
height: 500px;
} .three {
background: #666666;
height: 500px;
}

この方法ならば楽天の各ページでパララックスを導入できるので、是非試してみて下さい。
楽天の商品登録の際、PC販売説明文へiframeを含むHTML記述を入れてプレビューした時、表示が崩れることがあります。本番と同じ状態で、公開せずにプレビューする方法は何かありませんでしょうか?

以前までは商品登録時に倉庫へ入れて商品ページをプレビューした際は、iframeや外部読み込みのcssが反映されずに崩れて表示されていましたが、現在は楽天全ページのhttps化に伴い、倉庫内の表示も本番と同じ状態でプレビューできるようになりました。
FTPソフトでFFFTPを使用しています。サーバーからローカルにダウンロードしているのですが全くダウンロード出来ない時があります。これは何が原因なのでしょうか?また、FFFTP以外に使いやすいフリーのおすすめソフトはりませんか?

FFFTPのダウンロードが出来ないのは、設定による影響が考えられます。
下記の方法を試してみて下さい。
①メニューバーの「接続」→「接続」→ホスト一覧から接続先を選んで「設定変更」
②「高度」タブ の「LISTコマンドでファイル一覧を取得」にチェック。
(他のチェックがあれば外す)
③「暗号化」タブ の「暗号化なしで接続を許可」にチェック。
(他のチェックがあれば外す)

また、FFFTP以外のFTPソフトとしてはFileZilla(ファイルジラ)がオススメです。
タブ切り替えによる複数サーバー接続、同期ブラウズ、タイムスタンプやファイルサイズでホストとローカルのディレクトリを比較する機能など多機能で、さらに、サイトマネージャーに設定した情報や項目はインポートやエクスポートできるので、同じ設定を他のパソコンに反映させることもできます。
ダウンロードは下記ページよりおこなう事ができます。

FileZilla(ファイルジラ):https://ja.osdn.net/projects/filezilla/releases/
楽天スマホの大バナー、小バナーの縦幅を変更している店舗があったのですが、どのような方法で変更しているのでしょうか?

スマホページにCSSを読み込むことで、縦幅を任意のサイズに変更する事ができます。
下記ソースを各共通説明文(TOPページ、カテゴリー、商品ページ)に入力してください。

【トップページ・カテゴリーページ】
/* 大バナー */
.rstBigBnr li img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}
/* 小バナー */
.rstSmallBnr .smtBannerItem03 img {
width: 100%;
height: 000px; /* ←任意の高さを指定する */
max-width: none !important;
max-height: none !important;
}

【商品ページ】
/* 大バナー */
#shopInfoSliderLarge .bannerImageFrame img {
max-height: none !important;
}
/* 小バナー */
#shopInfoSliderSmall img {
max-height: none !important;
}

この方法を使えば、PCとスマホのそれぞれにサイズの違うバナーを作らなくてもよくなる為、作業効率の向上に期待できます。
PCのバナーをスマホ用に作り替えている方は、是非この方法を試してみて下さい。
楽天GOLD用に作ったページに商品検索を入れたのですが、文字化けしてしまって何が悪いのか判りません。どうしたらよいでしょうか?

恐らく作成したhtmlファイルの文字コードが、EUCになっていないのではないでしょうか?
TeraPadなどの文字コードが変換できるソフトで htmlファイルを開いて、文字コードをEUCにして保存してから、アップロードしてみてください。
楽天で商品登録の際、項目選択肢で色を選べるように、実際の色見本画像を表示したいのですが、どうすればよいでしょうか?

楽天ではデフォルトで、項目選択登録時に色見本の画像を登録できるので、その機能を使うとよいでしょう。
使用する画像はR-cabinetへ登録、そのURLを項目選択画面にて「色見本」の入力エリアに登録してください。
楽天市場の商品ページで、自ショップ商品の1カテゴリーのみの検索窓を設置したいのですが、できますでしょうか?

iframeでフォーム設定を読み込むことで設置が可能です。1カテゴリーのみ検索する場合は、フォーム入力に最初からカテゴリー属性を検索条件として設定しておきましょう。
ahooショッピングストアの、「会社概要」や「お買い物ガイド」などのストア情報ページで、フッターが出てこないのですが、どのようにすれば出すことが出来るのでしょうか?

Yahooショッピングの場合、会社概要などのページには、商品を販売する目的ではないページという理由で、フッターが表示されない仕様となっております。
よくある質問ページ: https://store-info.yahoo.co.jp/s/shopping/faq/tools/cc/506.html 
どうしても表示させたい場合は、トリプルを使用して、CSSでYahooの仕様を上書きし、ヘッダーのフリースペースを利用する事で表示しているように見せる事は可能ですが、そこまでする必要性はないかと思います。
楽天市場の「会社概要」ヘッダーに画像でカテゴリーリンクなどを設置しているショップがありますが、検索窓は設置できるのでしょうか?

会社概要のヘッダーは、RMSの 1 店舗設定 > 基本情報設置 > 会社概要ページ > デザイン > プルダウンの「編集」で触ることができますが、触れる範囲は、ナビボタンのみで「画像+リンク」の設定のみとなります。楽天のシステム上、検索窓の組み込みはできません。
スマホページでiframeを利用すると、機種によってiframe内の画像が途中で切れてしまいます。jsが使えない場合でも、大きく余白をとらずに、各機種できれいに高さを合わせることはできますか?

jsのプラグインが使えない場合は、css3のメディアクエリを使う事で、機種ごとの高さを設定する事ができます。
メディアクエリでは解像度ごとにcssを記載していきますが、今回の様に機種ごとに高さを調節する場合は、大きく4つのブレイクポイント(分岐点)を設定するといいでしょう。
まずはiPhone5Sまでの実質解像度「横幅320px」、アンドロイド端末に多い「横幅360px」、iPhone6、iPhone6S、iPhone7では「横幅375px」、そしてiPhone6 Plus、iPhone7 Plusの場合は「横幅414px」が縦画面で見たときのブレイクポイントとなっています。
これらをふまえ、下記のように横幅ごとに4つのcssを設定する事で、画像が途中で切れる事もなくなるでしょう。

/**最小(横幅320px)時の高さ**/
iframe {height: ○○px;}

/**横幅360px時の高さ**/
@media all and (min-width: 360px) {
iframe {height: ○○px;}
}

/**横幅375px時の高さ**/
@media all and (min-width: 375px) {
iframe {height: ○○px;}
}

/**横幅414px時の高さ**/
@media all and (min-width: 414px) {
iframe {height: ○○px;}
}

ただし画面を横にしてみた場合を含めたり、新しい機種が登場した際には、さらにブレイクポイントの追加が必要になりますので注意しましょう。
HTMLファイルをメモ帳で編集すると文字化けしてしまいます。フリーソフトで、HTMLを編集できるオススメのソフトを教えてください。

手軽に使えるフリーソフトでしたら「TERA PAD」がおすすめです。
余計な機能がついていないので、メモ帳と同じ感覚で使えて、文字化けの修正も簡単にできます。中級者以上の方には、多機能テキストエディタの「Sublime Text」がおすすめです。
こちらのソフトは世界的に人気で、プラグインが数多く用意されている為、拡張性に優れています。コーディングを快適にする機能がたくさんあるので、現状のエディタに不満のある方はぜひ使ってみて下さい。

●TERA PAD
  http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
●Sublime Text
https://www.sublimetext.com/
楽天で買い物かごの表示が変わって、商品ページのレイアウトが崩れてしまいました。何かいい対応方法はありますか?

2017年3月に楽天では「フローティング買い物かごボタン」機能が追加されました。
その際に、買い物かごの横幅が広がってしまったためにレイアウトが崩れてしまっているので、cssを記載して横幅を狭めてみましょう。
狭め方は色々ありますが、下記コードをいれてカートを縦に並べる方法だと、機能性も損なわないのでお勧めです。

<style> .cart-button-container { float: left !important;} .floatingCartSplitButtons{ width: 400px; overflow: hidden; zoom: 1;} </style>
こちらのタグをヘッダー、または共通説明文(大)などに読み込んで利用して下さい。
ヤフーショッピングストアで、検索フォームを自分で決めた位置に設置したいのですが、簡単に設置する方法はないでしょうか?

ヤフーショッピングストアから、検索フォームの独自タグが用意されており、検索フォームとボタンの位置関係が、「縦並び」と「横並び」の2パターンあります。

縦並び → <!–Y store_search:type=a –>
横並び → <!–Y store_search:type=b –>

上記の検索フォームタグを表示させたい場所に貼ることで設置出来ます。
楽天のカテゴリーページで、在庫切れ商品を非表示にしたいのですが何か方法はありますか?

カテゴリーページのURLの最後に【?s=1&i=1#risFil】を追加してリンクを設定してください。
例:http://item.rakuten.co.jp/店舗名ID/c/0000000001/
 → http://item.rakuten.co.jp/店舗名ID/c/0000000001/?s=1&i=1#risFil

これで、在庫切れ商品は表示されないようになります。
楽天に登録した商品画像を一括でダウンロードしたいのですが、楽天にはその機能がないとの事です。なにかいい方法はありますか?

R-Cabinet内の全画像となると大変な作業になってしまいますが、カート横に出てくる商品画像だけでいいのでしたら、楽天でcsv契約をして頂き、画像ダウンロードのフリーソフトを使う事によって、一括でダウンロードする事ができます。
ダウンロードのフリーソフトには色々ありますが、楽天のcsvと相性がよくておすすめなのは「DCさくら」というフリーソフトです。
まずCSVデータをダウンロードし、その中から「商品画像URL」列の画像アドレスをセルごとコピーして頂き、「DCさくら」に貼り付けて頂く事で一括で画像をダウンロードする事ができます。
R-Cabinet内でフォルダ分けしたのと同じように、フォルダを階層ごとに自動生成しながら画像をダウンロードをする事も可能ですので、是非こちらの方法を試してみて下さい。

DCさくらダウンロード:http://www.dc-sakura.com/index.shtml
1 / 3123