ｃｓｓだけで画像拡大ねた～ｌｉｇｈｔｂｏｘなしで、マウスオーバーでサムネ画像拡大をやってみる

おばんです。

『ｗｅｂサイト作りたい＆うまいピザ食いたい』というのが短期的な希望のｍｉｋａん星人アワーです。

いつだったかお仕事でやったものの、アップするのを忘れてたので（またはぶろぐねたがなくなってきたので（笑））、書いてみますが、今回はｃｓｓでサムネ画像拡大したりするねたです。

今回は以前食った、おいしいピザの画像

をマウスオーバーで拡大してみます。ホームページやブログで、写真をならべて整理しつつ、拡大してディティールをしっかり見せたいときはつかえるかもしれません。

こんな感じで♪

ｃｓｓ効かない環境の場合は、こんなイメージなので、こちらの画像をみてください。マウスオーバーで、画像をでっかく表示できます。

ソースはこんな感じです。
■サムネイル画像拡大ｃｓｓ
/*　さむねいる　*/
a.thumbnail {display: block; float: left; margin:0px; }
a.thumbnail img{position: absolute; z-index: 1}

a.thumbnail,
a.thumbnail img{ width: 150px; height: 113px;}
a.thumbnail:hover {border:none; cursor: default;}
a.thumbnail:hover img {position: absolute;width: auto;height: auto; z-index: 2}

hover時はz-indexで上に来るように。また、a.thumbnail imgのwidth、heightで小さい方のサイズ指定をしておきます。

■サムネイル画像拡大ｈｔｍｌタグ

<a class="thumbnail" href="https://blog-imgs-55.fc2.com/m/i/k/mikastellamusica/201206061.jpg">
<img src="https://blog-imgs-55.fc2.com/m/i/k/mikastellamusica/201206061.jpg" width="430" height="323" alt="" style="border:solid 0px " /></a>

img srcのタグ内のwidth、heightで、拡大したあとの画像サイズを指定します。
小さい画像を別に用意しなくてよかったり（画像は１枚）、ｌｉｇｈｔｂｏｘやりたいけどサーバーの仕様上ｊｓファイルがアップできないし（カラーミーショップは画像しか乗っからなかったような気がします）、外部に置くのもめんどい、などと言う場合はメリットになるかもしれません。

■おまけ、今回のようにｆｃ２ぶろぐでこれをやる場合
普通のｗｅｂサイトでやる場合はｃｓｓに上記のものを書けばｏｋですが、このｆｃ２ぶろぐみたいにやる場合は方法が２撮りあります。

１・しょっちゅう使う場合、基本レイアウトに組み込む場合は、テンプレート設定で

環境設定＞テンプレート設定とすすみ、『スタイルシート編集』で、上記のｃｓｓを書きましょう。画像サイズは、お使いのレイアウトにあわせて変更してください。

２・たまに１発ねたとかでやる場合は、ｃｓｓファイルをアップして

ブログのファイルアップロードで、上記のｃｓｓをアップします。画像ファイル以外にも、ｍｐ３やｊｓなどいろいろ乗っかるようなので便利です。

のっけたあとは、環境設定＞テンプレート設定で、ヘッダーにｃｓｓアドレス指定を記載します。

このぶろぐの場合だと、
<link rel="stylesheet" href="https://blog-imgs-55.fc2.com/m/i/k/mikastellamusica/20120606thumb.css" type="text/css">
を書きました。

まあ１の方がラクですね（笑）

マウスオーバー使わないばあいは、そのままｆｃ２のサムネ機能で行えばｏｋです。

またおいしいピザを食えるように、がんばって生活したいとおもいます（笑）

んでわまた♪

■当ぶろぐ管理人へのｗｅｂサイト制作・運用のご用命はこちら