PROFILE
Template
【HTML・CSS】 Amazonの商品を横並びに表示する
ご質問いただいたので、せっかくだからエントリでお答え。
質問はタイトルの通り、「Amazonの商品を横並びに表示したい」というもの。
やり方はいたって簡単。
CSSの方も、
サンプルは当方のブログの上にある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が分かってる人向けな続き。
質問はタイトルの通り、「Amazonの商品を横並びに表示したい」というもの。
やり方はいたって簡単。
<div class="recom">この記述だけでOK。
<!-- 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>
CSSの方も、
.recom{これだけで全然OK。
text-align: right;
margin: 0px;
padding: 0px;
}
.recom img.amazon{
margin: 1px;
padding: 0px;
}
サンプルは当方のブログの上にある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が分かってる人向けな続き。
【日常の吐息】 歌舞伎を見てきました
あ、水曜の話なんですけどね。
銀座の方にある歌舞伎座で「義経千本桜」の夜の部を通しで。
すごく興味はあったけど、見に行く機会がなかなかなくて。
敷き居も高そうだし、一人ではいけないし;
今回はお誘いがありまして、行ってきました。
いやー、楽しかったです。
狂言なので、笑える所も満載。
全員男のはずなのに、女形はしなやかで美しいし。
すさまじい刺激でした。
和柄な何かを作れそうです。
機会があればまた行きたいナ。
話変わって。
私、mixiもやってるんですが、mixiのコミュに「JUGEM UTF」なんてコミュがありました。
使ってる人、作ってる人、見てる人はwelcome!みたいな。
しっかり入っておきました。笑
ちなみに、管理人がnurekobutaさんで。
すっごくびっくり。笑
こっそり足跡つけてみたりねw
あー、何か作りたいけど、作らなきゃいけないものが溜まっていて、う〜ん。
銀座の方にある歌舞伎座で「義経千本桜」の夜の部を通しで。
すごく興味はあったけど、見に行く機会がなかなかなくて。
敷き居も高そうだし、一人ではいけないし;
今回はお誘いがありまして、行ってきました。
いやー、楽しかったです。
狂言なので、笑える所も満載。
全員男のはずなのに、女形はしなやかで美しいし。
すさまじい刺激でした。
和柄な何かを作れそうです。
機会があればまた行きたいナ。
話変わって。
私、mixiもやってるんですが、mixiのコミュに「JUGEM UTF」なんてコミュがありました。
使ってる人、作ってる人、見てる人はwelcome!みたいな。
しっかり入っておきました。笑
ちなみに、管理人がnurekobutaさんで。
すっごくびっくり。笑
こっそり足跡つけてみたりねw
あー、何か作りたいけど、作らなきゃいけないものが溜まっていて、う〜ん。
【テンプレ】 Les ruines
Le cielを公開した後にすぐアップしようと思ってて、すっかりタイミングを見失ったので、あえてここで公開。笑
Le cielの色違いというか、写真違いなヤツ。
写真は何処だかもう判別不能。
で、がりごり弄くってたら、もう廃虚にしか見えない。人も居たけど、他にもなんか色々あったけど、消しちゃって、めちゃくちゃ寂しい。
国内の教会ではないそうです。
相変わらず、写真好きな友人がいると心強い。
■Les ruines DATA
・全体の幅&記事部分の幅:可変(ウィンドウサイズに合わせて変わります)
・記事部分の高さは400px(カスタマイズでかなり変えられます)
・1カラム(?) 横に3分割
→Le cielのDL Sample
カスタマイズとかはほぼLe cielと同じなので割愛です。
そろそろ、ぐちゃぐちゃした線が描きたいなー(時間が欲しい)
【日常の吐息】 美味しいものを食べてきました。
ここのところ、若干沈み気味で、土曜は一日寝てました。
普段から、多少身体がお疲れでも、精神力でずるずる引きずるタイプなので(さすがに限度はありますが)、凹むと一気に体調崩してしまって難儀です。
金曜は友人の誕生日を祝い、その後朝までカラオケとか。笑
はっちゃけて発散出来たつもりでいましたが、身体は無理だったようです。
何も考えない為に携帯でテトリスやって、疲れたら寝て、の繰り返し。
ものっそい自堕落。。orz
このままじゃいかんなーと思いつつ、日曜もだらだらしてましたが、唐突にしゃぶしゃぶが食べたくなって、大和路というお店に食べに行ってきました。
駅近でリーズナブルで店員さんの対応が◎。
友人達と三人で、お腹いっぱい食べました♪
お陰さまで(?)新しい閃きと小さなやる気が湧いてきました。
前向きで行かないとー。
そう思いつつ、友人にお願いして買ってきてもらった「poca felicita」ばかり聞いてるわけですが…。
大好きなSound Horizonの人が大好きな「GUNSLINGER GIRL」のImage Albumを作りました、というヤツです。
「GUNSLINGER GIRL」はかなり切ない系のガンアクションもの漫画なんですけどね。
切ない系ガンアクションてどんなだよ、って感じですけどもね。はは。
好きな音楽と、新しい閃きと、友人の優しさに感謝できているので、水面は近いです。
普段から、多少身体がお疲れでも、精神力でずるずる引きずるタイプなので(さすがに限度はありますが)、凹むと一気に体調崩してしまって難儀です。
金曜は友人の誕生日を祝い、その後朝までカラオケとか。笑
はっちゃけて発散出来たつもりでいましたが、身体は無理だったようです。
何も考えない為に携帯でテトリスやって、疲れたら寝て、の繰り返し。
ものっそい自堕落。。orz
このままじゃいかんなーと思いつつ、日曜もだらだらしてましたが、唐突にしゃぶしゃぶが食べたくなって、大和路というお店に食べに行ってきました。
駅近でリーズナブルで店員さんの対応が◎。
友人達と三人で、お腹いっぱい食べました♪
お陰さまで(?)新しい閃きと小さなやる気が湧いてきました。
前向きで行かないとー。
そう思いつつ、友人にお願いして買ってきてもらった「poca felicita」ばかり聞いてるわけですが…。
大好きなSound Horizonの人が大好きな「GUNSLINGER GIRL」のImage Albumを作りました、というヤツです。
「GUNSLINGER GIRL」はかなり切ない系のガンアクションもの漫画なんですけどね。
切ない系ガンアクションてどんなだよ、って感じですけどもね。はは。
好きな音楽と、新しい閃きと、友人の優しさに感謝できているので、水面は近いです。
【WEB】 為になりそうなサイトさん
左のサイドバーに配布しているテンプレートリンクを貼っていますが、だんだん増えてきて、右のサイドバーが寂しいなぁと思ってきたので、ちょっと面白いものを貼ってみました。
リンクにも追加してますが、WEBデザイナーのためのリンク集というサイトの新着サイトサムネールを表示させています。
このサイト、面白いサイトをサムネールで見れるんですよ。
なんでこのサイトにたどり着いたか忘れましたが。
悶々としてる時に見てると、純粋に楽しい。海外が多いですけどね。
他にも勝手にリンク貼らせて貰いました。
たまにCSS関連の検索で此処にいらっしゃる方いますが、そこまで言及した記事書いてないので、申し訳なく。
CSSとかデザインでつまづいた時に見ているサイトさんなので、めちゃくちゃ参考になると思います。わかりやすいし。
BLOG×WORLD ENDINGさん、hamashun.comさん、RedLine Magazineさんはそれぞれ現役webデザイナーな方々が書いてるサイト&ブログです。
他はデザイン検索的に見ているサイトさん。
ためになるお話満載なので、ぜひぜひ。
リンクにも追加してますが、WEBデザイナーのためのリンク集というサイトの新着サイトサムネールを表示させています。
このサイト、面白いサイトをサムネールで見れるんですよ。
なんでこのサイトにたどり着いたか忘れましたが。
悶々としてる時に見てると、純粋に楽しい。海外が多いですけどね。
他にも勝手にリンク貼らせて貰いました。
たまにCSS関連の検索で此処にいらっしゃる方いますが、そこまで言及した記事書いてないので、申し訳なく。
CSSとかデザインでつまづいた時に見ているサイトさんなので、めちゃくちゃ参考になると思います。わかりやすいし。
BLOG×WORLD ENDINGさん、hamashun.comさん、RedLine Magazineさんはそれぞれ現役webデザイナーな方々が書いてるサイト&ブログです。
他はデザイン検索的に見ているサイトさん。
ためになるお話満載なので、ぜひぜひ。
【WEB】 独自タグが追加されましたね
「続きを読む」関連のタグ追加ですね。
お知らせブログ:独自タグを2点追加
今までJavaScriptで変えてた所の手間が省ける様子。
まぁ実はJUGEMカスタマイズ講座さんはちょろっとしか読んでないもので。
というか、カテゴリとか選択したらエラーで見れないので…(HTMLしか見れないみたいですね?)
ふふ、これってアレですよね。
どんな一文かでセンス問われますよね。
思いついた「続きを読む」の一文たち
「つづく…」「Read more...」「もっと読む…」「Let's go more!!」「→」「つづいてみる」「And more」「More?」「さらに続く→」
もう無理…orz(早っ
ってか「→」は文じゃない…。
テキストでなくとも、替わりに画像も使えるってことですよね?
ワンポイントも増えるし、付け足し要素もクラスを任意に変える事が可能なわけだ。
可能性が増えますなぁ。
それよりも、カレンダータグの閉じ忘れはなんとかにりませんか。
お知らせブログ:独自タグを2点追加
今までJavaScriptで変えてた所の手間が省ける様子。
まぁ実はJUGEMカスタマイズ講座さんはちょろっとしか読んでないもので。
というか、カテゴリとか選択したらエラーで見れないので…(HTMLしか見れないみたいですね?)
ふふ、これってアレですよね。
どんな一文かでセンス問われますよね。
思いついた「続きを読む」の一文たち
「つづく…」「Read more...」「もっと読む…」「Let's go more!!」「→」「つづいてみる」「And more」「More?」「さらに続く→」
もう無理…orz(早っ
ってか「→」は文じゃない…。
テキストでなくとも、替わりに画像も使えるってことですよね?
ワンポイントも増えるし、付け足し要素もクラスを任意に変える事が可能なわけだ。
可能性が増えますなぁ。
それよりも、カレンダータグの閉じ忘れはなんとかにりませんか。
【WEB】 iddy登録しました
深玖さんのところで紹介されてたiddyに登録してみました。
ちなみにMacIEだと、
・iddyのトップがずれてる
・管理ページのヘルプが正しい位置に出てこない
・プロフィール入力エリアが文字化け
・RSS登録が出来ない
・プロフィールページの画像が見えない
…orz
情報を見る分には、平気かと。
家で見てたとき、ちゃんと見れてるじゃんwと喜んだけど、会社PCで見たら画像が出てきてて、画像あったんだ!って感じでした。苦笑
さて、内容なんですが。
本とか作家の項目が無いのはつまらんに。
タグに関しても、表記ゆれを考慮するとか出来たらいいかな、という感じ。
足跡やカウンター、掲示板とかが無いのはいいですね。
たまに足跡やカウンターの数稼ぎで宣伝しまくったりとか、掲示板荒らして回ったりとかする人いるじゃないですか。
連絡だって取りたかったら、mixiなりblogのコメントなりあるんだし。
なかなかいい面白いプロフィールページだと思いました。
あと、気になった人のプロフページをブクマしておけば、その人の複数のブログの更新状況とかを一覧で一気にチェックできるのもいいなぁ。
画像のリサイズはもちろんだけど、クリエイティブな人たちが多いみたいだから、テンプレの画像も変えられたら楽しいなぁと。
テンプレを見る限り、画像サイズは一定のようだし。画像無しのテンプレも欲しいなぁ。
あ、あとは、MacIE用にCSS変えてくれたら問題ないです…;
まぁ無理かな。笑
しかし、タグ機能は面白い。
タグを巡っていってると、面白い人たちに辿り着きますね。
ブクマが増えましたよ。笑
以上、感想でした。
ちなみにMacIEだと、
・iddyのトップがずれてる
・管理ページのヘルプが正しい位置に出てこない
・プロフィール入力エリアが文字化け
・RSS登録が出来ない
・プロフィールページの画像が見えない
…orz
情報を見る分には、平気かと。
家で見てたとき、ちゃんと見れてるじゃんwと喜んだけど、会社PCで見たら画像が出てきてて、画像あったんだ!って感じでした。苦笑
さて、内容なんですが。
本とか作家の項目が無いのはつまらんに。
タグに関しても、表記ゆれを考慮するとか出来たらいいかな、という感じ。
足跡やカウンター、掲示板とかが無いのはいいですね。
たまに足跡やカウンターの数稼ぎで宣伝しまくったりとか、掲示板荒らして回ったりとかする人いるじゃないですか。
連絡だって取りたかったら、mixiなりblogのコメントなりあるんだし。
なかなかいい面白いプロフィールページだと思いました。
あと、気になった人のプロフページをブクマしておけば、その人の複数のブログの更新状況とかを一覧で一気にチェックできるのもいいなぁ。
画像のリサイズはもちろんだけど、クリエイティブな人たちが多いみたいだから、テンプレの画像も変えられたら楽しいなぁと。
テンプレを見る限り、画像サイズは一定のようだし。画像無しのテンプレも欲しいなぁ。
あ、あとは、MacIE用にCSS変えてくれたら問題ないです…;
まぁ無理かな。笑
しかし、タグ機能は面白い。
タグを巡っていってると、面白い人たちに辿り着きますね。
ブクマが増えましたよ。笑
以上、感想でした。
【おしらせ】 公開中テンプレート修正完了
Cookieが登録できない不具合の修正ですが、UTFにて公開中のテンプレート、全てチェック&修正が完了しました。
不具合がある方は再DL、もしくはこちらの記事にて修正箇所と方法を紹介してますので、修正をお願いします。
使ってくださっている方にはホント申し訳ないです。
チェックしてみたら、全部間違ってました。orz
最初から間違ってて、ずっとそれを使ってたようです。うわー;
ホントすいませんでした;;
不具合がある方は再DL、もしくはこちらの記事にて修正箇所と方法を紹介してますので、修正をお願いします。
使ってくださっている方にはホント申し訳ないです。
チェックしてみたら、全部間違ってました。orz
最初から間違ってて、ずっとそれを使ってたようです。うわー;
ホントすいませんでした;;
【おしらせ】 【重要】Cookieが登録出来ない不具合の修正
重要です。注目です。
当方のテンプレートをご利用の方は、ご注目ください。
クエス様から「コメントのCookie登録が出来ないみたいです」とご連絡を頂きまして(ホント申し訳ないです。。。)調べまくってみました。
JSファイル覗いてみたりもしました。
とりあえず修正方法が分かりましたので、ご連絡します。
原因は、「コメントの送信ボタン」でした。
公開中のテンプレートもこれから修正していきます。
すでにご利用の方で、HTMLの↓を見つけたら、
↓のように
修正してください。
ホントお手数かけます。何処の部分か良く分からない!という方は、公開のテンプレートを随時修正していきますので、修正完了の記事が出たら、もしくはテンプレートの修正日が今日以降になってましたら再DLをお願いします。
一体何処でコピペをミスったのでしょう。。
あ、あと助け合い掲示板に送信ボタンを
<input type="submit" onload="javascript:initval();">とするように書いてましたが、<input type="submit" onclick="javascript:setval();">が正しいです。
過去ログを「cookie」で検索したら出てきて、やってみたら上手くいかなくて悩んじゃった人の為に書いておきます。笑
はい、小1時間ほど悩みました…orz
メモ:
initval()は保存してあるCookie情報を指定の箇所に配置。
setval()はCookie情報を保存または上書き保存する。
当方のテンプレートをご利用の方は、ご注目ください。
クエス様から「コメントのCookie登録が出来ないみたいです」とご連絡を頂きまして(ホント申し訳ないです。。。)調べまくってみました。
JSファイル覗いてみたりもしました。
とりあえず修正方法が分かりましたので、ご連絡します。
原因は、「コメントの送信ボタン」でした。
公開中のテンプレートもこれから修正していきます。
すでにご利用の方で、HTMLの↓を見つけたら、
<input name="submit" type="submit" class="btn" tabindex="5" onclick="javascript etval();" value="Submit" />
↓のように
<input name="submit" type="submit" class="btn" tabindex="5" onclick="javascript:setval();" value="Submit" />
修正してください。
ホントお手数かけます。何処の部分か良く分からない!という方は、公開のテンプレートを随時修正していきますので、修正完了の記事が出たら、もしくはテンプレートの修正日が今日以降になってましたら再DLをお願いします。
一体何処でコピペをミスったのでしょう。。
あ、あと助け合い掲示板に送信ボタンを
<input type="submit" onload="javascript:initval();">とするように書いてましたが、<input type="submit" onclick="javascript:setval();">が正しいです。
過去ログを「cookie」で検索したら出てきて、やってみたら上手くいかなくて悩んじゃった人の為に書いておきます。笑
はい、小1時間ほど悩みました…orz
メモ:
initval()は保存してあるCookie情報を指定の箇所に配置。
setval()はCookie情報を保存または上書き保存する。
【日常の吐息】 休みの日のデフォルト
昼過ぎまで寝て、気が向いたら好きな服を着て出掛ける。
うん。デフォルトですよ?
さて、Le ciel公開したわけです。
カスタマイズの追記もしましたよー。
CSSで色変えるだけでかなり雰囲気変わるかと思います。
UTFは今かなり早いらしく、あっという間に流されてましたが。笑
色んな人が作ってるんだなー。
見てるのも楽しい。
今日ふらふらと出掛けたら、素敵な巡り合わせ。
OS9でも使えるMP3プレーヤー。
あ。MacのOS9だと初期のiPodしか使えないんですよ。しってました?(無駄な知識)
帰ってから早速繋げてみたら、上手く行かない。
試行錯誤して分かったのは、付属のUSB部分がおかしいこと。
USBハブに差したら上手くいって大喜び。
やった。
買ったのは「iAUDIO U3」というやつ。
ムービー再生とか、写真見たりとかもできるます。韓国のやつです。
LinuxOSも対応してるんですって。すげー。
毎日が少し素敵になりそうです。
うん。デフォルトですよ?
さて、Le ciel公開したわけです。
カスタマイズの追記もしましたよー。
CSSで色変えるだけでかなり雰囲気変わるかと思います。
UTFは今かなり早いらしく、あっという間に流されてましたが。笑
色んな人が作ってるんだなー。
見てるのも楽しい。
今日ふらふらと出掛けたら、素敵な巡り合わせ。
OS9でも使えるMP3プレーヤー。
あ。MacのOS9だと初期のiPodしか使えないんですよ。しってました?(無駄な知識)
帰ってから早速繋げてみたら、上手く行かない。
試行錯誤して分かったのは、付属のUSB部分がおかしいこと。
USBハブに差したら上手くいって大喜び。
やった。
買ったのは「iAUDIO U3」というやつ。
ムービー再生とか、写真見たりとかもできるます。韓国のやつです。
LinuxOSも対応してるんですって。すげー。
毎日が少し素敵になりそうです。
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)