プロフィール

mshp0723(旧Mikaん星人アワー)

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

■お仕事関連サイト■
音楽制作・楽曲アレンジ・webサイトやブログ制作・アトリエSS



2010~2013年の業務
サウンド制作関連
・一般クライアントさま向けDAWレッスン
・芸能プロダクションさま、アーティストさま向け楽曲提供
・教育機関さま 歌唱教材ダンスアレンジ
・ダンススクールさま ダンスBGMオーディオデータ編集
・機器メーカーさま ナレーションレコーディングと編集
・地元企業さま イベント用ご当地風楽曲アレンジ制作
・飲食店運営企業さま 店舗用カラオケアレンジ制作
・移動販売店さま 店舗BGM楽曲アレンジ制作


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



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

メールフォーム

名前:
メール:
件名:
本文:

最近の記事

カテゴリー

最近のコメント

月別アーカイブ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
トラックバック
by まとめwoネタ速neo on 2012/06/09 at 02:28:26

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

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

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="http://blog-imgs-55.fc2.com/m/i/k/mikastellamusica/201206061.jpg">
<img src="http://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="http://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でサムネ画...

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

検索フォーム

音楽制作読んどけ☆コラム dawテクニックと音楽理論・アレンジ・更新情報

Powered by RSSリスティング

リンク(相互大歓迎♪)

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。