PCカテゴリページについて

Question

いつもお世話になっております。
RMSの【カテゴリ説明文上】にアイフレームタグを記述し、ファイルを呼び出しさせたいのですが上手く表示されません。
GOLDには正常にアップロードされているのを確認しましたが、
RMSに反映すると画像のリンク先が崩れたり文字化けが起こってしまいます。
詳しい内容は【報告する】から送信させていただきます。
ご教授よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

リンク先が崩れている、というのは、
beads-ichiran.html 内の画像をクリックすると、
思わぬ見た目になる、ということですね。

確認したところ、beads-ichiran.html 内のリンクに
target（リンク先を開く対象）が記載されていなかったため、
リンク先のページが、iframeの枠内で開くようになっていたことが
わかりました。

今見ているタブの中で開く場合は「_top」、
新しいウィンドウを開く場合は「_blank」で、
targetの指定をおこなっていただきますようお願いします。

方法がわからない場合は、beads-ichiran.html 内のソースすべてを、







と




で囲んでいただきますようお願いします。
（_blank を _top に変更すると、今見ているページが移動するようになります）

前半のソースに含まれるタグで、リンク先のページの開き方を指定しております。
http://html5.cyberlab.info/elements/metadata/base-target.html

Answer

ECマスターズの田中です。

お知らせいただいたタグで、そのまま反映されましたでしょうか。
いただいたタグには、スマートフォン用のバグ利用のための、
余計な「 =""」が含まれておりますので、
念の為、一度削除して挿入をお試しいただきますようお願いします。

Answer

こちら挿入しましたがやはりリンク先などが崩れてしまいます。

Answer

許可されていないURLの記載があります。
とエラーが出ました。

Answer

ECマスターズの田中です。

https:// が二重になっておりますので、削除の上ご記載ください。

Answer

↑こちらを記載しましたがリンク先が崩れています。
よろしくお願いいたします。

Answer

できました。
ありがとうございます。
文字化けが起こっている原因はわかりますでしょうか？

Answer

ECマスターズの田中です。

読み込み元のページとbeads-ichiran.html の文字コードが違うのに
beads-ichiran.html 内で文字コードが指定されていないことが
原因ですので、

beads-ichiran.html の  から  までの間に

を追記していただきますようお願いします。

Answer

いつもお世話になっております
PCのカテゴリページですが、
ECステーションのページクリエイターで作成しています。
ヘッダーの下のトップページ共にずれて表示になってしまっています。
ヘッダー、トップ、レフトナビすべてページクリエイターで作成のものです。
幅はヘッダー1100,トップ800,レフト200です
これを両端揃えて表示させる修正はどのようにしたら良いでしょうか？
トップ、カテゴリページに関してはページに右部分が切れてしまっています。
ご教授お願い致します

Answer

ECマスターズの田中です。

各パーツを、ECステーションのページクリエイターで作成されたということですね。
https://manual.ecsystem.jp/category/search_service/page_creator/
名前に誤りがございましたので、修正させていただきました。

ビーバイさんのショップを確認したところ、
ヘッダーは横幅約1200px、レフトナビは200pxで作成されておりました。
楽天のページには、コンテンツの左右に20pxずつ余白がございますので、
ページの内容の部分を、800pxではなく960pxで作成しなおしていただくことで、
ヘッダーに揃えて表示させることができます。

> トップ、カテゴリページに関してはページに右部分が切れてしまっています。

ページクリエイターで作成したページにて、
bodyタグの余白を削除していただくことで解決します。

HTML直接入力ブロックを挿入し、
下記タグをご記載ください。

 body { margin: 0; padding: 0; }

Answer

ありがとうございます。修正してみます。
PC用販売説明文にもimgタグにて画像をいれているのですが、
そちらも今後960にした方がいいでしょうか？

Answer

ECマスターズの田中です。

> PC用販売説明文にもimgタグにて画像をいれているのですが、
> そちらも今後960にした方がいいでしょうか？

はい、現在のレイアウトですと、
横幅960pxでちょうど当てはまるようになりますので、
そのサイズで画像を作成していただくことをオススメします。

タグの横幅指定を、960という決まった数字ではなく、
100%などの割合で行っていただくことで、
ページ全体のレイアウトを押し広げることなく、
なるべく広い横幅を指定することができるのでオススメです。

Answer

リンク先が崩れている、というのは、
beads-ichiran.html 内の画像をクリックすると、
思わぬ見た目になる、ということですね。

確認したところ、beads-ichiran.html 内のリンクに
target（リンク先を開く対象）が記載されていなかったため、
リンク先のページが、iframeの枠内で開くようになっていたことが
わかりました。

今見ているタブの中で開く場合は「_top」、
新しいウィンドウを開く場合は「_blank」で、
targetの指定をおこなっていただきますようお願いします。

方法がわからない場合は、beads-ichiran.html 内のソースすべてを、







と




で囲んでいただきますようお願いします。
（_blank を _top に変更すると、今見ているページが移動するようになります）

前半のソースに含まれるタグで、リンク先のページの開き方を指定しております。
http://html5.cyberlab.info/elements/metadata/base-target.html

こちらについてですが、
クロームで見と正常に表示されていますが、
IEで見てみるとリンク先のページ崩れが起こっていると他スタッフに言われました。
キャッシュのクリアをしましたが改善しません。





