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

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

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

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

ショップ運営や売上アップの方法など、ショップオーナー様のお悩みにお答えいたします。
ショップ運営Q&Aデザイン>コーディング
スマホページで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.ストア構築⇒カート設定⇒配送方法・送料設定⇒項目「送料」の中の【重量(こん包後)】0~の項目の【送料】に1,000円など任意の送料金額を設定。
2.送料無料にする【重量(こん包後)】任意の重量を入力、送料を0円と入力。
3.商品ページ編集で、販売用情報の【重量】の入力欄に、送料無料設定した重量を入力。
これで、アイコンが表示されるようになります。
Yahoo!ショッピングで、画像を一括登録したいのですが、方法はありませんか?

ストアクリエイターProでは、zipファイルで画像をアップロードできます。
画像管理 > 追加 > 一括アップロード のボタンを選択し、参照するzipファイルをダイアログから選択してアップロードしてください。
但し、そのときに参照している階層に画像ファイルが置かれますので、画像管理上、判りやすい階層ごとに置き場所を事前に決めるようにすれば扱いやすくなります。
Yahoo!ショッピングで商品を値引きした際「何%引き」と簡単に表示を変更する方法はありませんか?

「商品ページ編集」の設定で簡単にできます。「メーカー希望小売価格(税込)」を定価に設定しておき、その下の「通常販売価格(税込)」へ実際の値引き価格を入れてください。
それだけで商品ページの価格の下に、赤い囲み文字で「50%OFF」などと表示されるようになります。
楽天GOLD内の画像を変更したのですが、本番ページはいつまでたっても画像が切り替わってくれません。すぐに変更したいのですがいい方法はありますか?

楽天GOLDは画像やjsなどのキャッシュが残りやすく、長い時には変更に半日以上かかってしまう事もあります。
そうした際はファイルを別名で保存して、それを読み込むことで解決ができますが、ファイルの管理上あまりいい方法とは言えません。
それ以外ですぐに変更する手っ取り早い方法として、ファイル名の後ろに「?123」と付ける方法があります。
※数字の部分は「123」以外でも問題ありません。
数字をつけた状態でまた画像が変更できなくなった場合は、今度は別の数字に変更して頂くだけですぐに画像が反映されます。
商品登録の際、CSVを使ってみたのですが、エラーが返ってきてなかなかうまく行きません。コツはなにかありますか?

よくあるミスでは、記述の最後に意図していない半角スペースが入っていて、その影響でうまく登録できないことや、楽天では商品管理番号や画像ファイル名には、半角英数字しか使えないのでエラーが出る、ということが起こります。 そのようなエラーを何度か確認することで、正しく入力するコツも掴めてくると思います。 手作業で入力するよりも、大量の商品を一度に早く登録できる便利な機能ですので、是非使いこなせるように頑張ってみてください。
楽天市場店に続いてYahoo!ショッピングにも出店したいが、商品情報欄はそのまま移行できますか?

全部の情報の移行が可能です。 表示仕様の違いが細かくありますので、CSVでシートを編集して調整する必要があります。 例えば、表示領域の横幅ピクセルサイズが違う場合は、シートで一斉変換することで対応可能です。 移行する際は、先に楽天側の商品情報も整理をした上で、綺麗に仕様を揃えることをお勧めいたします。 楽天とYahooの商品情報を同じデータ構成にすることで、今後の運用が格段に楽になります。 画像のデータについても格納場所が変わりますので、そのまま移行するには楽天GOLDと同じようなストレージサービスのYahoo!トリプルのご契約をお勧めいたします。
ヤフーショッピングストアで、商品画像の下のスペースを利用して、オリジナルのバナーを設置しているお店がありました。管理画面では入力する所が無く、CSSを利用していると思うのですが、どのような方法で設置しているのでしょうか?

CSSをを利用するので、トリプルを契約していることが前提です。方法は、商品ページの「ひと言コメント」フォームを、利用します。CSSは#CentItemInfo2にクラスなどのセレクタを当てはめ下記ソースを入れて下さい。
例)#CentItemInfo2 .test {
width: 300px;
position: absolute;
top: 420px;
left: 0px;
display: block;
}
一言コメントのフォームには下記ソースを入れてください。
<img src=”http://shopping.geocities.jp/ストアID/商品画像名” class=”test”></a>
この方法で、表示させることが出来ます。
PCページで別々の縦バナーを両側に設置したいのですが、どのようにすればいいでしょうか?

