そういえば、リニューアルに伴い CSS3 を小ネタで使ったんですけど、その解説をするとか言ってすっかり忘れていました。ということで、今日はそんな感じの記事を！

今回のリニューアルでは、極力 JavaScript と装飾の画像ファイルを減らすことにトライしてみました。なんで？という疑問が湧く可能性がありますが、制限付きでやる方が楽しいので、これと言って他に理由はありません。

で、主に、アニメーションと背景画像の複数配置、装飾画像の CSS 化が今回のミッション。まぁそんな難しいことはやっていません。ただ、ショーケース的に眺めていただければなと。本当はアイコン各種も CSS でやりたかったけど今回は断念。次回こそは！

あとは、CSS3 ではない箇所もまとめて解説予定。Web フォントとか。リストアップします。

実際にマウスを持って行ってもらうと分かりますが、クルクル回ります。無駄に。あと、読み込み時の数秒間は、ピョンピョン跳ねます。ちなみに、表示できるブラウザは Chrom と Safari などの Webkit 系ブラウザです。

「今日からCSS3アニメーションを使えるようになるチュートリアル | KAYAC DESIGNER’S BLOG」の CSS を元に、自分仕様にちょっとだけ変えています。まぁほぼそのままでも使えます。解説が分かりやすい。色々なアニメーションが作れちゃう CSS3！勉強のし甲斐がありますね。作者さんありがとうございます！

あまり目立ちませんが、右のボタンにマウスを持って行くと、シュッルってパネルが出てきます。

上の記事でだいたい要領が掴めます。んで、次のはもうちょい簡単なスライドアニメーション。ここはもうちょい改良が必要なんですけど、そのままだなぁ…なんとかしないと。hover すると、右からスススとパネルがスライドしてきます。デザイン的にも気が付かれないので、ここは直さないと…。

hover すると、文字が少しだけ無駄に傾きます。

hover で文字が斜めになります。あと、微妙にフワッとなるように shadow も使っています。一部ですが、CSS はこんな感じ。でも Chrome で transform が効いてないんだよなぁ。何か間違ってるかもです。コピペご注意。

.tab a {
-webkit-text-shadow:0 0 1px #FFF;
-moz-text-shadow:0 0 1px #FFF;
text-shadow:0 0 1px #FFF;
-moz-transition: 0.3s ease-out;
-webkit-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
}

.tab a:hover{
-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
webkit-text-shadow:0 0 3px #FFF;
-moz-text-shadow:0 0 3px #FFF;
text-shadow:0 0 3px #FFF;
}

body に2つの画像をしています。ストライプ地に、右下に象さんを固定しています。パオーン。

CSS3 では複数の画像を背景に指定できます。無駄に div とか入れずに済みますよ！IE にも対応しています。詳細は、この辺の記事が参考になるかと。「IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット : Web Design KOJIKA17」

body{
background:url(images/add/bg_zou.png) fixed no-repeat 99% bottom,
url(images/add/bg.png) fixed #d30f0f;
*background: transparent url(images/add/bg.png); /* IE lt IE8 */
background: transparent url(images/add/bg.png)\9; /* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/add/bg_zou.png', sizingMethod='crop')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/add/bg_zou.png', sizingMethod='crop'); /* IE5.5+ */
}

そういえば、右下にある「トップヘ移動する」ボタンは、< を transform で rotate(270deg) を指定して使っています。IE だと横向いています（笑）

#pagetop{
color:#000;
text-decoration: none;
position:fixed;
bottom:-66px;
right:10px;
z-index:1100;
font-size: 123pt;
font-weight: 700;
-moz-transform:
rotate(270deg);
-webkit-transform:
rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
opacity:0.2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); /* IE5.5+ */
}

角丸は、随所に使っています。コメントの送信ボタンは激しく角丸。フッターは、CSSで透明化しています。

まぁ目新しいものではありませんが。PNG とか使わずに透明化しています。楽ですが、IE に対応させようと思うとアレです。

