WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介

jQueryでモーダルウィンドウのプラグインを自作したので公開します。

管理人 — Sun, 05 Jun 2011 23:00:31 +0000

世の中にはjQueryで動くモーダルウィンドウプラグインがたくさんあるのに、自作しました！
理由は、あがってくるデザインを実現するには自作するしかなかったからです。
せっかくなので公開します。

設定方法

Javascriptの設定

モーダルウィンドウを表示させるアンカーにクラス指定

アンカーのクラスに「modal」を指定すればモーダルウィンドウが表示されます。

モーダルウィンドウのサイズ指定

サイズはCSSもしくは、アンカーのhrefで指定出来ます。
画像の場合はhrefのリンク先の画像サイズをそのまま返しますが、
外部HTMLやページ内のコンテンツにはサイズ指定が必要です。

表示させるファイルやコンテンツの後に「?」を入れて、「width」「height」を指定します。

※パラメーターは最初「?」だが、その後は「&」で繋げる

スクロールを出す

サイズの指定方法と同じですが、イコールの後に「yes」を入れるだけです。
ただ、縦軸にしかスクロールしません。（個人的に横スクロールは使いにくいので入れてません！）

内部構造

HTML構造

//透過の背景

	
	//読み込まれた要素が入る
	
	//閉じるボタンの画像

CSS指定

hrefでサイズ指定していない場合は、CSSの#displayContentで指定したサイズが適用されます。

#overLay {
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: #fff;
	z-index: 500;
}
#displayContent {
	position: absolute;
	top:50%;
	left:50%;
	margin: -50px 0 0 -50px;
	padding: 20px 40px 20px 20px;
	_padding: 20px;
	width: 100px;
	height: 100px;
	z-index: 600;
}
#getContents {
	padding: 10px;
	width: 100%;
	height: 100%;
	background: #fff;
	border: solid #ccc 2px;
}
#closeBox {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
}

自由に改変して下さい

構造は簡単なので自由に改変して、自分のデザインに合わせた動きを実装してみて下さい。

自動ビジュアル切替jQueryプラグイン – autoVisualSwitch.js()

管理人 — Sun, 15 May 2011 23:00:26 +0000

仕事でメインビジュアルを自動で切り替えたいという要望があったのでプラグインを作成しました。
昔ならFlashでしか出来ないと思っていたことが、Javascriptで出来るのはSEO・メンテナンス性を考えても嬉しいことです！

ファイル構造

HTML

全てを包括するid=”mainVisual”の中に、大きい画像用のid=”autoVisual”とナビゲーションのid=”autoNav”でHTMLを構成します。
id=”mainVisual”は直接JSと関係が無いので、名称を変えてもOKです。

大きい画像にidとURLリンクを設定します。ナビゲーションには対象となる大きい画像のidをhrefに設定します。
JSがオンの場合はナビゲーションにも大きい画像のURLがリンクされます。
逆にJSがオフの場合にはページ内リンクになるので、クリックすると大きい画像が切替ります。

CSS

HTMLさえしっかり構成されていれば、CSSで自由にレイアウト出来ます。
今回は上に大きな画像、下にナビゲーション画像を置くレイアウトにしています。

#mainVisual {
	margin: 0 auto;
	width: 800px;
}

#autoVisual {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
}

#autoNav {
	margin: 10px 0 0 -4px;
	height: 100px;
	list-style: none;
	overflow: hidden;
	zoom: 1;
}

#autoNav li {
	float: left;
	_display: inline;
	margin-left: 4px;
	width: 197px;
	height: 100%;
}

設置方法

jQueryとプラグインの読み込み

jQueryを先に読み込ませ、その後「autoVisualSwitch.js」のプラグインを読み込ませます。

プラグイン設定

メインビジュアルを切り替えるナビゲーションのid=”autoNav”にプラグインを設定

その他の設定

ナビゲーションにホバーした時に切替る画像の早さと、自動で切替る時の早さを設定出来ます。

speedが切替る画像の早さです。animateなどのスピードを決める「slow」「normal」「fast」が使えます。
もちろん数値も使えます。
intervalは自動で切替るスピードの設定です。こちらは数値のみです。

$(function(){
	$("#autoNav").autoVisualSwitch({
		speed:"normal",
		interval:100
	});
});

最後に。。。

やっと更新出来ました！半年近く放置していたので、達成感があります。
二週間に一度は更新していきたいな～。

更新履歴

2011.07.07: 読み込み直後、メインビジュアル一番下の要素が重なりの一番上に来ていたので、最初の要素にz-index:50を与えました。
「autoVisualSwitch.js」の14行目

