【-】 スポンサーサイト

一定期間更新がないため広告を表示しています

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

HTML・CSS Amazonの商品を横並びに表示する

ご質問いただいたので、せっかくだからエントリでお答え。
質問はタイトルの通り、「Amazonの商品を横並びに表示したい」というもの。
やり方はいたって簡単。
<div class="recom">
<!-- BEGIN amazon -->
<a href="{amazon_url}" title="{amazon_ProductName} : {amazon_Creator} : {amazon_comment}" target="_blank"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName} " border="0" class="amazon" /></a>
<!-- END amazon -->
</div>
この記述だけでOK。
CSSの方も、
.recom{
text-align: right;
margin: 0px;
padding: 0px;
}
.recom img.amazon{
margin: 1px;
padding: 0px;
}
これだけで全然OK。
サンプルは当方のブログの上にあるAmazon商品群で。笑
画像にマウスオーバーさせると商品名やコメントがポップアップヒントで表示されます。
もちろん、この形の良い所・悪い所もあります。

○良い所
・記述が短くてラク
・画像だけ表示されるので見た目が良い

×悪い所
・説明のテキストがマウスオーバーしないと見えない
・テキストが長いと読み辛い
・画像をオフにすると何も表示されない

見た目も悪くないし、使い勝手はいいんだけど、テキスト部分をどうにも出来ないのが難点でしょうか。画像オフの人って、少ないでしょうし。
使いたい方はコピペでどうぞ。

■ソースの解説■
ブロック要素の中で、インライン要素である<a>タグと<img>タグを使っているだけなので、ブロック要素の<div class="recom">のCSS指定でだいぶ変わります。
例えば、↑の指定だと右揃えで画像を表示しますが、「text-align: left;」なら左揃え、「text-align: center;」なら中央揃えになります。
CSSの「.recom」のところに「width:200px;」と指定を入れれば、200pxの中で並んでいきます。200px以上になれば、自動的に改行されますしね(当方のブログの■公開中のテンプレート■部分みたいな感じです)

■ブロック要素とインライン要素■
(X)HTMLのタグにも特徴があって、大分するとブロック要素とインライン要素に分かれます。
ブロック要素とインライン要素ってのは、簡単に言えば、
・ブロック要素=改行する(例:div、p、table等)
・インライン要素=改行しない(例:img、span、a、strong等)
といった感じ。
しっかり説明するとなると難しいので、割愛。笑
難しすぎて上手く説明が出来ないだけ…orz

■titleとalt■
「imgにaltがあれば、titleは要らないんじゃない?」とか思っている方は要注意。
「altがあればポップアップヒントが出る」わけではないんです。
出すならホントは「title」を使うべき。
IEさんはaltで出してしまう困ったさんなだけです。altだけだとFireFoxとか他のブラウザではポップアップヒントは出ません。

何かのお役立てれば、これ幸い。
↓は上のお話&CSSが分かってる人向けな続き。

■商品の説明文を分かりやすく表示したい■
ポップアップヒントって長文だとホント見づらいですよね。
何か良い方法ないかなーと思ってはいて、とある記事を見つけたのです。
色々と面白いことをされている「RedlLine Magazine」さんのcssでポップアップネタでうまく出来ないかなーと。
MacIEだと画像からのポップアップ位置が妙な場所に出ていたので、hackでもかけて対処しようかなとは思ってますが。
あとsafariだとテキストはうまくいくけど画像はおかしい感じでした。(会社で見たらそんな感じに。バージョン確認してないから一概には言えないのですが。教えてあげるべきなのか…)
…ちょっと頑張ってみます。
良い方法ご存知な方いたら、教えてください。

2007.03.28 / 18:58 | CM : 9 | TB : 0

△PAGE UP

【-】 スポンサーサイト

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

<< 歌舞伎を見てきましたMAIN春は忙しいねぇ >>

Comment

なるほどー。
面白く読ませて頂きました。
ポップアップはそういえば
cssで位置を可視範囲外に飛ばしたものを
hoverで位置をずらして呼び寄せるというタイプのものを
どっかで見たような記憶があります。

私は面倒くさがりなんでtitleでいいやorz って思っちゃいますが!

ところで最近sound horizonを聞いて「残念だったね!」とかつい言ってしまう様になりました。
わはー。
from: 深玖 | 2007/03/28 10:06 PM

こんばんわ。はじめまして。

>safariだとテキストはうまくいくけど画像はおかしい感じ

