Template Style

WordPress のテーマ “Treasures” を公開

Template Style — Wed, 14 Jul 2010 02:36:56 +0000

人には、それぞれのストーリーがある。宝、貴重な物や人などを意味する “Treasures” と名のついた WordPress テーマ。

Treasures 1.0 のダウンロードは » こちら

WordPress のテーマ “Happy Cork Board” 1.2.0 アップデート

Template Style — Sat, 10 Jul 2010 03:40:26 +0000

Happy Cork Board 1.2.0 を公開しました。

次の仕様改善と不具合を修正しました。

JavaScript ライブラリを jQuery に統一しました。
HTML5 に修正しました。
HTML タグの不具合を修正しました。
投稿、ページおよびインデックスページに前ページ、次ページへのリンクを追加しました。
CSS、Script、RSS を functions.php から読み込むようにしました。

Happy Cork Board 1.2.0 のダウンロードはこちら

WordPress の jQuery を利用すると $ 関数が見つからない

Template Style — Wed, 23 Jun 2010 08:28:11 +0000

次のコードを function.php などに記載して、WordPress の jQuery を利用すると、$ 関数(オブジェクト) が見つからないエラー ($ is not a function) が発生します。

wp_enqueue_script('jquery');

これは、prototype.js などのライブラリと $ 関数(オブジェクト)が衝突しないように jquery.js の最後で jQuery.noConflict(); が実行されているためです。

そのため、$() のかわりに、jQuery() を使用する必要があります。jQuery の引数に $ を指定することで、jQuery の引数のオブジェクト内で $ を使用することはできます。

jQuery(function($) { ... });

WordPress のテーマ “Happy Cork Board” 1.1.1 アップデート

Template Style — Wed, 16 Jun 2010 03:43:12 +0000

Happy Cork Board 1.1.1 を公開しました。

次の仕様改善と不具合を修正しました。

RSS Feed のリンクを修正しました。
テーマのライセンス情報を追加しました。
左側のタブを複数行に対応しました。
ノーコメントサポートしました。
タグを表示するようにしました。

Happy Cork Board 1.1.1 のダウンロードはこちら

CSS3 iPhone 3G

Template Style — Fri, 28 May 2010 02:51:46 +0000

CSS3 と HTML で iPhone を作ってみました。

9:42

Thursday, June 9

slide to unlock

CSS3 iPhone

CSS3 iPhone Download

CSS3 iPhone » Download

IMAGE

HTML


	
	
		
		
		
	
	
		
			
				
					
						
							
						
						
						
							
							
							
							
							
							9:42
							Thursday, June 9
							
							
							
							
							
							
							slide to unlock
						
						
						
							
						
					
				
			
		
	
	CSS3 iPhone

CSS