と


で囲んでいます。
GOLD上も確認してみましたが、リンク先は正常に表示されています。

Answer

ECマスターズの田中です。

言葉足らずで失礼いたしました。

「beads-ichiran.html」のソースを確認したところ、


だけが記載されており、
各タグは記載されておりませんでした。

普段「beads-ichiran.html」を編集されているツールで
修正していただいたのかと思いますが、
その際、HTMLの構造に関わるタグのため、自動的に除外されている可能性がございます。






と


で囲む処理をされる際は、
楽天GOLDより「beads-ichiran.html」をダウンロードして、
Mery（https://forest.watch.impress.co.jp/library/software/mery/）などのテキストエディタで
「beads-ichiran.html」を開いて前後にタグを記載し、
楽天GOLDより「beads-ichiran.html」を上書きアップロードする、
という、手動での処理を行っていただきたいのですが、

手順の中で不明な点などございますでしょうか。
また、ビーバイさんにて囲む処理をされた際、どちらのツールをご利用いただいておりますでしょうか。

Answer

ECステーションのページクリエイターでになります。

Answer

ECマスターズの田中です。

> ECステーションのページクリエイターでになります。

その場合、「beads-ichiran.html」を編集される際は、
「beads-ichiran.html」を何かしらのソフトで開いて
ページクリエイターで作成したHTMLを貼り付ける、
という作業を行っていらっしゃると思うのですが、

貼り付けを行った後に、





と


で囲む処理を行っていただけますでしょうか。

「HTMLを開いたり、貼り付けたりなどしていない」
といったように、実際の手順にて私の認識と異なる部分があるなど、
その他不明な点・気になる点がございましたらご返信ください。

Answer

できました。ありがとうございます。
https://www.rakuten.ne.jp/gold/go-shi/index.html?iasid=07rpp_10095___ec-joas2mw3-9y3-db213a43-e502-4b43-aa4f-9ec6d5dbb08c
こちらの店舗さんのTOPような前面ワイドなページはページクリエイターで作成できますでしょうか？

Answer

ECマスターズの田中です。

> こちらの店舗さんのTOPような前面ワイドなページはページクリエイターで作成できますでしょうか？

前面ワイド、というのは、
ページ最上部にある、画面幅いっぱいのスライダーのことでよろしいでしょうか。

ページクリエイターでは作成できず、
楽天GOLDにトップページをご用意いただき、

slick.js
http://kenwheeler.github.io/slick/

のようなjQueryプラグインを導入して、
ページ内にスライダーを実装していただく必要がございます。

Answer

いつもお世話になっております。
文字化けが解消されませんm(__)m
ページクリエイターにて作成したページをテキストエディタのMeryで編集しています。
記述な内容は報告から送信させていただきます。

Answer

ECマスターズの田中です。

失礼いたしました。
私よりご案内差し上げた、囲むためのタグの中に、
文字化けを防ぐためのタグが含まれておりませんでした。

お手数をおかけしますが、
改めてbeads-ichiran.htmlをMeryにて開いていただき、

の直前に（つまり３行目として）、

を追記していただきますようお願いします。

Answer

改めてbeads-ichiran.htmlをMeryにて開いていただき、

の直前に（つまり３行目として）、

を追記していただきますようお願いします。

こちら追記いたしましたが、まだ解消されません。
ソースは報告するから送信させていただきます。

Answer

ECマスターズの田中です。

別途お送りいただいたソースは、
RMSの「ヘッダーコンテンツ」の内容のようです。
改めて、楽天GOLD内にある
「beads-ichiran.html」ファイルの内容を
Meryにて編集していただきますようお願いします。

Answer

すみません。間違えておりました。
「beads-ichiran.html」ファイルの内容、報告するから送信させていただきました。
よろしくお願いします。

Answer

ECマスターズの田中です。

現在のbeads-ichiran.htmlのソースを確認したところ、
文字コードが「シフトJIS」ではなく「UTF-8」になっておりましたので、
また別のタグを追加していただく必要がございます。

FFFTPを使って、楽天GOLDから「beads-ichiran.html」をダウンロードしていただき、
ダウンロードしていただいた「beads-ichiran.html」をMeryにドラッグ＆ドロップして、
現在の内容の先頭に







を、末尾に




を、それぞれ追記して上書き保存し、
FFFTPを使って、楽天GOLDに編集した「beads-ichiran.html」をアップロードしていただきますよう
お願いします。

楽天GOLDに設置するHTMLファイルには、
最初に、HTML形式で記載されたファイルであることを示すために
一番外側がとで囲まれている必要があり、
その中に、ページに関する、内容として表示されない情報（題名や文字コードなど）を格納する
 と、
実際にページの内容として表示する内容を格納する
 各タグを入れる必要があります。
文字コードの指定は、特にタグの先頭にご記載いただく必要がございます。

つまり、最初に


を書いた後、その間にheadとbodyを




このように配置していただき、
さらにheadの間に文字コードの指定を入れるので




となり、最後に、bodyの間にページの内容を挿入するので、

先に申し上げたとおり







と




でページの内容を挟んでいただくことで、
HTMLページとして必要な構造を整えることができます。