あぁ・・・すいません。macが手元になくて検証未でした(汗)配置の位置をbottom基準にしてもダメでした?ちょっと実は今真剣にmacを買おうと検討中なんで、購入して解決方法が見つかったらエントリに追記でもしておきます(w

あとリンク、ありがとうございますー。
from: Red | 2007/03/29 12:09 AM

>深玖さん
ポップアップはその方法もありますね。
色々試してみようかしら。
一番確実なポップアップはtitleですよね。笑

ふふふ。
深玖さんもすっかりサンホラーですねw
次は是非Romanの方を聞いてください♪ローマン♪ローラン♪


>Redさん
あわわ、はじめまして。
こんなところでこっそり言わずに、メールかコメントでご連絡すべきですよね;スイマセン;

現在の状態なんですが、うまく説明が出来ないので、キャプチャ作ってみました。
http://le-arche.img.jugem.jp/20070329_96242.gif

位置はあってるけど、何故かテキストが出てこない。文字が見切れているようです。
MacIEの方は蛇足な感じなのでスルーしてください。苦笑
私の知識ではよく分からなかったので、勉強も兼ねて色々試してみようとは思っていますが。
エントリー楽しみしていますw

>あとリンク、ありがとうございますー。
こちらこそ、毎回勉強になります。楽しみにしていますw from: 冥 | 2007/03/29 10:48 AM

エントリのアップありがとうございます!
実は今使ってらっしゃるテンプレのDLして研究させていただいたときにも同じ該当箇所を自分のテンプレに載せてやってみたのですが、上位1件の商品しか表示されず…。今回アップしていただいたソースでもう一度やってみたのですが、同様でした。

問題のテンプレがこういう仕様で(http://nurekobuta.jugem.jp/?tid=46 上部のメニューの並びにアマゾンを表示させようとしています)、もともと私が記述していたソースとの折り合いが上手くいっていないのかと思います。もう一度よく点検してみます。

いろいろとお手数をおかけしてすみませんでした。><

from: nurekobuta | 2007/03/29 12:59 PM

>nurekobutaさん
書き込みを見てから、何かあたってるんだろうか?と思い、教えていただいたテンプレをDLしてタグを追加してみたらうまくいきましたよ??

・折り畳み内に商品格納→http://le-arche.jugem.jp/?tid=16
・折り畳み外に商品配置→http://le-arche.jugem.jp/?tid=17

もしかしたら、商品リスト(サイド)に登録してる商品が1件しかない or 1件しか「表示」になってないのかもしれません。
その辺りも確認してみてください。 from: 冥 | 2007/03/29 3:36 PM

再びお邪魔しますー。
わざわざキャプチャありがとうございますー!見た感じ、macIEの方はなんとかなりそうな予感なんですが、Safariは・・・何だコレ(w
spanの幅と高さを認識してないのかな。spanの指定にdisplay:block;とか入れたらどうなるだろう・・・。mac買ったら解明してみますね。

実はこのネタ、仕事で実用で使った事あるんですよ。その時はSafariでもうまくいってたんで(その時はspan内テキストは画面外へ押しやって画像だけをポップアップさせたんですが)きっと何か方法があるはずっす(w

もしspan部分の位置指定topから指定してたらbottomからの指定位置に変更してみてください。エントリ内のソースはtopからの指定になってるんですが、bottomからの指定の方が1つのソースで対応できるブラウザが増えるという事実に後から気づくという事態が発生してました(汗)

>メールかコメントでご連絡すべきですよね
いえ、全然OKですよー。ありがとうございました。こちらこそ助かりました。
from: Red | 2007/03/29 4:57 PM

>Redさん
会社のMacで色々試してみました(我が家のMacはOS9なので…)

・safariとIE6で、指定位置をbottomからにしたら、背景画像があると何も出てこない
・spanにdisplay:blockをつけると、aタグ内のものがテキストで出てくる。
・MacIEは位置に問題あるけどちゃんと出る。

私のbottomの使い方がおかしいか、IE6だと上手くいきませんでした。
position周りはMacIEで上手くいかないことが多かったので、全然勉強してないからかな…

>spanの幅と高さを認識してないのかな
う〜ん、どうなんでしょう。
背景画像を使っていないと上手くいくようですし。

色々と試しながら、Redさんの記事を楽しみに待つことにします。w from: 冥 | 2007/03/30 1:09 PM

うわー。いろいろ教えていただいてありがとうございます。

実は、念願のmacをついに発注しました(w
近々届くと思われますので落ち着いたら自分でもやってみますねー。ワクワクです。初自分のmac(w from: Red | 2007/03/30 2:50 PM

>Redさん
おぉ。ついにMacを手に入れるのですねw
最初は少し躊躇うかもしれませんが(仕組みが結構違いますし)慣れるとwinもmacも大差はないので。
Redさんの記事楽しみにしてますw from: 冥 | 2007/04/02 10:23 AM

Trackback

トラックバックURL :