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

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

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

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

ショップ運営や売上アップの方法など、ショップオーナー様のお悩みにお答えいたします。
ショップ運営Q&Aデザイン>コーディング
楽天でスマホページのフッターに固定バナーを設置していましたが、カート部分を隠すことが最近決まった楽天の違反制度に引っかかる為、設置をやめました。 フッターに固定する方法以外で、何かバナー設置に良い場所はありますか?

小さいバナーの場合は、スマホのサイド(商品ページの上へボタンの上など)に設置するのもありですが、横幅いっぱいの大きめバナーの場合は「楽天の看板下のスペース」を利用する方法がオススメです。
この場所ならば、ページに来たお客様はほぼ必ずといっていいほどバナーを目にする為、フッターへの固定バナーと同じようにオススメ商品やイベントページに誘導できます。
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.ストア構築⇒カート設定⇒配送方法・送料設定⇒項目「送料」の中の【重量(こん包後)】0~の項目の【送料】に1,000円など任意の送料金額を設定。
2.送料無料にする【重量(こん包後)】任意の重量を入力、送料を0円と入力。
3.商品ページ編集で、販売用情報の【重量】の入力欄に、送料無料設定した重量を入力。
これで、アイコンが表示されるようになります。
Yahoo!ショッピングで、画像を一括登録したいのですが、方法はありませんか?

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

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

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