サイトデザインを一新！HTML5+CSS3にて構築

管理人 — Sun, 21 Nov 2010 15:15:02 +0000

サイトをリニューアルしました！HTML5とCSS3で構築しています。
でも、MozillaかWebkit系でしかまともに見れないのが残念。。。

HTML5について

要素が増えたので、正しいマークアップが出来ているか心配。
今までdiv、p、ulだけで構成していたような気がする。。。

head要素内はシンプルになった。
ドキュメントタイプがだけになったので、strictやtransitinalかを迷わなくていい！

CSS3について

デザインの多くをCSS3で実現しました。
例えば、右上の「about me」のボタンもCSS3のグラデーションです。
background: -webkit-gradient(linear, left bottom, left top, from(#5b5d6f), to(rgba(111,113,132,1)));
background: -moz-linear-gradient(#5b5d6f, rgba(111,113,132,1));

FireFoxとSafariもしくはChromeだと左側に90度回転したロゴが出ています。
これもCSS3でテキストを装飾しています。
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

その他、テキストやボックスにシャドウを入れられます。
CSSだけでデザインを一新出来るのが魅力で！

その中でも一番「いい！」と思ったのが、Multiple backgroundsです。
複数のbackgroundを1つの要素に設定出来るので、ヘッダーとフッターにウィンドウ全体に広がる画像があった場合、body要素に2つの背景を指定するだけでOK！
デザインを意識しすぎづにマークアップが出来ます！

参考にしたサイト

http://www.html5.jp/tag/elements/index.html
http://www.htmq.com/css3/index.shtml
http://leaverou.me/ft2010/#intro

Twitterの色んな値をJSONで取得する方法

管理人 — Fri, 18 Jun 2010 17:49:32 +0000

今後必要になるだろうと思いTwitterの値の取得方法を調べてみました。
使用するのは、TwitterAPIとjQueryです。

TwitterAPIの値をみる

まず、TwitterAPIの中身を覗いてみよう。
下記URLの「アカウント」に自分のIDを入れて開くと。。。

http://api.twitter.com/1/statuses/user_timeline/アカウント.json

ずらっと表示さた文字がTwitterAPIの中身です。

値は全て配列になっている

文字列の嵐だがよくみてみると、配列になっている。
例えば。。。

“source”:”web”,”created_at”:”Fri Jun 18 07:28:41 +0000 2010″

はwebでツイートしてその時間が表されています。
ですので、中身は簡単に理解できると思います。

$.getJSONでTwitterAPIの値を取得

先ほどのTwitterAPIの値を表示させるには$.getJSON関数を使用します。
これはjQueryの関数で、外部サイトの値を取得することができます。
取得したデータはJSONとして評価されます。





Twitterの色んな値をJSONで取得する方法

ソースの簡単な解説

9行目: account変数に入れたTwitter IDのツイートが表示されます。
13行目 data[0].user.description: 最初の配列の”user”の”description”の値を取得。
これは紹介文のことです。
15行目 – 22行目: TwitterAPIの配列をeachで上から順番に取得します。
変数txtに”item”の値を代入します。これはツイートです。
ツイートにリンクがあれば.replaceで設定しています。
最後のif文は表示数設定です。

色んな値を取得してみる

上記のJSONのdataにTwitterAPIの配列が格納されているので。。。

data.値

と「値」の部分を変えるだけで好きな値を取得出来ます。

Google MAPを簡単に表示させるjQueryプラグイン「jquery.easyGmap.js」

管理人 — Sun, 16 May 2010 23:00:47 +0000

仕事でGoogle Maps APIを使う機会がありました。実は今回が初めての使用です。
率直な意見を言うと。。。面白い！！色んな関数が用意されているのでカスタマイズが楽しい！
そこで今回はGoogle Maps APIと連動したプラグインを作成しました。

「jquery.easyGmap.js」とは？

仕事でGoogle Maps APIを使ってみたところ一点不便なことがありました。
それはページごとに違うMapの見せ方をしたい場合にJavascriptのソースを作り直さなければならないことです。
それを解決するために「jquery.easyGmap.js」プラグインを作成しました。
これは任意のクラスを指定するだけで、住所を読み取りMapを表示させることが出来ます。

導入方法

まず初めにGoogle Maps APIから登録を行い「キー」を取得します。
登録・キーの取得はこちらから。
http://code.google.com/intl/ja/apis/maps/signup.html

Javascript

まず上記ページから取得したコードを記載します。
次にjQueryプラグインなのでjQueryを読み込ませます。
プラグインを読み込ませた後に、指定範囲を記載します。
サンプルでは「body」要素にしてますのでページ全体です。

HTML

HTMLは本当にシンプル！
親要素に「gMap」クラスを指定し、子要素に住所を記載した「gMapAddress」クラスを挿入します。
これだけでOK！記載した住所の位置が表示されます。

大阪市浪速区

カスタマイズも可能！

z: 最初に表示されるzoomの値を設定します。
初期値は15
m: マーカーの画像を指定出来ます。指定方法は下記サイトをご覧下さい。
http://googlemaps.googlermania.com/google_maps_api_v2/2-2.html
b: 吹き出しの表示方法について指定します。初期値はクリックで表示します。
t: 住所が見つからなかったときの文言を指定します。

カスタマイズ後のソースサンプル

現在吹き出しには記載した住所が表示されています。
まだそこをカスタマイズすることが出来ません。
今後かな。。。

参考サイト

http://googlemaps.googlermania.com/google_maps_api_v2/index.html

ダウンロード

プラグイン(3KB)

次は縦移動！スクロールギャラリープラグイン「jquery.easyScrollGallery.js」の紹介

管理人 — Mon, 10 May 2010 16:15:14 +0000

前回作成したjquery.easySlideGallery.jsはスライドでしたが今度は縦にスライドする画像ギャラリープラグインを作成しました。

サンプル

前回と同じサンプル内容を掲載しました。

導入方法

ほとんど前回と同じです。id名とpagenation名を変更しています。

Javascript

まずはjqueryを読み込ませその次にイージースライドギャラリーのプラグインを読み込ませます。
他のプラグインと衝突させないためjQuery.noConflict();を指定してますので引数に($)が必要です。

HTML


	
		
		
		
		
	
	
		up
		down

CSS

CSSは下記ソースが必須になります。

#scrollGallery {
	position: relative;
	margin: 0 auto;
	width: 967px;
	height: 544px;
	background: url(../img/bg.jpg) no-repeat;
}

#scrollImg {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

#scrollImg li {
	position: absolute;
	width: 300px;
	height: 250px;
}

#scrollImg li.a {
	width: 400px;
	height: 300px;
}

