画像を部分的に拡大表示「Cloud Zoom」(jQuery)

2015年7月 追記
「Cloud Zoom」は現在有料化されており、ここで紹介しているものは無料では使えなくなっています。


jQueryを使った画像の表示でお気に入りを見つけたので、備忘録として。


画像にカーソルを合わせるだけで、その部分がズームして表示されます。
画像の上にマウスを置いてみてください。
(scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてからマウスを置いて下さい。)

ダウンロード先→「Proffesor Cloud "Cloud Zoom"」

» 続きを読む…

リンク先のスクリーンショットを表示(jQuery)

前回の記事「jqueryを使ったツールチップとイメージプレビュー」で、マウスオンでリンク先のスクリーンショットを表示される方法を書きましたが、こちらは自分でスクリーンショット画像を用意して作成しなければなりませんでした。

今日紹介するのは同じくjQueryのプラグインを使って自動的にスクリーンショットを撮ってきてくれる方法です。

【サンプル】
リンク文字の上にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)
IEでは表示されませんので、IEでご覧の方は何のことやら??ですが…(^^ゞ

Yahoo!Japan     気の向くままに…


2011092401 ただし、問題がありまして……。
IEでは表示されません。
全く表示されないのであればそれはそれでよかったのですが、実際はスクリーンショットは表示されず、スクリーンショットの周りのフレームだけは表示されるという間抜けな感じに……。

2011092402.jpgそこで、フレームを付けないようにして(IEでは全く表示されないようにして)設定してやると、他のブラウザではちょっともの足りませんが、まぁ見れるかな…という感じです。

以下、導入方法と使い方です。

» 続きを読む…

jQueryを使ったツールチップとイメージプレビュー

1年ほど前の記事(記事中真ん中あたりの人名)にも使ったことがあるのですが、文字をオンマウスすると画像が表示されるようにしたことがあります。

これはjQueryプラグインを使って表示しています。

ちょっとメモしておかなければ忘れてしまいそうなので、備忘録がてら記事にしておきます。

Easiest Tooltip and Image Preview Using jQuery
↑こちらのサイトでJavaScriptの配布・説明などされていますが、FC2で使えるようにする手順を書いておきます。

↓サンプルです。
リンク文字や画像にマウスを置いて下さい。
(このブログは重いので、scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてから試して下さい。)

【サンプル1】
「気の向くままに…」
文字の上にマウスを置くとツールチップが表示されます。
これは「title」属性で入力した文字が表示されるのですが、通常のツールチップとは違い、CSSでチップの色などを変えることができます。


【サンプル2】
「気の向くままに…」
文字の上にマウスを置くと画像が表示されます。
サンプルではスクリーンショットを使っていますが、これは自動的にサイトのスクリーンショットを取ってくるわけではなく、自分で画像を用意しなければなりません。


【サンプル3】
「去年の彼岸花」
文字の上にマウスを置くと画像と説明文が表示されます。


【サンプル4】
中秋の名月
画像の上にマウスを置くと大きな画像が表示されます。


【サンプル5】
中秋の名月
画像の上にマウスを置くと大きな画像と説明文が表示されます。



以下導入方法です。

» 続きを読む…

Photoshop Elements クリッピングマスク

先日フォトショップエレメンツの「レイヤーマスク」について書きましたが、これと同じような「クリッピングマスク」という機能があります。

2011091801.jpgPhotoshop Elements8.0、9.0では「クリッピングマスク」という名前ですが、6.0未満では「下のレイヤーとグループ化」という名前になっています。
(7.0は未確認。 「クリッピングマスク」か「下のレイヤーとグループ化」のどちらかわかりません。)
↑左PhotoshopElements8.0&9.0 右6.0

2011091702.jpg2011091704.jpg
先日「Photoshop Elements レイヤーマスク」でやったようなことも、クリッピングマスク(下のレイヤーとグループ化)でも同様にできます。
例えば…上のような2枚の画像を重ね合わせて、左のような画像を作るには……。

2011091705.jpg重ねあわせたい2枚の画像の間に新規レイヤーを作ります。
その「新規レイヤー」に「描画色から透明に」のグラデーションをかけます。
グラデーションの描画色の部分が残り、透明の部分に下の画像が出てきます。

ややこし~くなってしまうのですが、「レイヤーマスク」は塗りつぶした部分が透明になりました。
「クリッピングマスク」は塗りつぶした部分が残ります。

グラデーションをかけたレイヤーの上のレイヤーをアクティブにして、「レイヤー」-「下のレイヤーとグループ化(クリッピングマスクを作成)」をクリック。

2011091703.jpgこのような表示になり、2枚の画像が合成されました。

「レイヤーマスク」は下の画像に対してマスクをかけますが、「クリッピングマスク」は上の画像に対してマスクをかけます。



» 続きを読む…

初!

たぶん、あとにも先にもこれが最初で最後でしょうから、記念に貼らせてね!



ここのところ、GmailManagerの件でご訪問くださる方が多く、そのおかげだと思いますが、FC2の「ジャンル・サブジャンルランキング」が上がっています♪

今日は初めてサブジャンルで20位以内に入っていました♪
もうこんなことないと思うので、記念にスクリーンショット撮って貼りつけておきました( *^艸^)

こんな話題にもお付き合いくださって、ご覧くださっている常連の皆様、いつもありがとうございますm(_ _)m


Photoshop Elements レイヤーマスク

2011091200.jpg

Photoshop Elements9.0はレイヤーマスクが標準装備されています。
8.0以下のバージョンはこの機能がなかったわけですが、アクションファイルをインストールすることによってレイヤーマスクを使うことができます。

レイヤーマスクがあれば、このような画像も簡単!

「レイヤーマスク」って何?
……って説明したいところですが、私にはうまく説明できません
ただ、合成する場合とか、元の画像をそのまま使っているので、修正がいくらでもやりやすい…ということ。

2011091211.jpg
例えば……
黄と赤色の2枚のレイヤーがあります。
上側のレイヤー(赤)にレイヤーパレット下部の「レイヤーマスクの追加」ボタンをクリックするとレイヤーマスクが表示されます。

2011091212.jpg
レイヤーマスクはレイヤー画像の横に白色で表示されます。

2011091213.jpg
レイヤーマスクの上に黒色のブラシツールで書き込むとその部分が透明になり、下のレイヤー(ここでは黄色)が見えます。

レイヤーマスクは黒く塗りつぶされたようになります。

2011091214.jpg
透明になった部分(レイヤーマスクが黒色でぬられている部分)を消しゴムで消すか、白色のブラシツールで書き込むとその部分は不透明になり、下のレイヤーは見えなくなります。

2011091210.jpg
一番上の画像はこの2枚の画像を重ねて、レイヤーマスクで処理したものです。

2011091215.jpg海の画像を下に、道路の画像を上に持ってきて、道路の画像にレイヤーマスクをかけ、ほぼ道路以外をボカシのかかったブラシツールで黒色で塗りつぶしたらこんな感じなりました。

レイヤーマスクを編集しているんだけなので、元画像はそのままですから、もうちょっと道路側の画像を残しておきたい時は、消しゴムで黒色部分を消すか、白色のブラシで描けば、その部分の画像が不透明になり現れてきます。

2011091220.jpgレイヤーマスクに黒色と透明のグラデーションをかけると黒色部分は下のレイヤーが見えますから、このようにうまくブレンドされた画像を簡単に作ることができます。

2011091221.jpgレイヤーマスクを使ってグラデーションをかけるとこんな画像も簡単にできるのです。


ハイ、長~くなりましたが、とりあえずここまで前置きでしたm(__)m

今まではフォトショップエレメンツ9.0では標準でレイヤーマスクが使えるので、こんな合成も簡単ですよ、というお話でしたが(たぶん……。脱線してるかも…( *^艸^))、ここからが本題。

以前の記事で紹介した「PanosFX」のアクションファイルのように、レイヤーマスクのアクションファイルをインストールするとレイヤーマスクがついていない6.0~8.0も使えるようになるのです!

以下インストール方法です。

» 続きを読む…

2011年中秋の名月

20110912chuushuunomeigetu.jpg

今日は「中秋の名月」です。
お月様、とってもキレイです♪
今年は満月が中秋の名月になります。
月見団子と同じまんまるお月様ですね!

2011年9月12日18時54分撮影


ホントは風景と絡めた写真を撮ってみたいんだけど、上手く撮れないので毎年お月様のアップ……(´・ω・`)
これってあんまり風情がないですね…(T_T)

(手抜き更新です




PanosFX 「PAGE CURLS」アクション(PhotoshopElements)

2011090900.jpg


PanosFX」のサイトではフリーのフォトショップアクションが配布されています。
エレメンツでも使えるため、あっという間にこんな楽しい画像が簡単に作れます。

「PanosFX」からアクションファイルをダウンロードし、インストールする方法は
PhotoshopElementsでアクションファイルを使う その1(ver.7~9)
PhotoshopElementsでアクションファイルを使う その2(ver.6)
PhotoshopElementsでアクションファイルを使う その3(ver.5)
が参考になれば幸いです。

さて、今回はその中のアクションの一つ、「PAGE CURLS Photoshop actions」の使い方を説明したいと思います。

» 続きを読む…

「GmailManager」にログインできない 2011年9月編

2014年9月のGmail Managerの不具合についてはこちらへどうぞ。
Firefoxアドオン Gmail Managerが使えなくなった(2014年9月)


【10月4日追記】【2012年1月19日追記】

gmail_manager-0.6.4.1.4-fx+sm.xpi
gmail_manager-0.6.4.1.5-fx+sm.xpi

↑こちらに修正版が配布されています。
今は一番上の「gmail_manager-0.6.4.1.5-fx+sm.xpi」が最新です。

こちらのサイトからダウンロードされる場合は、今後も最新バージョンがアップロードされていくと思いますので、バージョンを確認の上、一番新しいバージョンをダウンロードするようにして下さい。

修正版は「install.rdf」のmax versionを「8.*」に変更してあります。

(こちらをインストールされると下記のややこしい説明文は省いていただけます。)



またもや「Gmail Manager」に不具合が発生しているようです。

私の場合、支障なくログインできています。
※3台のパソコンで確認(すべて支障なく動作)。
Windows7 64bit 
Firefox 6.01
Gmail Manager 0.6.4.1
3アカウントで使用

Windows7 64bit
Firefox 6.02
Gmail Manager 0.6.4.1
シングルアカウントでテスト

Windows Vista 32bit
Firefox 6.02
Gmail Manager 0.6.4.1
シングルアカウントでテスト

というわけで、自分の環境で検証することができないのですが、フォーラムで書きこまれていた対処方法を紹介しておきます。
これで直るのかどうかはわかりませんが、やってみようと思われる方はやってみてください。
その結果もご報告いただけるとうれしく思います。

» 続きを読む…

おバカ語録 備忘録

昨日は息子の誕生日。
うまい具合に息子も娘もバイトが入っておらず、家族が揃いましたのでお祝いに外食することにしました。
息子に「何が食べたい?」と聞くと「焼肉」と言うので、みんなで焼肉屋さんへ。

そこでおバカ家族の楽しい会話がありましたので、自分の備忘録にしておきたいと思い、書き留めておきます。

» 続きを読む…

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
08 | 2011/09 | 10
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