皆さん黄金比ってご存知ですか？
伝承によるとギリシアの時代から使われていたという、「もっとも美しい」とされる比率です。
不思議なことにアンモナイトのような巻貝や、植物の葉の生え方もこれで計算できる、というか自然に構成されてるんです。なにか神秘を感じますよね。
大昔から絵画などに利用されているこの黄金比、もちろんサイトデザインにも使えます。

例えばサイドバーの幅を決めるとき、みなさんどうしてるでしょうか？
機能から？適当に？それもいいのですが、黄金比を使っても求められます。

黄金比とは？

具体例の前に軽く黄金比の説明を。

定義は、「a, bの長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b」です。

すいません、この図は適当なのであてにしないでください。

で、頭のいい人たちがごにょごにょすると、これは以下の式で表せます。

これはだいたいでいうと、1:1.168です。もっとだいたいでいうと5:8。

詳しくはここを：黄金比 – Wikipedia より

うん、小難しいですね。あ！数学嫌いな人、あきらめないでください。さっさと具体例示しますから。

具体例：サイドバー

要するにサイトのデザインをするとき、サイドバーの幅を求めるとすると、

( 横幅 – x ) : x = 1.168 : 1

で求まるわけです。

下図が横幅950pxとして計算したときの例。

このとき、950:363（緑＋青）がだいたい黄金比です。
これじゃあ太すぎるだろってことで更に分割して、224（緑）:139（青）もだいたい黄金比です。
幅950pxのサイトだったら、サイドバーの幅は224pxだときれいかもしれないですね。

縦はコンテンツ量によって変わるでしょうが、950:587も黄金比です。
そこから同じようにして求めたのが、86pxというヘッダ。

黄金比のサイトデザインへの応用

もっと応用すると、マージンやナビゲーションの幅にも使えます。
こちらで紹介されているようなので参考にして下さい。
黄金比をサイトのデザインに取り入れる簡単な３つの方法｜コリス

ちなみに上記ページで紹介されている、「5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール」の数列は実はフィボナッチ数列といいまして、こちらも黄金比に収束していくという大変面白い性質を持っている……のですが、そこまで書くともはや何のブログか本当に分からなくなってしまうので泣く泣く割愛します。

最初からバランスのいいデザインができる人は、感覚的にこの比率が感覚で分かるんでしょうね。
どうしてもなんだかバランスが悪い人は、あちこち黄金比を利用してみましょう。

やっとデザインの話が書けてうれしいですが、なんだか思った以上にO型っぽい解説になりました。

いやぁ、数学って美しいな……（理数オタク）
黄金比・フィボナッチ数列に関わらず、デザインってけっこう数字で計算できるものなんですよ。
だからそこ、私がPhotoshopを開いてエアーそろばんしながらガイドを引いてても笑わないように！

AjaxといってもjQueryのおかげでだいぶ難しいものではなくなりましたよね。デザイナでもサーバサイドが書けるプログラマと組めばわけはないでしょう。

しかし、ちょっとハマったのが上述した現象。

• HTMLからJavaScript(jQueryベース)でAjax通信で値をPOST
• 受け取ったPHPは$_POSTに入っている変数をそのまま返す
• 返すデータ値はプレーンテキスト
• 受け取ったデータ値をJavaScriptでアラート表示

こんな条件の場合、IEだけerrorHandleが返ってきました。はて。
コード例を示しましょうか。

Ajax通信部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(function(){
	$("button").click(function(){
		$.ajax({
			type: 'POST',
			data: {
				"id" : $(this).parent().attr('name'),
				"answer" : $(this).attr('class')
			},
			datatype: "text", // 返ってくる値の形式をTEXTに指定
			url: 'return.php',
			success: handleSuccess, // 通信成功時の処理
			error: handleError, // 通信失敗時の処理
		});
	});
});
// 通信成功時の関数
var handleSuccess = function(data, datatype) {
	alert("通信に成功しました - " +data);
}
// 通信失敗時の関数
var handleError = function(XMLHttpRequest, textStatus, errorThrown) {
	alert('通信に失敗しました - ' + textStatus);
}

