本当に初歩的な質問で申し訳ありません。
楽天GOLDでトップページとカテゴリ等はホームページビルダー14を使い作成し、アップロードもきちんとできました!
ここからが2日間行き詰まっています((+_+))
商品ページはRMSシステムを使用して作成する・・・これは頭では分かります。
が・・・商品ページだけRMSで作成してGOLDで作成したトップページへリンクさせるにはどうしたらいいのでしょう??
ヘッダー、フッダーは結局システムを利用しないといけないのですか??商品ページのみの作成はできませんか?
GOLD作成のトップページにインラインフレームを作成してその部分にRMSで作成した商品ページを表示させるなどは可能ですか??
可能であればどういう設定が必要ですか??

もっとお聞きしたいのですが・・・取り急ぎ、まず第一歩からです((+_+))

このQ&Aに関連する最新のQ&A

A 回答 (3件)

いろいろアドバイスすべきことはありますが、一番簡単な点を。



まずGOLDを使うのをやめて、すべてRMSで作ってください。
トップもカテゴリもRMSで作った方が、すんなり入れます。
ホームページビルダーはあくまでも説明文にHTMLを張るためのツールとして使ってください。

GOLDは楽天のシステムが分かった人間が使うもので、RMSとは全く別物ですから。
それぞれドメインが違いますし。(あと文字コードも異なるので、いろいろ面倒です)

RMSは敷居は高いかもしれないですが、ヘッダー・フッター・レフトナビはまとめて更新できるなど使い勝手の良いシステムです。
RMSで作られるページURLも単純なので、まずそこを理解したら作業が早いでしょう。


あとインラインフレームで呼び出すのはすごく簡単です、GOLDのページとURMSのページのURLが分かっていればいいだけですから。
が、商品ページをIframeで読みだすのは、最近のセキュリティが厳しいPCでは買い物かごがうまく動かない恐れもあるのでお勧めできません。
    • good
    • 0

こんにちは、補足読みました。



個人的にはYahooショップでの経験しかないのですが、おそらくRMSのみだとCSSやJavascriptが使えない等の制限があるため、トップページなどの部分をGOLDで制作されるのだと思います。

そのような作り方をされている方は結構多いようですし、お金を払ってRMSを使用している以上、やはり楽天RMSのサポートセンターで大体の事は教えていただけると思います。あと、”RMSの楽天GOLDはこちら”にマニュアルがあるようですが。
正直、私はYahooなどで、扱いづらいシステムを使ってのショッピングサイトはもううんざりですね。
    • good
    • 0

こんにちは


要するに、楽天市場でショップを開設しているが、RMSシステムの使い方が分からない。というう事だと思います。ので、一番手っ取り早いのはサポートセンターがあるはずなので、そこにメール、又は電話をして聞くのが一番早いと思います。

この回答への補足

ご回答ありがとうございます!
そうなんです!!そうなんですけどね…
goldは楽天さんの手を離れるという感覚でサポート外になります((+_+))

パソコンは20年近く使っていますのでそこそこ使えるんですが…。
使いにくいシステムで驚きです…。
その前におちゃのこネットさんで出店していたのですがタグ知識がなくても本当に簡単に商品もどんどん出品できましたので…。
慣れないとダメですね((+_+))
まだまだ格闘中です。

補足日時:2011/04/23 18:27
    • good
    • 2

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q楽天市場専門のホームページ作成ソフトはありますか?

楽天市場を見るとたくさんのネットショップがありますが、各店舗はどういうソフトを使用してホームページを作っているのでしょうか?楽天に加入すると開店支援用に作成ソフトが付いてくるのでしょうか?
(仮に付いてくると仮定して)それはホームページビルダーのように直感的に使えるものでしょうか?それともHTMLを勉強しなければいけないドリームウィーバーのような難しいものなのでしょうか?ホームページの知識がありませんので教えて下さい。

Aベストアンサー

直接的な回答が一つもないので・・・

楽天の場合、RMSという専用のシステムで編集します。
イメージとしてはブログのような、商品名や価格などを入れていくとページができあがる仕組みです。
このシステム自体は直感的に使えるかというと、かなり癖があるので覚えるまで多少時間がかかると思います。
どこを編集したらどこが変わるか、というのがわかりにくいので。