トップページのメニューはWebフォントを利用

Web フォントは初めて使ったんですが、英字なら色々あっていいですね！かっちょええ。これは「Google Web Fonts」を利用しています。

コメント欄のところにもさりげなく。

以上です。他にもあったかもですが忘れたｗ
そんなこんなで、CSS3 はそんなに難しくもなく導入できると思うのでぜひお試しください。ただ、仕事で使おうと思うとまだ微妙なのかなと思います。IE 周辺が特に。まぁその内、浸透するんじゃないのかなと思います。

当初の目的「極力 JavaScript と装飾の画像ファイルを減らすこと」は、まぁそこそこの達成です。完全に js を無くしてみたいですね。なんとなく。あとはアイコンも CSS 化できると良いです。次の目標かな？「画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい – はてなブックマークニュース」とか凄い根気ですよね（笑）

ではでは、今日はここまで、おやすみなさい！

ちょっと分かりづらいかもしれませんが、トップページに、紹介ページなどの任意のページを表示させるコードです。このサイトを作るのに必要になったので使いました。他にもやり方あると思いますが、とりあえずこれで動くので…。

サンプルの画像。それぞれ色分けされたところが、それぞれ別ページを呼び出してます。

サンプル画像では、途中で切っていますが、スライド部分と紹介文エリア、プロジェクトエリアは全てページを読み込んでいます。

<!--?php $postslist = get_posts('include=1&post_type=page&post_status=draft');   foreach ($postslist as $post) : setup_postdata($post); ?-->
<!--?php the_content(); ?-->
<!--?php endforeach; ?-->

include=1 の数字の部分を該当ページのIDに変えるとそのIDページが表示されます。その他のパラメーターは Codex を見てくだされい。テンプレートタグ/get posts – WordPress Codex 日本語版

んで、これの便利なところは、トップページを各エリアごとにページ機能を使って編集できることです。ひとつのページにまとめてもOKなのですが、ページの中にHTMLが増えるのも嫌なので今回は各ページに分けました。

もう一つは、非公開ページでも引っ張ってこれること。これは、post_statusでいじります。デフォルトは公開状態です。

んで、トップページだけにその引っ張ってきた情報があれば十分なので、非公開状態にしてページURLを叩いても出ないようになっています。こうすることで得られるメリットがあるかどうか知りませんが、同じ情報が2つあるのが気持ち悪いのでこうしてます。

と、たぶん他にスマートなやり方があると思いますが、僕のサイトではこんな感じでやってますよってご紹介でした！別の方法あったらまた書きます。

ではでは。

やってきました！3年ぶりのリニューアル！！長らくUMLANDとしてやってましたけど、URLがuetsuhara.comなので引越しを決意。UMLANDは別サイトできっとまたオープンします！ってことで、ウエツハラとして再オープンです。

それで、今回は念願のリニューアル、個人的に試してみたかったこと入れてみました。

• CSS3 の活用
• WordPress デフォルトテーマの流用

今回は、画像を減らし、CSSで表現できるものは極力CSSでという自己満足に浸ってみたかった。できればアイコンとかもCSSで描こうかなぁと思いましたが、それをすると公開があと半年は延びる恐れがあるので今回はパスしました。

基本的には、透明化や角丸やシャドウ、Webフォントの利用でしょうか。ただ、IE対策はまるっきりしておりません。まぁきっと文字は読めるのでOK！

WebKitだとピョコピョコ動きます。

あと、WebKit系でしか見れないと思いますが、ロゴ周辺とアイコンが無駄にピョコピョコ動きます。CSS3のアニメーション機能ですね。FirefoxやIEでは残念ながら見れませぬ。CSS3に関しては、また後日まとめます。

それから、今回は最近リリースされたWordPressのデフォルトテーマ「Twenty Eleven」をそのまま利用してみました。イチから組んでも良かったのですが、ちょちょいとイジルだけでカスタマイズできるよ！ってことを実践してみようかと。