サーバ側PHP：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
	// POSTされた値を取得
	$ID = $_POST['id'];
	$answer = $_POST['answer']; 
 
	returnResults();
 
	// 結果を返す変数
	function returnResults() {
		global $ID;
		global $answer;
		// $resultsに結果を格納してプレーンテキスト形式で返す
		$results = 'posted: ' . $ID . ' - ' . $answer;
		header('Content-type: text/plain'); 
		print($results);
	}
?>

必要ない部分はかなり削ってシンプルにしましたが大体こんな感じ。
で、動かすと次のようにアラートの動作が分かれました。

Firefoxの場合：

通信に成功しました – posted: 00002 – yes

InternetExproler8の場合

通信に失敗しました – parseerror

まさかサーバサイドスクリプトがローカルのブラウザを左右するとも思えず、ずっとJavaScriptを疑っていたんですが、原因はPHPの14行目にありました。

誤：

1

header('Content-type: text/plain');

正：

1

header('Content-type: text/plain; charset=utf-8;');

HTTPヘッダはちゃんと書きましょう、って話ですね……
Apatcheの設定にもよりますが、文字コードまで指定しないとIEではパースエラーを返すらしいです。
たいへん勉強になりました。でもやっぱりIEは爆発しろ。

デザイナのくせにまともにデザイン関連のエントリできなくてすみません。今日はとうとうサーバサイドスクリプトまで範囲が広がりました。このブログはどこへ行くんだろう。

またもやマニアックでニッチな話題を。

MTに標準でついているWYSIWYGエディタって正直使えないですよね。
クライアントのMTに正しい文法で書いてくれるWYSIWYGエディタを入れようと探していて見つけたTinyMCE。これがかなり使えるんですが、画像アップローダMCImageManagerは有償でした。
説得して導入が決定したのですが、このインストールにハマって……
日本語で詳しく解説している記事が見つからなかったので、またもや自分メモに残しておきます。

ちなみに、TinyMCEのインストールは完了しているものとして話を進めます。こちらは簡単だったので。

1. MCImageManagerのインストール

購入したらダウンロードパスが届きますので、ファイルを一式手に入れます。
解凍してできる[imagemanager]というディレクトリをそのまま
/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins
にアップロード。

2. TinyMCEに認識させる

/mt/mt-static/plugins/TinyMCE/js/initialize.js
の46行目あたり、pluginsの一番後ろにimagemanagerを書き加えましょう。

1

plugins : "safari,pagebreak,style,......................,imagemanager",

3. 日本語化

http://tinymce.moxiecode.com/download_i18n_imagemanager.php
からJapanese Language Package(ja.XML)をダウンロードして
/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/language/im
にアップロードします。

4. MCImageManagerの設定

/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/config.php
にて、ご希望により設定を書き換えます。
私は以下の3点を書き換えました。

1. $mcImageManagerConfig['general.language']を’ja’に（日本語化）
2. $mcImageManagerConfig['filesystem.rootpath']にファイルを保存する絶対パスを記述
3. $mcImageManagerConfig['filesystem.path']に画像を保存したい絶対パスを記述

2, 3を設定しないと、/imagemanager/以下に画像が保存されて少し気持ち悪いです。
/mt/mt-static/files/とかでいいでしょう。
2,3で設定したディレクトリは、属性を707にしておいてください。【重要】

3. セッション情報を記述

/mt/mt-static/plugins/TinyMCE/lib/jscripts/tiny_mce/plugins/imagemanager/login_session_auth.php
の頭、// Some settingsとコメントがある部分にMTのIDとパスワードを設定します。

1
2
3

	$msg = "IDとパスワードを入力して下さい";
	$username = "ユーザ名";
	$password = "パスワード";

これをしておかないと、誰でも画像をアップできたり削除できたりしてしまうそうです。

さて、ここまで成功したらTinyMCEのimageボタンを押したときのダイアログにボタンが表示されるはずです。

これを押すと、MCImageManagerが起動して画像の管理ができるようになります。

このMCImageManager、アップした画像の簡単な編集できたり、お気に入り・履歴機能なんかも備えていてかなり優秀です。MTのプラグインとしてじゃなくてもスタンドアローンでも動くし、PHP版と.NET版があるので重宝しそう。35€ですが、それなりの価値はあると思います。

