プロフィール

mshp0723(旧Mikaん星人アワー)

Author:mshp0723(旧Mikaん星人アワー)
ごらんいただきありがとうございます。マルチクリエイタ・クリエイティブ起業家のmikaん星人アワーです。webコンテンツ関連お仕事をしています。

■お仕事関連サイト■
仙台スマホ対応ワードプレスサイト制作・アトリエSS


webサイト制作・運用関連事例
・食品店さま ネットショップ制作
・音楽スクールさま webサイト制作
・楽器奏者さま 再生プラグイン埋め込みサイト制作
・エクステリア施工企業さま webサイト企画
・飲食店さま webサイト制作
・支援団体さま サイト制作
・一般企業さま 会社案内サイト企画
・支援団体さま fc2ブログカスタマイズ
・その他 メディア/アフィリエイト運用ブログカスタマイズ



よろしくお願いいたします。

最近の記事

カテゴリー

cssだけで画像拡大ねた~lightboxなしで、マウスオーバーでサムネ画像拡大をやってみる

おばんです。

『webサイト作りたい&うまいピザ食いたい』というのが短期的な希望のmikaん星人アワーです。

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



今回は以前食った、おいしいピザの画像
201206061.jpg
をマウスオーバーで拡大してみます。ホームページやブログで、写真をならべて整理しつつ、拡大してディティールをしっかり見せたいときはつかえるかもしれません。

こんな感じで♪






















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


ソースはこんな感じです。
■サムネイル画像拡大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アドレス指定を記載します。
201206063.jpg

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

まあ1の方がラクですね(笑)

マウスオーバー使わないばあいは、そのままfc2のサムネ機能で行えばokです。


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

んでわまた♪


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

にほんブログ村 地域生活(街) 東北ブログ 仙台情報へにほんブログ村 ベンチャーブログへにほんブログ村 音楽ブログへ

(↑面白かったらクリックお願いいたします♪)
関連記事
スポンサーサイト
このエントリーのタグ: webサイト制作 画像拡大 cssレイアウト
トラックバック
by まとめwoネタ速neo on 2012/06/09 at 02:28:26

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

トラックバック送信先 :
コメント

リンク(相互大歓迎♪)

月別アーカイブ