あとHTMLは、勉強しなくてもページは作れますがそれなりの見栄えにするならHTMLを理解していることが必要です。
といっても、せいぜいa img table fontなどを覚えていれば十分です。


デザインが複雑なページの場合はホームページビルダー・ドリームウィーバーなどでHTMLを作って、それをRMSにコピペしている店舗も多いですね。

Q楽天ショップのデザイン

こんにちは。

現在楽天RMSと楽天GOLDを使用して楽天ショップ作りをしています。
htmlとcssの知識はある程度あります。

質問なのですが、どのようにしたらこのサイトのようにヘッダーを組み込めるのでしょうか。
http://www.rakuten.co.jp/boulee/index.html

ソースを見ると、インラインフレームを使うでもなく、urlにgoldが入っている訳でもないのに、メニューが書き込まれています。

どなたか方法をご存知の方、教えていただけないでしょうか。
よろしくお願いします。

Aベストアンサー

ヘッダーですか?
ヘッダー部分は普通にHTML+CSSですね。
aタグの背景にバックグラウンドイメージが設定されています。

#headbox li.gmenu01 a {
background: url(http://www.rakuten.ne.jp/gold/boulee/img/menu01.png) no-repeat 0% 0%;
width: 90px;
}

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

QFTPでアップロードした画像のURLがわかりません。