しかしなんでこうMovableTypeって使いづらいんでしょう。
早くWordpressが標準になればいいのになぁ。あと関係ないけどIEは爆発すればいいのになぁ。

さて、今回は「0のときは●●、1のときは●●、2のときは●●」をクールに書いてみたい！がテーマです。今まで覚えられずに避けてきたswitch構文を使います。

まずやりたいことは前回のエントリーに書いたとおり、

• 2つ目のラジオボタンがオンのときはプルダウンを有効に
• それ以外のときはプルダウンを無効に
• 3つ目のラジオボタンがオンのときは新規アドレス入力を表示

です。

イメージ図

とりあえず普通にif文で振り分けたときの書き方がこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が0のとき
if(v==0) {
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
// 値が1のとき
} else if(v==1) {
		$("#select_addressbook").removeAttr('disabled'); // プルダウンからdisableをはずす
		$('#newAddress').hide(); // 新規アドレス入力を非表示
// 値が2のとき
} else if(v==2) {
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').slideDown(); // 新規アドレス入力を表示
}

これが分からない人はコメントください。デスマーチ抜けたらその辺から解説します（泣

さて、これでも良いといえば良いんですが、せっかく「変数の値によって処理を振り分ける」Switch構文があるのだから、やってみたい！覚えてみたい！

というわけでおさらいしました。基本構文がこちら

1
2
3
4
5
6
7
8
9
10
11
12
13

switch (変数) {
	case 1:
		変数が1の時の処理;
		break; // 抜ける
	case 2:
		変数が2の時の処理;
		break; // 抜ける
	case 3:
		変数が3の時の処理;
		break; // 抜ける
	default:
		それ以外の処理;
}

分かりやすいように変数を数字にしていますが、もちろん文字列でもいいですよ！そのときはcaseのあとの値をダブルクオーテーションなどで囲むのを忘れないで下さい。

さて、では最初のif文をswith文に書き直してみるとどうなるでしょうか。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

switch (v) {
	case 1:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
		break;
	case 2:
		$("#select_addressbook").removeAttr('disabled'); // プルダウンからdisableをはずす
		$('#newAddress').hide(); // 新規アドレス入力を非表示
		break;
	case 3:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').slideDown(); // 新規アドレス入力を表示
		break;
	default:
		$("#select_addressbook").attr('disabled','disabled'); // プルダウンをdisable
		$('#newAddress').hide(); // 新規アドレス入力を非表示
}

うん、やっぱり視認性が高いと言うか、ぱっと見分かりやすいですね。特に分岐が10以上とかになっちゃうときには、いちいちif文書いてられないと思うのでswitch文が大活躍です。

私もこれを機会にきっちり覚えて、適所で使えるようになろうと思います。

ちなみに、実際のページで動かすには「ページがロードされたとき」と「ラジオボタンが変更されたとき」の両方で走らせたい処理なので、function（関数）として定義して呼べるようにします。そのソースはこちら。

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

$(function(){
	// 変数の定義
	var v = new String();
	// 関数の定義
	var changeAddress = function(){
		v = $('input[name="address"]:checked').val();
		switch (v) {
			case "0":
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').hide();
				break;
			case "1":
				$("#select_addressbook").removeAttr('disabled');
				$('#newAddress').hide();
				break;
			case "2":
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').slideDown();
				break;
			default:
				$("#select_addressbook").attr('disabled','disabled');
				$('#newAddress').hide();
		}
	}
	// ラジオが変更されたときに呼ぶ
	$('input[name="address"]').change(changeAddress);
	// ページが読み込まれたときに呼ぶ
	changeAddress();
});

ああ、こんなことしてる場合じゃ……！デスマ抜けたらデモページでもあげようと思います。しばしお待ちを！

実は今作っているHTMLモック（模型みたいなもの）をまんま例に出してしまいますが、何がしたいかと言うと、ラジオボタンが「新しい配送先」のときだけ配送先入力のテーブルを出したいんです。

