湘南フレームは下町DPEの姉妹店。潮風をあびながら、写真の角をちょきちょきちょき・・と切り抜きました。どんな画像も簡単に角丸になっちゃいます。写真ができあがるまでにアイスコーヒーをどうぞ。
 
 
■動作確認環境
・Windows Internet Explorer 5.0以上
・Windows Netscape 7.1以上
・Windows Firefox 1.0.7以上
・Windows Opera 7以上
 
・MacOSX Safari 1.0以上
・MacOSX Netscape 7.02以上
・MacOSX Firefox 1.0.6以上
・MacOSX Camino 0.8.4以上
 
 
 
 
 
 
 
 
湘南フレームには、下記のすべてのフレームが入っています。フレームをつけたい画像の<img>タグに「class="ShonanXXXXX"」という湘南クラスを設定するだけで使用できます
 
 
 
● オリジナル画像
<img>
 
これが元の画像。ふつうの四角形の画像っす。
ちなみにイラストは、僕の友達、プチデンソーの働く男。
 
 
● 角丸 1ピクセル
<img class="ShonanRound1">
 
元の画像の角を1pxだけ削った、ひかえめ角丸です。
 
 
● 角丸 3ピクセル
<img class="ShonanRound2">
 
画像の角を、しょりしょりしょり、と3px削る。これが湘南スタンダードっす。
 
 
● 角丸 4ピクセル
<img class="ShonanRound3">
 
画像の角をさらにしょりしょり、4px削りました。小さい子が手を切らないように、絵本角丸です。
 
 
 
 
● 写真フレーム
<img class="ShonanPhoto">
 
写真のまわりに白い縁。なつかしい感じのする写真フレームです。
 
 
 
 
● ポラロイドフレーム
<img class="ShonanPola">
 
これはポラロイド風の写真フレーム。
 
 
 
 
 
 
● シャドウフレーム
<img class="ShonanShadow">
 
影と感じさせないのが本物の影。そんなモットーを頑なに守ってきた湘南スタンダードシャドウです。
 
 
● 角丸シャドウフレーム
<img class="ShonanRShadow">
 
角丸とスタンダードシャドウの合わせ技。誰も気づかないようなささやかな影に夏を感じるっす。
 
 
★ セロファンアクセサリ
<img class="ShonanCell">
 
写真をペタリとはりつけるセロファンアクセサリです。壁にぺたぺた、と。
 
 
★ 角丸シャドウ＋セロファンアクセサリ
<img class="ShonanRShadow ShonanCell">
 
セロファンアクセサリは、他のフレームともドッキングできちゃうんだ。クラス属性に２つのクラスを半角スペースをあけて書くんだよ。
 
 
 
★ ポラロイド＋セロファンアクセサリ
<img class="ShonanPola ShonanPhotoCell">
 
写真フレームとセロファンをドッキングするときは、"ShonanPhotoCell"クラスを使ってね。
 
 
 
 
 
 
● そのほかサンプルページはこちら (Click!)
 
 
 
 
 
 
 
 
湘南フレームをダウンロードして解凍すると、下記のようなフォルダが作成されます。
"frame"フォルダを湘南フレームを使いたいHTMLファイルと同じフォルダ内にまるごとアップロードしてください。
湘南フレームを使いたいHTMLファイルの</body>の直前に
「<script src="frame/shonan_frame.js"></script>」を、追記するだけでインストール完了です。
詳しくは、"readme.txt"をお読みください。
 
 
■ファイル構成
 
■ファイルダウンロード
shonan_frame.zip
 
■フォルダ（ディレクトリ）
frame
湘南フレームフォルダ（ディレクトリ）
 
■ファイル（フォルダ）
index.html
湘南フレームを使ったサンプルページ
readme.txt
湘南フレーム説明ファイル
frame/shonan_frame.js
湘南フレームJavaScript
frame/XXXX.png
湘南フレーム用画像ファイル
 
 
■ 設置手順
1.
湘南フレームの読み込み方法
「湘南フレーム」を使いたいHTMLファイルのタグの終わりに
「<script src="shonan_frame.js"></script>」を追記してください。
2.
湘南フレームのアップロード
「湘南フレーム」を使いたいHTMLと同じフォルダに、"frame"フォルダをまるごとアップロードしてください。
3.
湘南クラスの設定
「湘南フレーム」を設定したい<img>タグに、class="ShonanXXX"という湘南クラスを設定してください。
例） <img src="xxx.jpg" class="ShonanRound1">
4.
角丸用背景色の設定
湘南フレームの角丸部分を表現するために、背景色を設定するクラスが必要です。
「湘南フレーム」を使うHTMLに、背景色のみを設定するためのCSSを用意してください。
下記のスタイルをHTMLファイルの<head>〜</head>に記述します。
<style type="text/css">.BgColor{ background-color: (背景色) }</style>