サムネイル画像を大きく表示する：CSS小技
CSSの小技（11）
今回は、同じページにて、サムネイル画像を大きく表示する CSSの小技です。（マウスのカーソルを、画像の上にのせると大きく表示されます）
これ、けっこうかっこいい。
ちょっと表示が重いので、あまり実用的ではないかもしれませんが、ご紹介いたします。
サムネイル画像を大きく表示するとは？
サムネイル画像を大きく表示するというのは、次のような形で並んでいる写真の上に、マウスのカーソルをあわせると大きく表示されるということです。
※：次の画像は表示用なので、クリックしても何も起こりません。
言葉だけでは説明しにくいので、サンプルを用意しました。かなり表示が重いですけれど、良かったらサンプルをご覧ください。
小さい画像（120×90）の上にマウスのカーソルをのせると、大きい画像（640×480）が表示されます。さらにクリックすると、画像だけが表示される仕組みです。
サムネイル画像を大きく表示する方法
1：ソースコード
（1）HTMLコード
（2）CSSコード
（3）CSSコード（clearfix部分）
2：ポイント解説
リンクタグ（a）を、ブロックレベル（display: block;）にし、指定したサイズからはみ出た部分は、非表示（overflow: hidden;）にしています。
画像（img）は、絶対配置（position: absolute;）にて、サムネイル表示したときの表示箇所を指定しています。（数値は、カーソルがのった時の表示位置にも影響します）
マウスのカーソルが画像にのった時（a:hover）は、はみ出た部分も表示（overflow: visible;）します。
画像が重なって表示されたら、サムネイル画像が下（z-index: 1;）で、マウスのカーソルがのった時の画像が上（z-index: 2;）で表示されます。
z-indexは重なる順序を指定するプロパティです。数値の多きい方が上にきます。
「a:hover img」にサイズを指定することで、マウスのカーソルが画像にのった時の画像の大きさを調整することができます。
「clearfix」については、記事『サムネイル画像をきれいに並べる（1）：CSS小技』にて書いているので、割愛します。
次回予告
次回は、半角英数字の文字列を折り返す CSSの小技をご紹介します。
関連記事
CSSに関連する記事を、ご紹介します。
1：ちょっと変わった CSSの小技
2：サムネイル画像を使った CSSの小技
作成日：2009/04/28 更新日：2009/04/28
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。
サムネイルについて
前の画像に被る
bills nagaoさん、こんにちは！(・∀・)/へろー
コメントありがとうございます。
「２つめのh3とspanのテキストが前の画像に被る」というのは、
マウスを画像にのせない状態でも被っているということでしょうか？
であれば、なぜそういうことが起きているかは、
CSSの方も拝見しないと、ちょっと分からないです。(`･ω･´)
あるいは、マウスを画像にのせた場合のお話であれば、
次の箇所の「top」や「left」によって、
多少の位置の微調整が可能です。叶美香さんです。
ul.thumbzoom a img {
position: absolute;
top: -70px;
left: -40px;
}
大きくしたときの画像が、あまりにも大きいと、
ちょっとしんどいかもしれません。
追記：
メールしました！(・∀・)/
コメントありがとうございます。
「２つめのh3とspanのテキストが前の画像に被る」というのは、
マウスを画像にのせない状態でも被っているということでしょうか？
であれば、なぜそういうことが起きているかは、
CSSの方も拝見しないと、ちょっと分からないです。(`･ω･´)
あるいは、マウスを画像にのせた場合のお話であれば、
次の箇所の「top」や「left」によって、
多少の位置の微調整が可能です。叶美香さんです。
ul.thumbzoom a img {
position: absolute;
top: -70px;
left: -40px;
}
大きくしたときの画像が、あまりにも大きいと、
ちょっとしんどいかもしれません。
追記：
メールしました！(・∀・)/
FC2ブログのサムネイル画像
こちら、いいですね。時々サムネイル画像を使うのですが、マウスを移動する手間と、サムネイルである事に気付いて頂く方法を検討していました。
【1】FC2ブログのサムネイル画像との兼ね合い
ご紹介頂いた方法は「大小2枚の画像をアップロードさせて、1枚の画像にその2枚分のデーター量がかかる」という事。
FC2ブログのサムネイル画像は1枚のアップロードで済み、1枚分のデーター量。ただしリンクした別窓の表示でしか大きい画像は見れない。
以上の理解でよろしいのでしょうか？
でもご紹介下さった方法の方が、閲覧者にはよい気がします。
【2】FC2ブログの画像はクリックすると別窓が開く
サムネイルではない画像でも上にマウスポインタを乗せると指マークが出て、同じ画像が別窓リンクして表示されますよね。HTMLを見ると画像の前に勝手に別窓リンクタグが入るので削ってみたら、画像は出て指は出なくなりました。こんな対応で良いのでしょうか？リンクさせているという事は訳があるのかと思うと、マズイ気もしました。
【3】サムネイルである事に気付いて頂く方法
１ 「カーソルを乗せると画像が大きくなります」と画像のそばでアナウンスする
2 マーク（あれば一般的なそういう絵、なければ自分で絵文字を作る）
3 カーソルを乗せると画像が動く
私のブログは携帯での閲覧が6～7％あり、やっぱり1が一番確かでしょうかね…。
【4】リンク方法の案内
案内と言えば…ですが。今はtitleに「クリックにて同窓リンク」と入れる方法と、リンクしたい文字・画の傍に「クリックにて別窓リンク」と書くのと併用しています。別窓リンクのマーク（PC画面が2枚ずれて重なっている絵）もありますよね。文での案内は見た目を損なう事もあるとは思いますが、カーソルを置かなくても分るので、ブログに慣れない閲覧者には親切かな？とも思っています。
KumaCrowはサイドにはtitleのみ、記事中では文との併用かな？と思うのですが、いかがでしょうか。
【5】同窓・別窓の閲覧者の使い分け
別窓リンクについてKumaCrowさんがどこかの記事でおっしゃっておられたように思ったのですが、別窓はHTMLのお作法（とか「流派」みたいな理解をしているのですが）で今後奨励されない聞くと、ちょっと別窓利用にためらいもあります。私が閲覧する立場で言えば、別窓がやりやすいと思います。視覚障害者の方がご覧になるほど対象の広いジャンルではありませんし。
今はブログ外は別窓リンク、ブログ内は何となく内容で使い分けています。何となくというのは、その記事を見ながら並べて見たい物か、その記事が切り替わるとまた戻る手間が発生しそうか、辺りです。
KumaCrowさんは使い分けをされていますか？分けているなら、その考え方を参考に教えて頂けると嬉しいです。
あと申し遅れましたが
記事『フォトムービー作成サービス「ストーリーズ」終わってた』において、ご丁寧に名を上げて頂き、ありがとうございました。自分が提供した訳でもないのに、終わってしまったサービスの後始末までお知らせされるなんて親切ですね。
記事『好きな場所にスクロールバーを作る：CSS小技』コメントにおいて、「ふい字フォント」の情報と「ページの先頭に戻る」の考え方を教えていただき、ありがとうございました。
いつも色々お世話になっております (#^.^#)/ では！
【1】FC2ブログのサムネイル画像との兼ね合い
ご紹介頂いた方法は「大小2枚の画像をアップロードさせて、1枚の画像にその2枚分のデーター量がかかる」という事。
FC2ブログのサムネイル画像は1枚のアップロードで済み、1枚分のデーター量。ただしリンクした別窓の表示でしか大きい画像は見れない。
以上の理解でよろしいのでしょうか？
でもご紹介下さった方法の方が、閲覧者にはよい気がします。
【2】FC2ブログの画像はクリックすると別窓が開く
サムネイルではない画像でも上にマウスポインタを乗せると指マークが出て、同じ画像が別窓リンクして表示されますよね。HTMLを見ると画像の前に勝手に別窓リンクタグが入るので削ってみたら、画像は出て指は出なくなりました。こんな対応で良いのでしょうか？リンクさせているという事は訳があるのかと思うと、マズイ気もしました。
【3】サムネイルである事に気付いて頂く方法
１ 「カーソルを乗せると画像が大きくなります」と画像のそばでアナウンスする
2 マーク（あれば一般的なそういう絵、なければ自分で絵文字を作る）
3 カーソルを乗せると画像が動く
私のブログは携帯での閲覧が6～7％あり、やっぱり1が一番確かでしょうかね…。
【4】リンク方法の案内
案内と言えば…ですが。今はtitleに「クリックにて同窓リンク」と入れる方法と、リンクしたい文字・画の傍に「クリックにて別窓リンク」と書くのと併用しています。別窓リンクのマーク（PC画面が2枚ずれて重なっている絵）もありますよね。文での案内は見た目を損なう事もあるとは思いますが、カーソルを置かなくても分るので、ブログに慣れない閲覧者には親切かな？とも思っています。
KumaCrowはサイドにはtitleのみ、記事中では文との併用かな？と思うのですが、いかがでしょうか。
【5】同窓・別窓の閲覧者の使い分け
別窓リンクについてKumaCrowさんがどこかの記事でおっしゃっておられたように思ったのですが、別窓はHTMLのお作法（とか「流派」みたいな理解をしているのですが）で今後奨励されない聞くと、ちょっと別窓利用にためらいもあります。私が閲覧する立場で言えば、別窓がやりやすいと思います。視覚障害者の方がご覧になるほど対象の広いジャンルではありませんし。
今はブログ外は別窓リンク、ブログ内は何となく内容で使い分けています。何となくというのは、その記事を見ながら並べて見たい物か、その記事が切り替わるとまた戻る手間が発生しそうか、辺りです。
KumaCrowさんは使い分けをされていますか？分けているなら、その考え方を参考に教えて頂けると嬉しいです。
あと申し遅れましたが
記事『フォトムービー作成サービス「ストーリーズ」終わってた』において、ご丁寧に名を上げて頂き、ありがとうございました。自分が提供した訳でもないのに、終わってしまったサービスの後始末までお知らせされるなんて親切ですね。
記事『好きな場所にスクロールバーを作る：CSS小技』コメントにおいて、「ふい字フォント」の情報と「ページの先頭に戻る」の考え方を教えていただき、ありがとうございました。
いつも色々お世話になっております (#^.^#)/ では！
サムネイルやら外部リンクやら
にゃおさん、こんばんは！( ･∀･)ﾉ
コメントありがとうございます。
【01】こちらのサムネイルである事に気付いて頂く方法
> こちら、いいですね。
> 時々サムネイル画像を使うのですが、マウスを移動する手間と、
> サムネイルである事に気付いて頂く方法を検討していました。
>
難しいところですよね。
私もいいかなあと思ってご紹介はしたんですが、
画像の上をマウスのポインタが通るたびに大きく表示されるので、
煩わしいと感じる人もいらっしゃるかもしれません。
わりとこういうクリックせずに表示が変わるようにしている
大手のサイトさんもあるんですけれども、
意図せずに表示が変わってしまうときもあるので、
導入にあたっては、よくよく考えたほうが良さそうです。
【02】サムネイル画像を大きく表示する方法
> ご紹介頂いた方法は「大小2枚の画像をアップロードさせて、
> 1枚の画像にその2枚分のデーター量がかかる」という事。
>
このサムネイル画像を大きく表示する方法は、
アップロードする画像は1枚です。
CSSによって、表示する大きさを変えてあります。
デメリットとして考えていただきたいのは、
表示がとても重い（遅い）ということです。
【03】FC2ブログのサムネイル画像について
> FC2ブログのサムネイル画像は1枚のアップロードで済み、
> 1枚分のデーター量。
> ただしリンクした別窓の表示でしか大きい画像は見れない。
>
そうですね。
「1枚のアップロード」というより、
「1回のアップロード」と書くほうが誤解がないかもしれません。
自動的にサムネイル画像（小さい画像）が作成されているので、
使用される画像は2枚です。
サムネイル画像（小さい画像）もデータ量として加算されるかは、
分かりません。
そんなにかさばるものでもないので、
加算されても微々たるものだとは思いますが。
【04】FC2ブログの画像はクリックすると別窓が開く
> サムネイルではない画像でも
> 上にマウスポインタを乗せると指マークが出て、
> 同じ画像が別窓リンクして表示されますよね。
> HTMLを見ると画像の前に勝手に別窓リンクタグが入るので削ってみたら、
> 画像は出て指は出なくなりました。こんな対応で良いのでしょうか？
> リンクさせているという事は訳があるのかと思うと、
> マズイ気もしました。
>
んー？ おそらく、ファイルをアップロードするときに、
サムネイルのチェック（同時に作成する）を外しておけば、
サムネイルではない画像は、
指マークも、リンクもされないと思いますよ。
アップロードした後（作ってしまった後）で、
「ああ、これサムネイルとかいらんかったわあ」というときは、
おっしゃる通り、余計なタグなどがあれば、
手作業で削ることになるかと思います。
【05】サムネイルである事に気付いて頂く方法
> 1 「カーソルを乗せると画像が大きくなります」と画像のそばでアナウンスする
> 2 マーク（あれば一般的なそういう絵、なければ自分で絵文字を作る）
> 3 カーソルを乗せると画像が動く
>
> 私のブログは携帯での閲覧が6～7％あり、やっぱり1が一番確かでしょうかね…。
>
ですねー。文章で書いておくのがもっとも分かり良いかも。
確実にということであれば合わせ技でということになりそうです。
こういった方法もありますけどね。↓
「画像の透明度を変化させる：CSS小技」
http://kumacrow.blog111.fc2.com/blog-entry-483.html
わりと出しゃばった印象を与えなくて好まれるようです。
よく見かけます。
【06】リンク方法の案内
> 案内と言えば…ですが。
> 今はtitleに「クリックにて同窓リンク」と入れる方法と、
> リンクしたい文字・画の傍に「クリックにて別窓リンク」と
> 書くのと併用しています。
> 別窓リンクのマーク（PC画面が2枚ずれて重なっている絵）も
> ありますよね。
> 文での案内は見た目を損なう事もあるとは思いますが、
> カーソルを置かなくても分るので、
> ブログに慣れない閲覧者には親切かな？とも思っています。
>
> KumaCrowはサイドにはtitleのみ、
> 記事中では文との併用かな？と思うのですが、いかがでしょうか。
>
私の場合は、同窓・別窓リンクは、
そのドメイン内か？ あるいは別かで分けています。
内部とおぼしきページは同窓で、
もうこれ外部やろってページは別窓リンクです。
んーでも、基本的に、みなさん、
それほど同窓・別窓って気にしていないんじゃないですかね。
設計する側としては、
何か規則を決めて設定しておけばそれほど支障はないかと思います。
書いておけば親切だと思いますが、けっこう大変ですよね。
そこまで頑張らなくてもいいんじゃないかなと。疲れちゃうから。
【07】同窓・別窓の閲覧者の使い分け
> 別窓リンクについてKumaCrowさんがどこかの記事で
> おっしゃっておられたように思ったのですが、
> 別窓はHTMLのお作法（とか「流派」みたいな理解をしているのですが）
> で今後奨励されない聞くと、ちょっと別窓利用にためらいもあります。
> 私が閲覧する立場で言えば、別窓がやりやすいと思います。
> 視覚障害者の方がご覧になるほど対象の広いジャンルではありませんし。
>
それで構わないと思います。
本来、個々が設定で悩む事柄ではなく、
ブラウザ側の機能として吸収してくれれば良いことだと思っています。
障がいの有無に関わらず、
使う人が簡単に切り替えられれば済む話です。
あまり悩まなくても良いのではないでしょうか。
自分が使うときにまず「こうなっていたらいいな」と考える
設定をベースにして良いように思います。
【08】今の設定
> 今はブログ外は別窓リンク、
> ブログ内は何となく内容で使い分けています。
> 何となくというのは、その記事を見ながら並べて見たい物か、
> その記事が切り替わるとまた戻る手間が発生しそうか、辺りです。
>
管理者に説明されないと把握できないような規則には
しないほうが良いかもしれません。
感覚的に、「こうなんだろうな」と分かるような形が
望ましいと思います。
違和感をあたえない、良いとも悪いとも思わせない
操作性がもっとも良い設定であろうと思います。
それから、「ユーザビリティ」とか、
「アクセシビリティ」、「UI」などの言葉で調べると、
ヒントになる情報が見つかるかもしれません。
【09】「ストーリーズ」終わってた
> 記事『フォトムービー作成サービス「ストーリーズ」
> 終わってた』において、ご丁寧に名を上げて頂き、
> ありがとうございました。自分が提供した訳でもないのに、
> 終わってしまったサービスの後始末までお知らせされるなんて親切ですね。
>
こちらこそありがとうございました。
おかげで気づくことができました。
遅くなっちゃってごめんなさいね。
「このくらいやったらリンクされても良かったわあ」とか、
気が変わったらお知らせくださいませ。
コメントありがとうございます。
【01】こちらのサムネイルである事に気付いて頂く方法
> こちら、いいですね。
> 時々サムネイル画像を使うのですが、マウスを移動する手間と、
> サムネイルである事に気付いて頂く方法を検討していました。
>
難しいところですよね。
私もいいかなあと思ってご紹介はしたんですが、
画像の上をマウスのポインタが通るたびに大きく表示されるので、
煩わしいと感じる人もいらっしゃるかもしれません。
わりとこういうクリックせずに表示が変わるようにしている
大手のサイトさんもあるんですけれども、
意図せずに表示が変わってしまうときもあるので、
導入にあたっては、よくよく考えたほうが良さそうです。
【02】サムネイル画像を大きく表示する方法
> ご紹介頂いた方法は「大小2枚の画像をアップロードさせて、
> 1枚の画像にその2枚分のデーター量がかかる」という事。
>
このサムネイル画像を大きく表示する方法は、
アップロードする画像は1枚です。
CSSによって、表示する大きさを変えてあります。
デメリットとして考えていただきたいのは、
表示がとても重い（遅い）ということです。
【03】FC2ブログのサムネイル画像について
> FC2ブログのサムネイル画像は1枚のアップロードで済み、
> 1枚分のデーター量。
> ただしリンクした別窓の表示でしか大きい画像は見れない。
>
そうですね。
「1枚のアップロード」というより、
「1回のアップロード」と書くほうが誤解がないかもしれません。
自動的にサムネイル画像（小さい画像）が作成されているので、
使用される画像は2枚です。
サムネイル画像（小さい画像）もデータ量として加算されるかは、
分かりません。
そんなにかさばるものでもないので、
加算されても微々たるものだとは思いますが。
【04】FC2ブログの画像はクリックすると別窓が開く
> サムネイルではない画像でも
> 上にマウスポインタを乗せると指マークが出て、
> 同じ画像が別窓リンクして表示されますよね。
> HTMLを見ると画像の前に勝手に別窓リンクタグが入るので削ってみたら、
> 画像は出て指は出なくなりました。こんな対応で良いのでしょうか？
> リンクさせているという事は訳があるのかと思うと、
> マズイ気もしました。
>
んー？ おそらく、ファイルをアップロードするときに、
サムネイルのチェック（同時に作成する）を外しておけば、
サムネイルではない画像は、
指マークも、リンクもされないと思いますよ。
アップロードした後（作ってしまった後）で、
「ああ、これサムネイルとかいらんかったわあ」というときは、
おっしゃる通り、余計なタグなどがあれば、
手作業で削ることになるかと思います。
【05】サムネイルである事に気付いて頂く方法
> 1 「カーソルを乗せると画像が大きくなります」と画像のそばでアナウンスする
> 2 マーク（あれば一般的なそういう絵、なければ自分で絵文字を作る）
> 3 カーソルを乗せると画像が動く
>
> 私のブログは携帯での閲覧が6～7％あり、やっぱり1が一番確かでしょうかね…。
>
ですねー。文章で書いておくのがもっとも分かり良いかも。
確実にということであれば合わせ技でということになりそうです。
こういった方法もありますけどね。↓
「画像の透明度を変化させる：CSS小技」
http://kumacrow.blog111.fc2.com/blog-entry-483.html
わりと出しゃばった印象を与えなくて好まれるようです。
よく見かけます。
【06】リンク方法の案内
> 案内と言えば…ですが。
> 今はtitleに「クリックにて同窓リンク」と入れる方法と、
> リンクしたい文字・画の傍に「クリックにて別窓リンク」と
> 書くのと併用しています。
> 別窓リンクのマーク（PC画面が2枚ずれて重なっている絵）も
> ありますよね。
> 文での案内は見た目を損なう事もあるとは思いますが、
> カーソルを置かなくても分るので、
> ブログに慣れない閲覧者には親切かな？とも思っています。
>
> KumaCrowはサイドにはtitleのみ、
> 記事中では文との併用かな？と思うのですが、いかがでしょうか。
>
私の場合は、同窓・別窓リンクは、
そのドメイン内か？ あるいは別かで分けています。
内部とおぼしきページは同窓で、
もうこれ外部やろってページは別窓リンクです。
んーでも、基本的に、みなさん、
それほど同窓・別窓って気にしていないんじゃないですかね。
設計する側としては、
何か規則を決めて設定しておけばそれほど支障はないかと思います。
書いておけば親切だと思いますが、けっこう大変ですよね。
そこまで頑張らなくてもいいんじゃないかなと。疲れちゃうから。
【07】同窓・別窓の閲覧者の使い分け
> 別窓リンクについてKumaCrowさんがどこかの記事で
> おっしゃっておられたように思ったのですが、
> 別窓はHTMLのお作法（とか「流派」みたいな理解をしているのですが）
> で今後奨励されない聞くと、ちょっと別窓利用にためらいもあります。
> 私が閲覧する立場で言えば、別窓がやりやすいと思います。
> 視覚障害者の方がご覧になるほど対象の広いジャンルではありませんし。
>
それで構わないと思います。
本来、個々が設定で悩む事柄ではなく、
ブラウザ側の機能として吸収してくれれば良いことだと思っています。
障がいの有無に関わらず、
使う人が簡単に切り替えられれば済む話です。
あまり悩まなくても良いのではないでしょうか。
自分が使うときにまず「こうなっていたらいいな」と考える
設定をベースにして良いように思います。
【08】今の設定
> 今はブログ外は別窓リンク、
> ブログ内は何となく内容で使い分けています。
> 何となくというのは、その記事を見ながら並べて見たい物か、
> その記事が切り替わるとまた戻る手間が発生しそうか、辺りです。
>
管理者に説明されないと把握できないような規則には
しないほうが良いかもしれません。
感覚的に、「こうなんだろうな」と分かるような形が
望ましいと思います。
違和感をあたえない、良いとも悪いとも思わせない
操作性がもっとも良い設定であろうと思います。
それから、「ユーザビリティ」とか、
「アクセシビリティ」、「UI」などの言葉で調べると、
ヒントになる情報が見つかるかもしれません。
【09】「ストーリーズ」終わってた
> 記事『フォトムービー作成サービス「ストーリーズ」
> 終わってた』において、ご丁寧に名を上げて頂き、
> ありがとうございました。自分が提供した訳でもないのに、
> 終わってしまったサービスの後始末までお知らせされるなんて親切ですね。
>
こちらこそありがとうございました。
おかげで気づくことができました。
遅くなっちゃってごめんなさいね。
「このくらいやったらリンクされても良かったわあ」とか、
気が変わったらお知らせくださいませ。
FC2ブログの記事でこれは、どうやればよいのでしょうか
少し早いですがMerryXmasです！
これをやりたいのですが、読んで全然分からない ((+_+)) ながらもやってみましたが、上手くいかず…。
私がしたのは
テンプレＣＳＳの画像に関する物をまとめていると思われる辺りに、
上記のＣＳＳとclearfix部分のコードを続けて貼り、
記事作成でHTMLを貼って、アップロードした画像のＵＲＬを（画像）部分に貼る――という物でした。
画像の一部が小さく表示され、マウスを乗せると×マークが出ました。
これをやるための具体的手順はどうすればよろしいのでしょうか？
私がイメージしたの手順と、その不明点は
１．テンプレのＣＳＳは私がやった通り
２．画像アップロード
マウスを当てて大きく表示したいサイズで、サムネイルでない通常のアップロードをする
３．記事の載せたい部分に上のHTMLを貼り、マウスなし画像は２の保存先を？どこに？、マウスありは２をどこに？貼るか
４．画像によって望むマウスなし・ありサイズが異なるのは、どこで指定すればよいのか
こんな流れだと私の頭の中も分かりやすいと思ったのですが、意味不明でしょうか？
これをやりたいのですが、読んで全然分からない ((+_+)) ながらもやってみましたが、上手くいかず…。
私がしたのは
テンプレＣＳＳの画像に関する物をまとめていると思われる辺りに、
上記のＣＳＳとclearfix部分のコードを続けて貼り、
記事作成でHTMLを貼って、アップロードした画像のＵＲＬを（画像）部分に貼る――という物でした。
画像の一部が小さく表示され、マウスを乗せると×マークが出ました。
これをやるための具体的手順はどうすればよろしいのでしょうか？
私がイメージしたの手順と、その不明点は
１．テンプレのＣＳＳは私がやった通り
２．画像アップロード
マウスを当てて大きく表示したいサイズで、サムネイルでない通常のアップロードをする
３．記事の載せたい部分に上のHTMLを貼り、マウスなし画像は２の保存先を？どこに？、マウスありは２をどこに？貼るか
４．画像によって望むマウスなし・ありサイズが異なるのは、どこで指定すればよいのか
こんな流れだと私の頭の中も分かりやすいと思ったのですが、意味不明でしょうか？
メリクリ
にゃおさん、こんばんは！( ･∀･)ﾉ
コメントありがとうございます。
不要な文字列など含まず CSSの方がうまく貼れていれば、
あとはHTML側の問題ということになります。
記事作成時に、どのようにHTMLを記述したのか？
メールに添付して送っていただけますか。
よろしくお願いします。
コメントありがとうございます。
不要な文字列など含まず CSSの方がうまく貼れていれば、
あとはHTML側の問題ということになります。
記事作成時に、どのようにHTMLを記述したのか？
メールに添付して送っていただけますか。
よろしくお願いします。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/495-b7bc85bd
また質問なのですが。。
サムネイルを大きく表示させるのが「カッコいいな～～いいな～」と思い実践してみましたが上手くいきませんでした・・。
<h3 class="h3_title">2009年１月１日</h3>
<span>マウスをあわせると大きな画像になります♪</span>
<ul class="thumbzoom clearfix">
<li><a href="（画像1）"><img src="（画像1）" /></a></li>
<li><a href="（画像2）"><img src="（画像2）" /></a></li>
</ul>
<h3 class="h3_title">2009年３月3日</h3>
<span>マウスをあわせると大きな画像になります♪</span>
<ul class="thumbzoom clearfix">
<li><a href="（画像3）"><img src="（画像3）" /></a></li>
<li><a href="（画像4）"><img src="（画像4）" /></a></li>
</ul>
でcssはほとんど同じですが画像のサイズなどを自分で変えてます。
２つめのh3とspanのテキストが前の画像（画像１や画像２）に被ってしまって（画像１・２の下にh3や文章が隠れてるような状態）上手く表示しないのです。２つめのh3やspanを下のほうに下げるにはcssをどのように指定すればいいのか教えて頂きたいのですが。もしよろしければよろしくお願いいたします。
。。いつも質問ばかりですみません。