#scrollImg li a {
	position: absolute;
}

.pagenation {
	position: absolute;
	width: 967px;
	height: 544px;
	top: 0;
	left: 483px;
	z-index: 100;
}

.pagenation p {
	padding: .5em;
	background: #ccc;
}

.up {
	position: absolute;
	top: 0;
	cursor: pointer;
}

.down {
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

ダウンロード

プラグイン(4KB)

簡単実装！スライドギャラリープラグイン「jquery.easySlideGallery.js」の紹介

管理人 — Wed, 21 Apr 2010 23:00:18 +0000

ついにプラグインを作成しました！
ハードルが高いと思い敬遠していましたが、何とかリリースすることができました。

jquery.easySlideGallery.jsとは

今回作成したのはスライドする画像ギャラリーです。
サイト内の画像紹介ページなどに利用できればと思い作成しました。

導入方法

簡単に実装できますが、javascript以外にhtmlとcssにも特定のソースを記述する必要があります。

Javascript

HTML

スライドする画像をid=”slideImg”の子要素に入れます。
サンプルソースはul、li要素ですが、divの親子要素でも問題ございません。
id=”pagenation”内のid=”previous”とid=”next”はスライドさせるためのボタン(矢印)になります。


	
		
		
		
		
	
	
		Previous
		Next

CSS

CSSは下記ソースが必須になります。

#gallery {
	position: relative;
	margin: 0 auto;
}

ul#slideImg {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}

ul#slideImg li {
	position: absolute;
	width: 300px;
	height: 250px;
}

div#pagenation {
	position: absolute;
}

p#previous {
	position: absolute;
	cursor: pointer;
}

p#next {
	position: absolute;
	cursor: pointer;
}

各種設定

このプラグインには「幅」「高さ」「速さ」を設定できます。

幅: スライド画像の表示領域のwidthを設定します。
高さ: スライド画像の表示領域のheightを設定します。
速さ: スライドするスピード設定します。

左から順に「幅」「高さ」「速さ」を入力します。

簡単な解説

このプラグインは、表示領域のちょうど真ん中にくるようになっています。
しかも、スライドする画像サイズがバラバラでもちゃんと真ん中に表示します。
また、ul、li要素でなくてもid=slideImg内であればどんな要素にも対応しています。
※ブロック要素に限ります。

ダウンロード

プラグイン(4KB)

