corner.jsで画像の角を丸くする

javascriptで画像にエフェクトをかける方法を続けて記事にしていますが、もう一つ紹介しておきます。
(Google Chromeでの表示はちょっと粗めです。)

以前画像の角を丸くする方法をPhotoshopを使った方法WEBジェネレーターを使った方法を紹介しましたが、これらは画像を直接加工するやり方でした。
今回の「corner.js」を使った方法は画像はそのままです。

09070401.jpgこちらのサイトから「corner.js」をダウンロードします。
zipファイルになっていますので、展開しておきます。

展開したフォルダの中に「corner.js」というファイルがあるので、それをブログ管理画面からファイルをアップロードしておきます。

個別で角を丸くしたり、画像の回りに色で枠をつけたりする場合は「justcorners.js」もアップロードしておきます。

テンプレート管理画面で、テンプレートの<head>~</head>部分にこれらのjavascriptを書き込んでおきます。

例:<script type="text/javascript" src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/corner.js"></script>
<script type="text/javascript" src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/justcorners.js"></script>


通常通り画像を挿入して、最後に「class="corner・・・・"」を書き加えます。
<a href="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09070202.jpg" target="_blank"><img src="http://blog-imgs-32.fc2.com/s/a/k/sakuraxren/09070202.jpg" alt="09070202.jpg" border="0" width="150" height="149" class="corner iradius25"/></a>

各エフェクトは下記の通りです。
 iradius30 角丸にする
 ishadow40 影をつける
 ishade25 浮き出たようなエフェクトをかける
 inverse 凹んだようなエフェクトをかける
 iborder2 画像の回りをラインで囲む 数字は太さ
 icolorff0000 画像の回りのラインの色 
 iradiae1010 それぞれの角を丸くするかしないか 
 数字は左から「左上」「右上」「左下」「右下」 
 「1」は角を丸くする 「0」は角を丸くしない
※黒字は「class="corner"」  青字は「class="corners"」で使用。

↓一番下の3つのエフェクト(青字で書いてあるもの)は「justcorners.js」が必要です。
09070201.jpg 09070202.jpg  09070201.jpg
class="corner iradius25" class="corner iradius20 ishadow40" class="corner iradius48 ishade33"
09070202.jpg 09070201.jpg 09070202.jpg
class="corner iradius32 ishade50 ishadow25" class="corner iradius24 ishadow33 inverse" class="corner ishadow20"
09070201.jpg   09070202.jpg 09070201.jpg
class="corner ishade50" class="corner ishade50 ishadow50" class="corner ishadow40 inverse"
09070202.jpg   09070201.jpg 09070202.jpg
class="corners iborder2 icolor000000" class="corners radiae1001" class="corners iborder3 icolorff0000 iradiae0110"




関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 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 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
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!
このページのトップへ