前回までのお話でラジオボタンをクリックしたときのイベント、ラジオボタンの値のとり方は分かっているものとして、普通if文で書くとこうなります。

1
2
3
4
5
6
7
8
9
10

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が2だったら
if(v == 2) {
	// 新規アドレス入力フォームを表示
	$('#newAddress').slideDown();
} else {
	// それ以外だったら非表示
	$('#newAddress').hide();
}

なんですが、
たまにelseまで含めて1行で書いているのを見かけます。

かっこいい！やってみたい！けど、Google先生にさえなんて聞いたらいいのか分からない！

というわけで、この機会にうちのSE様に聞いてみました。
「三項演算子」というらしいです。

書き方はこう。普通は

1
2
3
4
5

if(評価する式) {
	真の場合 ;
} else {
	偽の場合 ;
}

これを三項演算子で書くと、

1

(評価する式) ? 真の場合 : 偽の場合 ;

クール！とても視認性がよくなる気がします。コロンとセミコロンに気をつけてくださいね。

文字だと分かりづらいかもしれないので、
一応一番最初のif/else文を三項演算子に直してみましょう。

1
2
3
4

// ラジオボタンの値を変数vに格納
v = $('input[name="address"]:checked').val();
// 値が2だったら
(v == 2) ? $('#newAddress').slideDown() : $('#newAddress').hide();

一行であらわせました！クール！

もちろん、式を評価したあとの処理が長いときなどには
普通のif/else文のほうが見やすいこともあるでしょう。
それと三項演算子は変数を返せたり、もう少し奥が深いです。
場合によって使い分けられるとカッコイイですね！

……しかし、真の地獄は（ｒｙ
すっかり忘れてたんですが、最初の図を見ていただくとラジオボタンが3つありますよね。
3番目を選んだときは上記の処理でいいんですが、2番目を選んだときは隣のプルダウンをenableに、それ以外はdisableにしたいんでした。

もちろんif/else文で書けば簡単に書けます。
でもせっかく覚えた三項演算子はelseに条件を指定できないので使えそうにありません。ガッデム。
というわけで次回は、私がずっと苦手で避けてきているswith文をおさらいしたいと思います。

1. jQueryでのラジオボタンの取得

jQueryをいじったことがない人にはさっぱりでしょうが、
通常、jQueryはこんな風にオブジェクトをとります。

1

$('セレクタ名')

セレクタ名というのは要するに、IDとかクラスのことです。
具体的には

1
2

$('#mainArea');
$('.wrapper');

となるわけですね。

ところが、ラジオボタンに関してはちょっと違ったか書き方があります。

1
2

$('input[type="radio"]');
$('input[name="名前"]');

というとり方ができます。前者が全てのラジオボタンを取得、後者は名前で絞込みです。
（ちなみにjQuery1.3以降での書き方です。）

2. jQueryでのイベントのとり方

よって、「changerという名前のラジオボタンの選択が変わったとき」は次のようにかけます。

1
2
3

$('input[name="changer"]:radio').change(function(){
	// 処理内容
});

3. ラジオボタンの値のとり方

ところで、前段の:radioというのは「全てのラジオボタン」を指します。
選ばれているラジオボタンを取得したいときは、:checkedを使用します。

そして、特定のオブジェクトの値をとりたいときはval()という関数が使えます。

まとめると……
「changerというラジオグループの現在選ばれている値」は以下のように記述します。

1

$('input[name="changer"]:checked').val();

どうでしょうか？飛ばしすぎましたか？
実は、本当の地獄はこれからです……。
次はこの値を使って、処理を変える構文を書きたいと思います。
if文なら簡単なんだけど、覚えたいことがあって…… Share/Save]]> http://blog.moma-labs.com/2009/10/333/feed 1 http://blog.moma-labs.com/2009/10/333 http://feedproxy.google.com/~r/MomaLabs/~3/rhbQz4Hnpew/301 http://blog.moma-labs.com/2009/08/301#comments Fri, 07 Aug 2009 08:19:23 +0000 matumoto http://blog.moma-labs.com/?p=301

三度の飯よりiPhoneが好き！松本です。iPhoneがつながらないと誇張抜きでテンパリます。