今回初めてプラグインを作成したので不備がございましたら、ご連絡頂けると幸いです。

更新履歴

2010.04.23: #slideImgの子要素にposition:abslotuteを追加
(IE6対策)
2010.04.23: サンプルの「next」「previous」を逆に変更
2010.04.23: 他のコードと衝突させないため、「$」をjQuery.noConflict()で「jQuery」に変更
そのためこのプラグインを読み込む際は$(function($){と引数に「$」が必要になります。
2010.04.23: 情報掲載サンプルを追加

写真の見せ方にワンポイントアクセント！拡大画像ギャラリー

管理人 — Wed, 24 Mar 2010 17:54:13 +0000

今回は撮った写真にワンポイントアクセントをつける、拡大画像ギャラリーの紹介です。
先日、広島城を撮影したので、城を紹介するのに便利だと思い作成しました。
もちろんjQueryを使用しています。

サンプルを見る

HTMLの基本構成

HTMLは、

クリックされる写真画像
拡大させる箇所のアンカーリンク
拡大後の画像

で構成されています。

クリックした際に拡大させる画像は、Javascriptで制御をします。

HTMLソース


	

	
		1の画像を拡大させる
		2の画像を拡大させる
		3の画像を拡大させる
	

	
		
			
			石垣からの侵入者を防ぐための石落としが設置されている。
		
		
			
			天守閣は五層で出来ている。
高さは石垣も含め約39メートル。
		
		
			
			毛利輝元は豊臣政権下の五大老の一人だったため、豊臣家の紋である「五三の桐」が瓦に取り入れられている。

CSSソース

#EnlagePhoto {
	position: relative;
}

#linkEnlarge {
}

#linkEnlarge a {
	position: absolute;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

#linkEnlarge a.link01 {
	top: 206px;
	left: 186px;
	width: 60px;
	height: 30px;
}
#linkEnlarge a.link02 {
	top: 45px;
	left: 211px;
	width: 83px;
	height: 51px;
}
#linkEnlarge a.link03 {
	top: 118px;
	left: 240px;
	width: 72px;
	height: 46px;
}

#imgEnlarge {
}

#imgEnlarge div.enlargeParent {
	position: absolute;
}

#imgEnlarge div div.txt {
	background: #000;
	border: solid #000 1px;
	color: #fff;
	font-size: 80%;
}

#imgEnlarge div div.txt p {
	padding: .5em;
}

Javascriptソース

window.onloadから始めているのは、img画像のwidthとheightのサイズを取得するためです。
全ての読込が完了してからJavascriptが実行されるので、要素の属性を取りこぼしなく読み込めます。

window.onload = $(function(){
	var linkEnlarge = "#linkEnlarge"
	var imgEnlarge = "#imgEnlarge"
	var enlargeParent = ".enlargeParent"
	var Img =  "p.img"
	var Txt = "div.txt"

	$(enlargeParent , imgEnlarge).hide();
	$(Txt).hide();

	$("a" , linkEnlarge).each(function(){
		$("a" , linkEnlarge).css({background:"#fff" , border:"solid #000 1px" , zIndex:"10" , cursor:"pointer" , opacity:"0.3"});
	 	var ID = $(this).attr("href");
		var idTop = $(this).css("top");
		var idLeft = $(this).css("left");
		$("img" , Img).css({width:"0" , height:"0"});
		$(ID).css({top:idTop , left:idLeft});

		$(this).click(function(){
			$("a" , linkEnlarge).hide();
			var ImgH = $(Img + " img" , ID).attr("height");
			var ImgW = $(Img + " img" , ID).attr("width");
			$(ID).show();
			$(Txt , ID).css({width:ImgW + "px"});
			$(Txt , ID).css({marginLeft: "-" + ImgW / 2 + "px"});
			$(Img + " img" , ID).animate({
				marginTop: "-" + ImgH / 2 + "px",
				marginLeft: "-" + ImgW / 2 + "px",
				width: ImgW + "px",
				height: ImgH + "px"
			}, 500, function(){
				$(Txt , ID).fadeIn(500);
			});
			return false;
		});

		$(ID).click(function(){
			$("img" , Img).css({margin:"0" , width:"0" , height:"0"});
			$(Txt).hide()
			$(this).hide();
			$("a" , linkEnlarge).fadeIn(200);
		});

	});

});

MAC風DOCメニューをjQueryで作るチュートリアル

管理人 — Tue, 02 Mar 2010 17:32:17 +0000

MAC風DOCメニューをjQueryのanimateを使えば簡単に実装できるであろうと思い作成したのですが、なかなか大変でした。