#iPhone {
	margin: 0 auto;
	padding: 40px 0;
	width: 302px;
	text-align: center;
}
#iPhone div {
	margin: 0 auto;
	color: #FFFFFF;
	text-align: center;
	font-family: Helvecira, sans-serif;
	text-shadow: 0 -1px 2px #000000;
}
#iPhone #powerbutton {
	margin: 0 0 0 200px;
	width: 48px;
	height: 2px;
	background: -webkit-gradient(linear, left center, right center, from(#646566), color-stop(0.1, #cacbcc), color-stop(0.9, #cacbcc), to(#646566));
	background: -moz-linear-gradient(left, #646566, #cacbcc 10%, #cacbcc 90%, #646566);
	-webkit-border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 2px;
	-moz-border-radius-topright: 2px;
	-moz-border-radius-topleft: 2px;
}
#iPhone #leftbutton {
	float: left;
	width: 2px;
}
#iPhone #lockbutton {
	margin: 60px 0 18px 0;
	width: 2px;
	height: 25px;
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.2, #cacbcc), color-stop(0.8, #cacbcc), to(#000000));
	background: -moz-linear-gradient(center top, #646566, #cacbcc 20%, #cacbcc 80%, #646566);
	-webkit-border-top-left-radius: 2px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
}
#iPhone #volumebutton1 {
	margin: 10px 0;
	width: 2px;
	height: 40px;
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.2, #cacbcc), color-stop(0.6, #cacbcc), to(#000000));
	background: -moz-linear-gradient(center top, #646566, #cacbcc 20%, #cacbcc 60%, #646566);
	-webkit-border-top-left-radius: 2px;
	-webkit-border-bottom-left-radius: 2px 30px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
}
#iPhone #volumebutton2 {
	margin: 10px 0;
	width: 2px;
	height: 40px;
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), color-stop(0.4, #cacbcc), color-stop(0.8, #cacbcc), to(#000000));
	background: -moz-linear-gradient(center top, #646566, #cacbcc 40%, #cacbcc 80%, #646566);
	-webkit-border-top-left-radius: 2px 30px;
	-webkit-border-bottom-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-bottomleft: 2px;
}
#iPhone #flame1 {
	float: right;
	padding: 5px 0;
	width: 300px;
	height: 545px;
	background: -webkit-gradient(linear, left top, left bottom, from(#B1B2B3), color-stop(0.03, #FFFFFF), color-stop(0.98, #FFFFFF), to(#646566));
	background: -moz-linear-gradient(center top, #B1B2B3, #FFFFFF 3%, #FFFFFF 98%, #646566);
	-webkit-box-shadow: 0 5px 10px #999999;
	-moz-box-shadow: 0 5px 10px rgba(0,0,0, .5);
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}
#iPhone #flame2 {
	padding: 1px 0;
	width: 300px;
	height: 543px;
	background-color: #000000;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
}
#iPhone #flame3 {
	width: 296px;
	height: 543px;
	background: -webkit-gradient(linear, left center, right center, from(#FFFFFF), color-stop(0.02, #646566), color-stop(0.98, #646566), to(#FFFFFF));
	background: -moz-linear-gradient(left, #FFFFFF, #646566 2%, #646566 98%, #FFFFFF);
	-webkit-border-radius: 52px;
	-moz-border-radius: 52px;
}
#iPhone #flame4 {
	padding: 5px 0;
	width: 286px;
	height: 533px;
	background-color: #FFFFFF;
	-webkit-border-radius: 45px;
	-moz-border-radius: 45px;
}
#iPhone #display {
	padding: 35px 0;
	width: 270px;
	height: 457px;
	border: 3px solid #000000;
	background: -webkit-gradient(linear, right top, left bottom, from(#4B4C4D), color-stop(0.2, #0F0F0F), to(#0F0F0F));
	background: -moz-linear-gradient(right top, #4B4C4D, #121212 20%, #121212);
	-webkit-border-radius: 38px;
	-moz-border-radius: 38px;
}
#iPhone #ear1 {
	padding: 3px;
	width: 50px;
	height: 6px;
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), to(#313233));
	background: -moz-linear-gradient(top, #000000, #313233);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
#iPhone #ear2 {
	width: 50px;
	height: 6px;
	background: -webkit-gradient(linear, center top, center bottom, from(#171819), to(#474849));
	background: -moz-linear-gradient(top, #171819, #474849);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
#iPhone #space1 {
	height: 30px;
}
#iPhone #space2 {
	height: 207px;
}
#iPhone #space3 {
	height: 8px;
}
#iPhone #screen {
	padding: 4px 0;
	width: 256px;
	height: 373px;
	background: url(/clownfish.png) no-repeat 50% 50%, -webkit-gradient(linear, center top, center bottom, from(#313233), color-stop(0.5, #171819), to(#313233));
	background: url(/clownfish.png) no-repeat 50% 50%, -moz-linear-gradient(center top, #313233, #171819 50%, #313233);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#iPhone #topbar {
	width: 248px;
	height: 11px;
	background: #000000 url(/icon.png) no-repeat 50% 50%;
	opacity: 0.5;
}
#iPhone .glassmenu {
	width: 248px;
	height: 75px;
	background: -webkit-gradient(linear, center top, center bottom, from(#666666), color-stop(0.25, #1A1A1A), color-stop(0.5, #1A1A1A), color-stop(0.5, #000000), to(#000000));
	background: -moz-linear-gradient(center top, #666666, #1A1A1A 25%, #1A1A1A 50%, #000000 50%, #000000);
	opacity: 0.5;
}
#iPhone .line1 {
	width: 248px;
	height: 1px;
	background-color: #333333;
	opacity: 0.5;
}
#iPhone .line2 {
	width: 248px;
	height: 1px;
	background-color: #000000;
	opacity: 0.6;
}
#iPhone .line3 {
	width: 248px;
	height: 1px;
	background-color: #999999;
	opacity: 0.5;
}
#iPhone #clock {
	position: absolute;
	margin: -70px 0 0 0;
	width: 256px;
	font-size: 42px;
}
#iPhone #day {
	position: absolute;
	margin: -25px 0 0 0;
	width: 256px;
	font-size: 10px;
}
#iPhone #unlock {
	position: absolute;
	margin: -48px 26px 0 26px;
	width: 256px;
	font-size: 20px;
}
#iPhone #unlockslider {
	position: absolute;
	margin: -58px 17px 0 17px;
	width: 220px;
	height: 40px;
	border: 1px solid #4D4D4D;
	background: -webkit-gradient(linear, center top, center bottom, from(#000000), to(#333333));
	background: -moz-linear-gradient(center top, #000000, #333333);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	opacity: 0.8;
}
#iPhone #unlockbutton {
	position: absolute;
	margin: -55px 20px 0 20px;
	width: 50px;
	height: 36px;
	background: url(/arrow.png) no-repeat 50% 50%, -webkit-gradient(linear, center top, center bottom, from(#F7F7F7), color-stop(0.25, #D9D9D9), color-stop(0.5, #D9D9D9), color-stop(0.5, #C3C3C3), to(#959595));
	background: url(/arrow.png) no-repeat 50% 50%, -moz-linear-gradient(center top, #F7F7F7, #D9D9D9 25%, #D9D9D9 50%, #C3C3C3 50%, #959595);
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
}
#iPhone #homebutton {
	padding: 18px;
	width: 16px;
	height: 16px;
	background: -webkit-gradient(linear, right top, left bottom, from(#000000), color-stop(0.25, #000000), to(#333333));
	background: -moz-linear-gradient(center top, #000000, #000000 25%, #333333);
	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
}
#iPhone #square {
	width: 15px;
	height: 15px;
	border: 1px solid #646566;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
#iPhone #title {
	clear: both;
	margin: 0;
	font-size: 40px;
	line-height: 80px;
}

WordPress のテーマ “Happy Cork Board” を公開

Template Style — Sat, 15 May 2010 07:40:55 +0000

その日の気分に合わせてウィジェットを置き換えたりして楽しめるコルクボードテイストの WordPress テーマ。

Download » こちら

transition (CSS 3)

Template Style — Fri, 05 Feb 2010 02:17:48 +0000

transition プロパティで変化させるプロパティや時間、タイミングを指定します。

transition: [プロパティ] [時間] [タイミング]

例

TRANSITION TEST

.Test a {
	color: #0000FF;
	transition: color 1s ease-in-out;
}
.Test a:hover {
	color: #FF0000;
}

プロパティ (transition-property)

値を変化させたいプロパティを指定します。背景色を変化させたい場合は "background-color" と指定します。

時間 (transition-duration)

変化をする時間を指定します。1秒間かけて変化させる場合は "1s" と指定します。初期値は 0 です。

タイミング (transition-timing-function)

変化量を制御する方法を指定します。制御する方法には linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier があります。初期値は ease です。

複数プロパティの変化を指定する

複数のプロパティを同時に変化させるには、[プロパティ] [時間] [タイミング] の値をカンマ区切りでつないで指定します。

transition: [プロパティ] [時間] [タイミング], [プロパティ] [時間] [タイミング]...

ブラウザの対応状況

CSS 3 の機能とはいえ、Opera 10.5 以外のブラウザではそのまま利用できない状況です。しかし、Webkit 系ブラウザ (Safari や Google Chrome など) では -webkit-transition を、Gecko 系ブラウザ (Firefox など) では -moz-transition とベンダープレフィックスをつけることで利用することができます。Trident 系ブラウザ (Internet Explorer など) はもちろん使えません！

プレゼントアイコン

Template Style — Sun, 10 Jan 2010 02:49:19 +0000

Download » こちら

クリスマスツリーアイコン

Template Style — Wed, 06 Jan 2010 07:16:06 +0000

Download » こちら

PHP OpenID Library を MySQL Store で使う

Template Style — Tue, 22 Dec 2009 01:33:46 +0000

前回テストした PHP OpenID Library に付属したサンプルプログラムは OpenID の処理に必要な情報の保存にファイルを使用していましたが、ファイルではなく MySQL などのデータベースを利用することもできます。
なお、データベースの接続などに PEAR::DB ライブラリが必要です。

PHP OpenID Library に付属したサンプルプログラムを、ファイルから MySQL を利用するように変更してみます。

読み込むライブラリを変更する

まず、ファイルを利用するライブラリではなくデータベースを利用するファイルを読み込むように次の行を変更します。

変更前 : require_once "Auth/OpenID/FileStore.php";
変更後 : require_once "Auth/OpenID/MySQLStore.php";

データベースに接続する

getStore 関数で MySQL に接続をして、戻り値を Auth_OpenID_FileStore から Auth_OpenID_MySQLStore に変更します。
変更後の getStore 関数は次の通りです。

function &getStore() {
  $connect = DB::connect("mysql://(user):(password)@localhost/(dbname)");
  return new Auth_OpenID_MySQLStore($connect);
}

PHP OpenID Library のテスト成功

ブラウザから examples/consumer/index.php にアクセスし、Identity URL を入力した上、[Verify] ボタンをクリックします。
次のメッセージが表示されれば成功です。

You have successfully verified (Identity URL) as your identity.