例えば、「dai.gif」という画像を「gazou」というファイルに
アップロードしたとしたら、この画像URLはどうなるのでしょうか?
「自分のHPのURL(http://~)/gazou/dai.gif」
となるのでしょうか?
私はこのようになると思ってこのURLでHTMLに入れたのだけれど、
ブラウザ表示でもHP上でも表示されないんです。
なので、次にこのようなことをしました。
FTPでアップロードされた画像をダブルクリックで表示させて、
そこを右クリックのプロパティーでURLのところをコピペしました。
そのURLは
「file:///C:/WINDOWS/TEMP/dai.gif」
このような形式でした。そしてこれをHTMLに入れて、
ブラウザ表示すると、きちんと表示されたのですが、
そのページをアップロードさせてHP上で見ると表示されていないんです。
ちなみに、FTPでアップロードされた画像のアイコンを右クリックして
「URLをクリップボードへコピー」にして、また同じようにやりましたが
またブラウザ表示でも、HP上でも表示されませんでした。
これが関係あるかわからないのですがFTPの「ホストの設定」で
「ローカルの初期フォルダ」と「ホストの初期フォルダ」は
なにも設定しませんでした。
またHTML Writer Version2.2を使ってHTMLを
書いています。
長くなりましてすみません。
初心者なので、FTPについての解説のあるHPを教えてくれたら
嬉しいです。

例えば、「dai.gif」という画像を「gazou」というファイルに
アップロードしたとしたら、この画像URLはどうなるのでしょうか?
「自分のHPのURL(http://~)/gazou/dai.gif」
となるのでしょうか?
私はこのようになると思ってこのURLでHTMLに入れたのだけれど、
ブラウザ表示でもHP上でも表示されないんです。
なので、次にこのようなことをしました。
FTPでアップロードされた画像をダブルクリックで表示させて、
そこを右クリックのプロパティーでURLのところをコピペしました...続きを読む

Aベストアンサー

>例えば、「dai.gif」という画像を「gazou」というファイルに
>アップロードしたとしたら、この画像URLはどうなるのでしょうか?
>「自分のHPのURL(http://~)/gazou/dai.gif」
>となるのでしょうか?

これについては、その通りです。
例えば、左上にある「goo」のロゴのURLは
「http://oshiete1.goo.ne.jp/images/goo.gif」となります。
これはhttp://oshiete1.goo.ne.jp/というサーバー上のimagesというフォルダに、
goo.gifがアップされているわけです。

次に、
>FTPでアップロードされた画像をダブルクリックで表示させて、
>そこを右クリックのプロパティーでURLのところをコピペしました。
>そのURLは「file:///C:/WINDOWS/TEMP/dai.gif」

となっていますが、これではあなたのパソコン上でブラウザ表示されても、ネット上では表示されません。
というのも、「file:///C:/WINDOWS/TEMP/dai.gif」の中の、「file:///C:/WINDOWS/TEMP/」とは、あなたのパソコンのローカルディスク(C:)またはCドライブの中にあるWINDOWSフォルダのそのまた中、TEMPファイルを指しているからです。
ローカルディスク(C:)またはCドライブがサーバー上に存在しているわけではないので、指定してもネット上で見ることは不可能なのです。

さて、こうなると「自分のHPのURL(http://~)/gazou/dai.gif」で合っているはずなのですが、それで表示されないとなると、FTPソフトの設定・接続先等に誤りがあるか、 タグ自体に誤りがあるなどの原因が考えられます。
一度、「自分のHPのURL(http://~)/gazou/dai.gif」だけをブラウザのアドレスバーに記入し、ちゃんとアップされているか確かめた上で、ソフト設定やタグを見直してみるとよいかと思われます。

ちなみに、下記のURLにFTPソフトに関した項目がありますので、ご参考までに。

参考URL:http://tohoho.wakusei.ne.jp/wwwbeg7.htm#Upload

>例えば、「dai.gif」という画像を「gazou」というファイルに
>アップロードしたとしたら、この画像URLはどうなるのでしょうか?
>「自分のHPのURL(http://~)/gazou/dai.gif」
>となるのでしょうか?

これについては、その通りです。
例えば、左上にある「goo」のロゴのURLは
「http://oshiete1.goo.ne.jp/images/goo.gif」となります。
これはhttp://oshiete1.goo.ne.jp/というサーバー上のimagesというフォルダに、
goo.gifがアップされているわけです。

次に、
>FTPでアッ...続きを読む

Q楽天GOLDの転送について

教えて下さい。知識がない為、困ってます。
楽天ショップをやってます。

そろそろ、楽天GOLDを使ってみたいと、楽天GOLDに申し込みました。
ホームページビルダー14で作成したページを、
楽天GOLDにページ転送で転送してみると、転送成功と出るのですが、
そのページは、GOLDのアドレスで検索してみても、開きません。
といいますか、ページが無い状態です。

ホームページビルダーののFTPツールで見てみますと、
楽天のFTPサーバーには、etcというフォルダー名があるのですが、
このフォルダの中には、データは転送できなかったので、
自分で、indexというフォルダを作り、ページ転送で転送してみました。
何が、問題なのか、全然わからない状態です。
ただ、ホームページビルダーで、ページ転送するだけでは、ダメなのでしょうか?

だれか、助けて下さい。お願いたします。
もしかしたら、根本から間違えているのでしょうか?

困ってます。。。

Aベストアンサー

> 楽天のFTPサーバーには、etcというフォルダー名があるのですが、
> このフォルダの中には、データは転送できなかったので、
> 自分で、indexというフォルダを作り、ページ転送で転送してみました。

別にフォルダを作成してその中にindex.htmlを転送すると階層が違うので
表示されないです。

http://www.rakuten.ne.jp/gold/index/shopname/ にすると表示されるはずです。

GOLDのFTPサーバーに接続するとetcフォルダが見えますよね。

そこにindex.htmlはそのまま転送し、画像ファイルをフォルダにまとめていれば
そのフォルダを転送すれば通常のGOLDのURLで表示されます。

GOLDトップのファイル名は必ずindex.htmlにしておかないと表示されませんのでご注意を。

Q楽天のレビューを訂正しろとショップからメールきた

長文失礼します。
楽天のショップでスラックスを購入したところ、送料トラブルがあり、それをショップのレビューに書きました。すると、翌日ショップから私の個人メールにメールが送られてきて、レビューを書き直せとの内容でした。

以下、私の書き込んだレビューです。
>>>>
サイズ交換したのですが、送料2重取りされるとこでした。今回の買い物の送料は420円だったのですが、請求書には840円と記載。交換するから2回分の送料なのだと思っていましたが・・・・。翌日、交換商品が着払い740円で到着。
送料がおかしいので、すぐに電話したところ男性が出て、まず最初に、【サイズ交換の際の送料は、同じく420円ですか?】と聞いたところ、『そうです。』と。その後、送料がおかしい・なぜ着払いできたのかと聞いてみたところ、『契約がうんたらかんたらで・・・420円じゃダメらしい』とのこと。【最初に同じく420円と言いましたよね?】『それは間違いでした。』
そんな曖昧にお金のことを話していいのでしょうか。

どっちにしろ、送料が多く取られているのでおかしいと伝えると、『クレジット決済は2ヵ月後ですよ』とワケの分からない返事。
この間、送料取りすぎと何度も伝えているのに、謝罪の言葉が一切無し。責任者に代わって欲しいと言うと、『私が責任者です。』本当に呆れました。

彼氏のスラックスを購入していたので、代わって話をしてくれて、彼氏の「そちらのミスなのに、なぜ謝罪の言葉が無いのか」との言葉で初めて謝罪。ストレスが溜まる買い物になりました。
みなさんも請求書などは確認した方がいいですよ。気付かなければ、そのまま送料2重取りされるところでした。
商品がいくら良くても、トラブルの対応がひどすぎます。



するとショップからのメールが・・・・
>>>>
○○様 こんにちは。 今日下記の内容のレビューの書き込みを拝見しました。
事実であればそのように書かれても構わないですが。「送料2重取りされるとこでした」と有りましたが。実際訂正後の送料は100円となっているのではないでしょうか。

「謝罪の言葉が一切無し」とも有りますが、事情を確認後に、電話で経過を説明しながら担当は何回も「申し訳ない」と謝罪したのにそれが聞こえないのでしょうか。

今回のトラブルは此方の経理の方が好意的に元払いでお客様が負担が軽くなると思って(420円*2回、1回目と2回目返送)で送料確定した事に対し、発送の担当はそれを知らずに従来の方法(お客さんの都合で返品は着払いで)で送った事にあります。

当店内の伝達のミスが有った事が事実で、それが指摘されすぐに訂正しました。当店は良心的に対応しているので、お客様の良識のある公正な書き込みを求めたいと考えています。



ここで質問です。
(1)レビューは購入者を伏せて投稿したのですが、ショップは誰が購入したのか分かるのでしょうか?
レビューの内容を細かく書いたので、ショップが憶測で私が書いたと断定し、メールを送ってきたのでしょうか?

(2)この場合、みなさんでしたらレビューを書き直しますか?

(3)『謝罪したのにそれが聞こえないのでしょうか』
このような言い方は間違っていると思うのですが・・・・・・。これは普通ですか?

(4)個人メールにこのようなことが送られてきたのが、怖くてショックです。
 もう関わりたくないのですが、どのようにショップに返信すれば良いでしょうか。


長文なのに、読んで頂き有難うございました。

長文失礼します。
楽天のショップでスラックスを購入したところ、送料トラブルがあり、それをショップのレビューに書きました。すると、翌日ショップから私の個人メールにメールが送られてきて、レビューを書き直せとの内容でした。

以下、私の書き込んだレビューです。
>>>>
サイズ交換したのですが、送料2重取りされるとこでした。今回の買い物の送料は420円だったのですが、請求書には840円と記載。交換するから2回分の送料なのだと思っていましたが・・・・。翌日、交換商品が着払い740円で到着。
送料...続きを読む

Aベストアンサー

楽天にショップをだしています。


(1)レビューは購入者を伏せて投稿したのですが、ショップは誰が購入したのか分かるのでしょうか?
レビューの内容を細かく書いたので、ショップが憶測で私が書いたと断定し、メールを送ってきたのでしょうか?


一切わかりません。レビューがついたのも通知されないので、自分でチェックしに行きます。
ただ、今回はレアなケースだったので、ショップ側もお客様が特定できたんだと思います。




(2)この場合、みなさんでしたらレビューを書き直しますか?

絶対書き直さないどころか、メール晒します(笑)
そんな対応は、当店ではありえません。



(3)『謝罪したのにそれが聞こえないのでしょうか』


当店ではありえません。ひたすら低姿勢にあやまります。
事実は事実で謝罪していたとしても、「言葉が足らずにご不快な思いをさせ
申し訳ございません。」と、謝罪を入れればお客様も引いて下さるかもしれないのに、
大人になれない店舗さんだと思います。




(4)個人メールにこのようなことが送られてきたのが、怖くてショックです。
 もう関わりたくないのですが、どのようにショップに返信すれば良いでしょうか。


私はメールを晒した後は無視します。
もしくは皆様のおっしゃるとおり「楽天に通報」ですかね。

ただ、楽天は「お客様とのトラブルは店舗とお客様で直接やりとりしてください」というスタンスなので、
基本解決はしないと思います。



ちなみに私なら、ショップレビューだけなく、購入した商品の方にも同内容のレビューをつけると思います。




店舗側の非は「送料2重どり」であって、訂正したでしょ?ではないんです。
いくら親切のつもりで「元払い」といっても、ちゃんと社内伝達できずに「着払い」での発送したことです。


親切心があだとなった店舗さんもかわいそうだと思いますが、自社がしっかり伝達せずにおきた
トラブルを、レビューにかかれたからって訂正を求めるのはおかしいですね。


ちなみに他の回答者様にもありましたが「レビューを書いたら送料無料」は、「レビューを書いたら●円」は、規約違反です。なので店舗側はよっぽど管理しない限り書いてもらったかどうかって判らないんですよね。(同じ商品が沢山売れてると、なおさらどのお客様かなんてわからない)


お届け後にレビューを書いたら次回送料無料クーポンなどはOKなんですけどね。
楽天さんじたいが、取締りがゆるい。

楽天にショップをだしています。


(1)レビューは購入者を伏せて投稿したのですが、ショップは誰が購入したのか分かるのでしょうか?
レビューの内容を細かく書いたので、ショップが憶測で私が書いたと断定し、メールを送ってきたのでしょうか?


一切わかりません。レビューがついたのも通知されないので、自分でチェックしに行きます。
ただ、今回はレアなケースだったので、ショップ側もお客様が特定できたんだと思います。




(2)この場合、みなさんでしたらレビューを書き直しますか?

絶対書き直さないど...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QiframeはSEO的に不利になる?

iframeはSEO的に不利になる!という記事をよく見かけるのですが、これは具体的にどういうことでしょうか?

よく見かけるというのは「iframeを使うことによって表示されたコンテンツはクローラーから見られた時に"意味のないコンテンツ"だと評価されるので、できるだけ使わないようにするべき」というものですが、iframeで表示したいコンテンツが特に意味のない"ただデザイン上使いたい"という理由であれば使用しても問題ないでしょうか?

例えばiframeを使う事によってページが重くなってしまい評価が下がってしまうだとか、iframeを使うこと自体がNGだとか、そういう理由から"iframeはSEO的に不利になる!"と言っているのか分かりません。

面倒な質問ですが宜しくお願いします

Aベストアンサー

SEO観点で不利だ有利だ、という話題は聞く耳をもたないほうがよろしいです。

SEOということば自体が、人を押しのけて自分が前に出ようという感覚です。
だから、自分と他とおんなじドングリだと思う発想から生まれています。

もし唯一無二のことを提供していたりするのであればそれしかないのですからSEOもなにもありません。

iframeですが、
これでなければいけないというのは、動画のようなものを扱いながらスマホでもPCでも大丈夫なレスポンシブなページにしたい場合です。
これでなければいけないなら使うしかないでしょう。情報が発信できなければ何も始まらない。

SEOなんて議論にもなりません。

一方、iframeを層状にして積むなんていう、意味不明なテクニックを行使しようとしたらgoogleは嫌います。
多数のブラウザに対応可能な保証はないからです。
一般にframe系を嫌うのは、多層化して事故確率が増えるからです。

それと、SEOなんて考えるのは入口ページだけでいいでしょう。
iframeで構成しているページにはリンクで飛ばせばいいのではないですか。

ひとより目立つためにどういう服を着たらいいかなんか考えずに、優れた独自のページを作ることに頭を使うのがまっとうではないでしょうか。
Googleもそう推奨していますよ。
小手先の変なページを切り捨てるためのペンギンやパンダの子孫はこれからもどんどん進化します。
ペンギンがどう動くか対策なんか考えている暇があるなら、皆が寄ってくる情報を展開するのがいいのではないですか。

SEO観点で不利だ有利だ、という話題は聞く耳をもたないほうがよろしいです。

SEOということば自体が、人を押しのけて自分が前に出ようという感覚です。
だから、自分と他とおんなじドングリだと思う発想から生まれています。

もし唯一無二のことを提供していたりするのであればそれしかないのですからSEOもなにもありません。

iframeですが、
これでなければいけないというのは、動画のようなものを扱いながらスマホでもPCでも大丈夫なレスポンシブなページにしたい場合です。
これでなければいけないなら使う...続きを読む

Q画像を縦に4つ並べたい場合

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

Aベストアンサー

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="...続きを読む

QHTMLページ上でiframeを最前面に出したい。

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯誤するものの解決の糸口が見当たりません(汗

z-indexをiframeタグに加えてみたもの効かず、overflow:visible;でも効かず、ダメもとでsrc=""のファイル名直後に?wmode=transparentを書き加えてももちろんダメでした(汗

Youtubeの時に?wmode=transparentが有効だったのでもしかして!?と思ったのですが。。。

ヤフーショッピングにてサイドナビ内に設置したいカテゴリが商品量に相応し縦長になり、更にはサイドカテゴリ部より直接商品ページへ飛ばしたいと考えており益々長くなってしまいバランスが悪いのでアコーディオン形のものが埋められればと試行錯誤しております。

他に表示的なアドバイスを含め、何か策があればご教授をお願いします m( . . )m

Javaを使用せずにHTMLページ上に埋め込んだiframeを最前面に出す方法はないでしょうか?

ヤフーショップページの左側にあるサイドナビ内のフリースペース枠にiframeでカテゴリーを埋め込んでいます。

その際にiframe枠内ではアコーディオン系のマウスオーバーにてサブメニューが右側に表示されるような感じの事を行っていますが、トリプルサービスでのトップページでは表示になんら問題はないものの、ヤフーショッピングサイトではHTMLタグの制限で外部CSS及びJavaが使用できず何とかならないものかと色々試行錯...続きを読む

Aベストアンサー

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアドバイス、余計なお世話かもしれませんが加えます。
『縦長になってバランスが悪いので』といった理由で JavaScript を用いたアコーディオン型メニューを加えているなら、それはきっとやめたほうがよいでしょう。
JavaScript がオフの環境は考慮されているかという問題以前に、バランスの悪くなるほど縦長のメニューは折り畳んだところで使い勝手は悪いままの場合がほとんどです。

なぜ縦長のメニューになるのでしょう。
カテゴリを細かく分類しすぎなのか。
それとも最下層のカテゴリまで一度に表示しようとしているのですか。
考慮の浅い分類は、表示の工夫以前にそもそも使いづらい運命です。

ぱっと見で収まるくらいの分類数に収めるよう考え直してみてはどうでしょう。
分類しづらい、あまりにかけ離れた商品種を扱っているなら、それは別のショップとしてサイトを作るべきです。
細かな分類は、大きな分類を選んだあとに表示するべきです。
数十の分類から一つを探し出すより、数個の分類を複数回渡り歩くほうがユーザーにストレスはかからないそうです(一回のクリックまでが短ければ、複数回クリックは苦にならない)。
細かな分類まで最初に見せたい理由が、その中に人気の商品があるなどであるなら、それは別枠の分類『人気の商品』『新商品』などとしてリンクを設けるべきで、わらの中から針を探すという苦行をユーザーにさせるべきではありません。

あとただの偏見ですが、マウスオーバーで出てくるサブメニューは使い勝手の悪い印象があるので、よほど洗練された使い方でない限りそれがあるだけでサイトの評価減です。

提供側の『このように見せたい』ではなく、利用側の『このように見たい』が優先される世界を願って。
(Amazon などは『このように見たい』の中にさりげなく彼らの売りたいものを混ぜてくるので、さすがだと思っています)

参考URL:http://webdesignrecipes.com/css-visual-formating-model/

要素のスタイルに z-index だけでなく、position: relative も加えてください。

要素に z-index を適用する場合、その要素の position が static 以外の値でないといけません:
つまり relative, absolute, fixed のどれかです。
position: relative を指定し top, right, bottom, left の値を指定しなければ(デフォルト値の auto にしておけば)、要素の位置はそのままに z-index で重なり順を制御できるはずです。
この手法で表示崩れを生じる場合は他のスタイルとの干渉が考えられます。


表示に関するアド...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報