HTMLソース

注意点(width属性とheight属性の指定)

このimg要素にはすべてwidth属性とheight属性を明記しています。
その理由としては、JavaScriptでwidth();とheight();と値を取得する際に、読み込み速度等できっちり値を取得してくれない場合があるためです。
さらにsafariでは、img要素にwidth属性とheight属性を指定しないと、JavaScriptでは値を取得してくれません。
ですので、widthとheightの値はを明記しているのです。

Javascriptソース

$(function(){
	var DOC = "#doc";
	$("li" , DOC).each(function(){
		var imgWidth =$("img" , this).width();
		var imgHeight =$("img" , this).height();

		$(this).css({"position": "relative", "width": imgWidth + "px", "height": imgHeight + "px"});
		$("a" , this).css({"display": "block"});
		$("img" , this).css({"width": imgWidth + "px", "height": imgHeight + "px"});		

		$(this).hover(function(){
			$("img" , DOC).css({"zIndex": "1"});
			$("img" , this).css({"position": "absolute", "zIndex": "100"});
			$("img" , this).stop().animate({
				"top": "-" + imgHeight / 2 + "px",
				"left": "-" + imgWidth / 2 + "px",
				"width": imgWidth * 2 + "px",
				"height": imgHeight * 2  + "px"
			}, 300);
		}, function(){
			$(this).css({"width": imgWidth + "px", "height": imgHeight + "px"});
			$("img" , this).stop().animate({
				"top": 0,
				"left": 0,
				"width": imgWidth + "px",
				"height": imgHeight + "px"
			}, 300);
		});

	});
});

Javascriptの解説

4-9行目：変数と初期設定: 4-5行目の変数で画像の幅、高さを取得します。
次にcssの設定をします。Javascriptで指定することで、どんな幅、高さの画像でも対応できるようにしています。
11-28行目：ホバー設定: 12-13行目でz-indexを全て1にし、ホバーした要素のz-indexを100にしています。
14-19行目にanimate設定が記述されています。
ここでポイントとなるのが、top、leftの値に「-」が付いていることです。
画像を2倍にするのは「*2」で実現できますが、それだけですと、左上が基点となり大きくなります。
そのため、画像サイズの半分だけマイナスに移動させれば、真ん中から拡大しているようになります。

サンプル

サンプルはこちらになります

WordPress2.6.5からWordPress2.9.1にバージョンアップしました

管理人 — Tue, 16 Feb 2010 15:42:47 +0000

ついにWordPressのバージョンをアップしました。
せっかくなので、手順を記録します。

バックアップ
動作環境の確認
プラグインの停止
ダウンロードとアップロード

まずはデータのバックアップ

バージョンアップする前にデータのバックアップを取ります。
FTPでファイルのバックアップをとります。それとWordPressの入っているサーバのバックアップもとります。

動作環境を調べる

今回インストールしたWordPress2.9.1の動作環境は下記になります。

PHP バージョン 4.3 以上
MySQL バージョン 4.1.2 以上

参考：http://ja.wordpress.org/

MySQLのバージョンアップ

この動作環境だと、2.9以上は動きません。
ですので、サーバのPHPバージョンを4から5にアップさせます。
PHPのバージョンアップ方法は各種サーバのマニュアルをご覧下さい。
自分の場合はロリポップだったので、簡単にバージョンアップできました。

補足ですが、その他のバージョンの動作環境はこちらです。
参考：http://wpdocs.sourceforge.jp/Template:サーバ要件#.E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3_2.5.E3.80.9C2.8_.E7.B3.BB

プラグインの停止

インストールしているプラグインを全て停止させます。

プラグインを停止するとサイトにエラーが。。。

WordPress2.9.1をダウンロードとアップロード

下記サイトからWordPress2.9.1のデータをダウンロードします。
http://ja.wordpress.org/

次にデータを解答してアップロードします。
ただし上書きしてはいけないデータがあるので気を付けで下さい。
自分の場合は下記の3つでした。

wp-config.php
wp-contentディレクトリ
※この中にプラグインやテンプレートが入っています。
.htaccess

wp-config.phpファイルにはデータベースの記述があるので、PHPのバージョンをアップした際に変更があれば、修正する必要があります。

管理画面にログイン

データをアップロードし終われば、管理画面にログインします。
特に問題なければ、ログインできるはずです。

参考サイト

ここまで説明しましたが、こちらを参考にしてバージョンアップしました。
http://wpdocs.sourceforge.jp/WordPress_のアップグレード/詳細