片側のみの縦バナー設置では、bodyタグの背景画像として縦バナーを設定しますが、その方法だけだと両側に別々のバナーを設定できません。 divタグを使って両側にバナーを設置する方法は楽天でも紹介されていますが、商品ページによっては長さが長すぎたり、途中で切れてしまったりするので、bodyタグを利用した場合に比べて見栄えが悪くなります。 そこでおすすめの方法として、bodyタグと同じ縦バナー設置cssを、左右を逆にしてhtmlタグにも設定する方法です。 html { background: url(xxxx.jpg) repeat-y right top;} body { background: url(yyyy.jpg) repeat-y left top;} (※marginとpaddingはreset.cssで0に設定しています) こうする事でページの長さにピッタリと合った、別々の縦バナーを両側に設置する事ができます。
楽天カテゴリーページの商品価格の文字が、黒色で目立っていないので、赤色にして目立たせたいのですが設定する場所がありません。変える方法はないでしょうか?

この部分は、CSSを使ってカスタマイズします。 カテゴリー商品の価格部分のspanタグに、.category_itempriceというセレクタが指定されているので、ここにカラー要素を入れましょう。 例)span.category_itemprice{color:#ce0000;} 例)のソースを、デザインメニューの「ヘッダー・フッター・レフトナビ」のフォームを入れて下さい。 この方法でカテゴリーページの商品価格の文字を赤色に変えることが出来ます。
楽天で販売説明文の最後に全ページ共通でセール用バナーを追加したいのですが、ひとつずつ設置するのは大変なので何かいい方法はありますか?

全商品一括の編集でしたらcsvを使って作業して頂くのがいいのですが、それよりも全ページの販売説明文の最後に「iframe」を設置する方法がおすすめです。 1度全ページにiframeを設置したら、あとはそのhtmlを編集するだけで全ページにバナーを表示する事ができ、作業効率も高くなります。 設置する際には「id」か「class」を設定しておくことで、cssを使って「iframe」をバナーに合わせた高さに変える事ができますし、セールが終わった際には非表示にもできます。 この方法を応用すれば、まとめ買いやおすすめ商品の訴求にも使えますので、更新の頻度が高い箇所には「iframe」タグを設定してみましょう。
ポンパレモールでオリジナルのカートボタンを設置したいと思います。CSSを使って可能でしょうか?

linkタグが2014年12月から使用可能になったので外部CSSを利用することが可能になり、デザインできる幅は増えましたが、ポンパレの規約で (ア) PCトップページ、(イ) スマートフォントップページ、(ウ) カテゴリページ、(エ) 商品ページ、(オ) 複数商品ページ、(カ) 会社概要ページ、(キ) 支払・送料については、これを禁止されているのでルール上出来ません。
ヤフーショッピングストアでショップを運営しています。HTMLソースのコメントアウトタグを使って、ある部分を非表示にしたいのですが出来ません 。何か良い方法はありますか?

コメントアウトタグを改行していませんか?ヤフーショッピングストアではコメントアウトソースを改行すると、テキストとして認識されます。改行をしないで1行で入力することで、 コメントアウトタグが認識されて非表示にすることが出来ます。
画面の横に固定のバナーを設置しました。ウインドウを小さくして閲覧すると、固定バナーがコンテンツに重なり、邪魔して見づらいです。何か良い方法はないでしょうか?

CSSでブラウザのサイズを指定して、非表示にすることが出来ます。
@media (max-width: ●●●px) {
■■■ {visibility:hidden;}
■■■は設置している固定バナーの指定名、●●●の部分には非表示にしたいブラウザーのサイズを入力。 この方法で、非表示にすることが出来ます。
楽天の商品名の下にバナーを貼っているサイトをみたのですがどのようにやっているのでしょうか?

CSSを使ってのカスタマイズになります。 商品名にitem_nameとういうクラスがかかっていますので、これを利用します。 CSSは下記内容になります。
.item_name{
display:block;
height:280px;
background-image:url(‘バナー画像URLをいれてください。’);
background-position:bottom;
background-repeat:no-repeat;
}
記述する場所は、店舗設定 → デザイン設定 → ヘッダー・フッター・レフトナビのヘッダーに<style></style>を記述し、この囲った中に先程のCSSを入れて下さい。こちらで表示されます。
1 / 212