かなりクリーンなソースでiPhoneのトグルスイッチを実現しているコードがあったのでご紹介します。なんてクールなんだ！ iPhone向けのサイトも多くなってきている昨今、これからガシガシ役に立つんじゃないでしょうか。

百聞は一見にしかず、まずはデモサイトをご覧ください。

ダウンロードとインストール

iPhone Toggle Switches // Elijah Millerの【Download】から必要ファイルを一式落とします。
jQuery版とprototype版が用意されてるのも素晴らしいですね。私はjQueryに傾倒しているのでjQueryを選択。

HTMLの内で次のようにJavaScriptとCSSを読み込みます。

1
2
3
4
5

<head>
	<script type="javascript" src="jquery/jquery-1.3.2.js" /></script>
	<script type="javascript" src="jquery/iphone-style-checkboxes.js"></script>
	<link rel="stylesheet" href="style.css" />
</head>

簡易記述なのでMETAとかはすっ飛ばしています。

HTMLの記述

これがもうシンプルで素晴らしい。非常にクリーンなXHTMLで文法的にも超正しいです。

labelはちょっとした手間でUIに多大な影響を与えます。ぜひマスターしてください。

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
32
33
34
35
36
37

  <ol class="on_off">
  	// 通常のトグル
    <li>
      <label class="left" for="on_off">通常のトグルスイッチ</label>
      <input type="checkbox" id="on_off" />
    </li>
   // デフォルトをオン
    <li>
      <label class="left" for="on_off_on">通常のトグルスイッチ（デフォルト：オン）</label>
      <input type="checkbox" checked="checked" id="on_off_on"/>
    </li>
  </ol>
 
  <ol class="css_sized_container">
  	// CSSでサイズ指定＋ハンドル
    <li>
      <label class="left" for="css_sized_container">CSSでサイズ指定＋ハンドル</label>
      <input type="checkbox" id="css_sized_container"/>
    </li>
  </ol>
 
  <ol class="long_tiny">
  	// 長いラベル・短いラベル
    <li>
      <label class="left" for="long_tiny">長いラベル・短いラベル</label>
      <input type="checkbox" id="long_tiny"/>
    </li>
  </ol>
 
  <ol class="onchange">
  	// 自動トグル切り替え
    <li>
      <input type="checkbox" id="onchange"/>
      <br />
      <p>チェックボックスがチェックされている？ <strong><span id="status">...</span></strong>.</p>
    </li>
  </ol>

見ていただくと分かるんですが、全部チェックボックスなんです！超クリーン。
PHPプログラマとかのデータのやり取りも困らなそうで大変助かります。

JavaScriptの記述

もう一度内にJavascriptを記述します。設定のようなものです。
ここはjQueryを理解していないと若干難しいかもしれませんね……
今は時間がないのでさらっと解説しますが、ご要望があれば全文解説します。

1
2
3
4
5
6
7
8
9
10
11
12
13

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $('.on_off :checkbox').iphoneStyle();
      $('.css_sized_container :checkbox').iphoneStyle({ resizeContainer: false, resizeHandle: false });
      $('.long_tiny :checkbox').iphoneStyle({ checkedLabel: '長いラベルテキスト', uncheckedLabel: '短い' });
 
      var onchange_checkbox = $('.onchange :checkbox').iphoneStyle();
      setInterval(function toggleCheckbox() {
        onchange_checkbox.attr('checked', !onchange_checkbox.is(':checked')).change();
        $('span#status').html(onchange_checkbox.is(':checked').toString());
      }, 2500);
    });
  </script>

これで大方動くんじゃないかと思います。素晴らしいスクリプトを提供してくださったElijah Millerさんとオリジナル開発者(?) AWAND-WINNG FJORSさんに感謝！

Thank you Elijah Miller and AWAND-WINNG FJORS!!

①、②など丸で囲まれた数字はよく使いますが、これはユーザーの閲覧環境で変わってしまう機種依存文字で、見る人によっては正確に表示されない場合もあります。
なるべく使わないのが一番なのですが、どうしても使わなければならない！という時があるかもしれません。
そんな時には次のように書きましょう。これでユーザー側に左右されずちゃんとした丸囲み数字が表示されるはずです。あーよかった。

