サムネイル画像を大きく表示する:CSS小技

ブログが作りたい!CSSの小技 > サムネイル画像を大きく表示する:CSS小技

サムネイル画像を大きく表示する:CSS小技

サムネイル画像を大きく表示する: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に関連する記事を、ご紹介します。

作成日:2009/04/28 更新日:2009/04/28

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

サムネイルについて

こんにちは。いつも大変勉強させていただいてます♪
また質問なのですが。。
サムネイルを大きく表示させるのが「カッコいいな~~いいな~」と思い実践してみましたが上手くいきませんでした・・。


<h3 class="h3_title">2009年1月1日</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月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はほとんど同じですが画像のサイズなどを自分で変えてます。


2つめのh3とspanのテキストが前の画像(画像1や画像2)に被ってしまって(画像1・2の下にh3や文章が隠れてるような状態)上手く表示しないのです。2つめのh3やspanを下のほうに下げるにはcssをどのように指定すればいいのか教えて頂きたいのですが。もしよろしければよろしくお願いいたします。
。。いつも質問ばかりですみません。

前の画像に被る

bills nagaoさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

「2つめの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】サムネイルである事に気付いて頂く方法

1 「カーソルを乗せると画像が大きくなります」と画像のそばでアナウンスする

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】「ストーリーズ」終わってた
> 記事『フォトムービー作成サービス「ストーリーズ」
> 終わってた』において、ご丁寧に名を上げて頂き、
> ありがとうございました。自分が提供した訳でもないのに、
> 終わってしまったサービスの後始末までお知らせされるなんて親切ですね。
>
こちらこそありがとうございました。
おかげで気づくことができました。

遅くなっちゃってごめんなさいね。

「このくらいやったらリンクされても良かったわあ」とか、
気が変わったらお知らせくださいませ。


FC2ブログの記事でこれは、どうやればよいのでしょうか

少し早いですがMerryXmasです!

これをやりたいのですが、読んで全然分からない ((+_+)) ながらもやってみましたが、上手くいかず…。

私がしたのは
テンプレCSSの画像に関する物をまとめていると思われる辺りに、
上記のCSSとclearfix部分のコードを続けて貼り、
記事作成でHTMLを貼って、アップロードした画像のURLを(画像)部分に貼る――という物でした。

画像の一部が小さく表示され、マウスを乗せると×マークが出ました。

これをやるための具体的手順はどうすればよろしいのでしょうか?
私がイメージしたの手順と、その不明点は

1.テンプレのCSSは私がやった通り

2.画像アップロード
マウスを当てて大きく表示したいサイズで、サムネイルでない通常のアップロードをする

3.記事の載せたい部分に上のHTMLを貼り、マウスなし画像は2の保存先を?どこに?、マウスありは2をどこに?貼るか

4.画像によって望むマウスなし・ありサイズが異なるのは、どこで指定すればよいのか

こんな流れだと私の頭の中も分かりやすいと思ったのですが、意味不明でしょうか?






メリクリ

にゃおさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

不要な文字列など含まず CSSの方がうまく貼れていれば、
あとはHTML側の問題ということになります。

記事作成時に、どのようにHTMLを記述したのか?
メールに添付して送っていただけますか。

よろしくお願いします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/495-b7bc85bd
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて