おばんです。
『webサイト作りたい&うまいピザ食いたい』というのが短期的な希望のmikaん星人アワーです。
いつだったかお仕事でやったものの、アップするのを忘れてたので
(またはぶろぐねたがなくなってきたので(笑))、書いてみますが、今回は
cssでサムネ画像拡大したりするねたです。
今回は以前食った、おいしいピザの画像

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

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

ソースはこんな感じです。
■サムネイル画像拡大css/* さむねいる */
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で小さい方のサイズ指定をしておきます。
■サムネイル画像拡大htmlタグ<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で、拡大したあとの画像サイズを指定します。
小さい画像を別に用意しなくてよかったり(画像は1枚)、lightboxやりたいけどサーバーの仕様上jsファイルがアップできないし(カラーミーショップは画像しか乗っからなかったような気がします)、外部に置くのもめんどい、などと言う場合はメリットになるかもしれません。
■おまけ、今回のようにfc2ぶろぐでこれをやる場合普通のwebサイトでやる場合はcssに上記のものを書けばokですが、このfc2ぶろぐみたいにやる場合は方法が2撮りあります。
1・しょっちゅう使う場合、基本レイアウトに組み込む場合は、テンプレート設定で環境設定>テンプレート設定とすすみ、『スタイルシート編集』で、上記のcssを書きましょう。画像サイズは、お使いのレイアウトにあわせて変更してください。
2・たまに1発ねたとかでやる場合は、cssファイルをアップしてブログのファイルアップロードで、上記のcssをアップします。画像ファイル以外にも、mp3やjsなどいろいろ乗っかるようなので便利です。
のっけたあとは、環境設定>テンプレート設定で、ヘッダーにcssアドレス指定を記載します。

このぶろぐの場合だと、
<link rel="stylesheet" href="https://blog-imgs-55.fc2.com/m/i/k/mikastellamusica/20120606thumb.css" type="text/css">
を書きました。
まあ
1の方がラクですね(笑)マウスオーバー使わないばあいは、そのままfc2のサムネ機能で行えばokです。
またおいしいピザを食えるように、がんばって生活したいとおもいます(笑)
んでわまた♪
■当ぶろぐ管理人へのwebサイト制作・運用のご用命はこちら



(↑面白かったらクリックお願いいたします♪)
- 関連記事
-
スポンサーサイト