まぁ結論を言えば、ちょちょいとイジルだけじゃ無理っぽくね？って感じです。高機能過ぎて、テンプレートには慣れが必要かと。

それで、目標としてはテンプレートをいじらず、CSSだけを書き換えて、完成！としたかった。CSS祭にしたかった！けど、あまり時間的に余裕がなかったので、妥協してHTMLの構造を少しいじりました…。

頃合いを見計らってCSSを書き換えてゆこうと思います。

まぁそれに関連してなのですが、デフォルトテーマのCSSを書き換えるだけでサイトを作ろう！コンテストを開きたいなと画策しております。詳細決まりましたら、告知します。

情報くれ！って方は、TwitterあたりにReplyして頂ければご連絡いたします。@uetsuhara です。よろしくお願いいたします。

サイト的には、未完成の部分が沢山ありますが、とりあえずオープンさせて頂きます。今後ともよろしくお願いいたします！！

ではでは。

HTML5 と CSS3 を利用して、リニューアルを行ないます！デザインは、今のデザインを踏襲してます。今より、ちょっとだけ大人な雰囲気になる予定です。

予定ってかデザインはもう出来てて、残すはコーディングのみ！コーディングだと思うと億劫になってしまい、1ヶ月も放置してます…。あぁ。

ってことで、少しでも楽しめるように、HTML5 と CSS3 に挑戦したいと思います。そして、もう IE6 はさようならします。前からそうしてるって噂ですが。

ちょろっと HTML5 をみたんですが、こっちは何とかなりそうですね。いくつかよく分からないタグとかありますが。

ってことで、HTML5 & CSS3 マスター目指してがんばります。何かオススメのサイトなどご存知でしたら、ぜひ親切に教えて帰ってください（笑）

よろしくお願いいたします！！

ではでは。

UMLANDをリニューアルいたしました！少しでも楽しんで貰えれば幸いです。

ちなみに、対応ブラウザは FireFox , Opera , Google chrome で、最新版のみでしか確認しておりません。IE6 ではきっと見れません。むしろ IE はもうどうでもいいです。IE ユーザーが一刻も早くこの世から居なくなることを願うばかりです。

ビルゲイツだってきっと Opera か FireFox を使ってるに違いない。あるいは Mac だったりして。

以下、リニューアルした中で、自分なりに気に入った点を簡単にいくつかピックアップしてみます。サイト作りにあまり興味のない方は飛ばして貰って問題ないです。

それにしても調子乗って色々機能付け足したら、どうもうまくいかない･･･。jquery でインターフェースを固めましたが、ちょっとうまく動作しないとこが多発。未だにメインナビがうまく動かず。javascript こんなに突っ込んでいいのか不安。

それに加え IE がきれいに表示されず。もう発狂寸前。できることならゲイツさんと一緒に引退してくれた方がありがたかったんですが。そんなこんなで、IE6 は諦めることにしました。ごめんよ IE。時間あったら手直ししますが。

• メインメニューナビゲーション

実際に触ると分かるんですが、フワフワしたのがマウスに付いてきます。ちょっと未完成ですが、心ゆくまで触って下さい。んで、ロールオーバーも jquery で同時にやってるけど平気なのか？と思いつつ動いたからまいっかと。LavaLamp menu を使いました。

• タブメニューの導入

ui.tabs を入れました。ポストリストのタブ化。

• ツールチップの導入

あまりうまくいってませんが、トップページの島のマップのボタンみたいなのに触れると、ツールチップをポップアップします。popup.js を入れました。

• フッターの透明化

フッターに Png 画像を使い透明にしてみました。めでたく、きたなーい感じの CSS になりました。時と場合によっては、バグります。特にお狐様で。案外 IE は普通？どうすりゃいいんだぁ。なんとかしないと。
あれ、リスト化するとたいして無いな･･･。詳しくは明日以降に記事にします。

ちなみに、コメント欄が死んでます。一体どうしたことやら。うんともすんとも言わず。

とまぁともかく、今後ともよろしくお願いいたします。