丸囲み数字はこう書く

下のように頭が&#93で始まるコードを書くと・・・

1
2
3
4

①／②／③／④／⑤
⑥／⑦／⑧／⑨／⑩
⑪／⑫／⑬／⑭／⑮
⑯／⑰／⑱／⑲／⑳

こんな風↓に表示されます。

①／②／③／④／⑤
⑥／⑦／⑧／⑨／⑩
⑪／⑫／⑬／⑭／⑮
⑯／⑰／⑱／⑲／⑳

まあ今となってはUTF-8も主流になっていますし、そんなに気を使う必要もないのかもしれませんが、いろんな環境下で見ている人のことを考えるとやっぱり気をつけておいた方がいいのかな～と思います。。

こちらから抜粋させていただきました～。
→ http://allabout.co.jp/internet/hpcreate/closeup/CU20051102A/

Wordpressを使用していて、Flashなどの記事をしたいときSWFの埋め込みについて
足踏みをしてしまったので、今回はその解決方法をメモ的にご紹介致します。

準備

まずはこちらのWordpress用のプラグインをダウンロード、インストールします。

ダウンロードはこちら

埋め込み方法

インストール後以下を記述します。

記述例：

1

[SWF]http://blog.moma-labs.com/wp-content/uploads/2009/07/piece.swf,500,200[/SWF]

ためしにひとつだけSWFを埋め込んでみます。

これだけの手順ですぐにswfファイルが埋め込めるようになります！

ちなみに今回埋め込んだswfファイルは
こちらのwonderflのslowさんよりソースを
お借りし,少し改変させて頂きました。

Action Script 3を勉強中なのですが勉強をするにあたり非常に参考になります！

Thanks for slow !!!

1.必要なファイルをダウンロードする。

下記サイトページ上部の　”Download easySlider1.5.zip”　をクリックしてファイルをダウンロードしてください。
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

使用するファイルは

・0.1html or 0.2html or 03.html と
・js/jquery.js と
・js/easySlider.jsと

cssとjsは各htmlに記述されています。実際に使う場合は別ファイルとして読み込んであげてください。下記がソースです。

css

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

/* Easy Slider */
 
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider, #slider li{ 
		/* 
			define width and height of container element and list item (slide)
			list items must be the same size as the slider area
		*/ 
		width:696px;
		height:241px;
		overflow:hidden; 
		}
	span#prevBtn a {
		background:	url(images/a_btn.gif) 0 0 no-repeat;
		background:	#222;
		display:block;
		height:50px;
		width:150px;
		float:right;
		}
	span#nextBtn{}					
 
/* // Easy Slider */

js

1
2
3
4
5

<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});
</script>

2.スライドボタンのカスタマイズ

必要があれば　”nextボタン”　や ”Previousボタン” の画像化も簡単にできます。

ご丁寧にも

1
2

span#prevBtn {}
span#nextBtn{}

と、ｃｓｓが用意されているので、span#prevBtn　等を　span#prevBtn　a　として、

1
2
3
4
5
6
7
8
9
10

	span#prevBtn a {
　　　　　　　text-indent:　-10000em;
                over-flow: hidden;
                font-size: 0.1px;
		background: url(images/???.gif) 0 0 no-repeat;
		background: #222;
		display: block;
		height: 50px;
		width: 150px;
          }

などと、書き換えれば画像ボタンの完成です。

テキストを書き換えたい場合は、”easySlider.js”

1
2
3
4
5
6
7
8

var defaults = {
			prevId: 		'prevBtn',
			prevText: 		'Previous',
			nextId: 		'nextBtn',	
			nextText: 		'Next',
			orientation:	'', //  'vertical' is optional;
			speed: 			800			
		};

の

1
2

prevText: 		'Previous',
nextText: 		'Next',

を書き換えれば、テキストを変更できます。

これでがeasy slideが実装されました。
非常にかんたんで見栄えもいいので、是非活用して見て下さい。（※ ie 6での検証は行っていないので使用する場合は自己責任でお願いします。）