4月, 2011

IE9日本語版リリース

2011年4月26日 staff デザイン, 0

お疲れ様です、豊川です。

IE9の日本語版が公開されましたね。
とってもシンプルな見た目になり、その中でも戻るボタンの大きさにびっくりしました。
Firefoxも4が出た時にスッキリしましたし、どのブラウザもどんどんコンパクトになっていきますね。

残念ながら私はXPユーザーのため自宅ではIE9を触ることができないのですが、
動作確認などはしっかりと行っていきたいです。

パノラマ写真

2011年4月23日 staff 流行, 0

お疲れ様です、豊川です。
今日は少し趣向を変えて、話題になっている？アプリのお話を。

最近、Microsoftからパノラマ写真が撮れるPhotosynthという
iPhone用の無料アプリがでました。
何回か写真を撮りそれらを組み合わせることで一枚のパノラマ写真にするというものなのですが、
これがなかなか面白かったです。

思っていたよりも自然に合成してくれることにまず驚いたのですが、
なんと、撮ったパノラマ写真をアプリ内で立体的にぐりぐりと動かせます。
もちろん写真は保存することもでき、他の人が撮った写真も読み込むことで動かせるようです。

部屋で試したのですが、やっぱりパノラマ写真は風景の方がいいなと思ったので、
天気がいい休日にまた使ってみようと思います。

無限のフェースブック

2011年4月21日 pachara デザイン, 0

お疲れ様です。パチャラです。

今日フェースブックについて調べました。フェースブックは今年の２月からフェースブックのマークアップ言語（FBML)を廃止してiframeでページのタブを作成ことができるようになりました。つまり、HTML,CSS,Javascriptができることをフェースブックに入れることができるようになりました。

例：

フェースブック+iframe+ワードプレス

http://www.facebook.com/FunFanPage?sk=app_327103188637

フェースブックでE-commerce

http://www.facebook.com/WestMarine?sk=app_186539361386478

今から、フェースブックは、スマートフォーン、タブレットのように、１つの大事なプラットフォームになるんではないだろうかと思っています。

サイト全体のリンクチェック

2011年4月19日 staff ソフトの使い方, 0

お疲れ様です、豊川です。

Dreamweaverには、リンク切れチェックに便利な機能があります。
【サイト】→【サイト全体のリンクチェック】からできます。

「破損リンク」という項目を見ると、スペルミスなどでリンクが切れているサイト内リンクや画像が一覧で表示されます。
ただ、外部リンクの破損は表示されないため、自力で確認するかそれ用のソフトが必要になります。

ピクセルずれなしの回転

2011年4月19日 pachara ソフトの使い方, 0

お疲れ様です。パチャラです。

今日フォトショップのひとつのテクニックを紹介します。

フォトショップで自由変形の回転は画像のサイズによる、ずれが出る恐れがあります。たとえばこの10x5pxの画像を普通に回転すると

このようにずれが出ます。

大きい画像ならこの問題は無視できるかもしれませんが、携帯のサイトやアイコンをデザインするときは困ります。解決方法は簡単です。自由変形を使う時は回転する前に自由変形のオプションのところで画像の回転点を真中ではない点に選べば良いです。

そうするとずれなしで回転できます。

CSS3での装飾

2011年4月14日 staff コーディング, 0

お疲れ様です、豊川です。

今日は、CSS3のプロパティを簡単に生成できるジェネレーターを１つ。

CSS3プロパティジェネレーター
http://css-eblog.com/eblog_sample/0912/css3-generator/
日本語です。

スマートフォン対応サイトなどでは、CSS3を上手く使い軽くはやく表示できるようにしているところがほとんどです。角丸やシャドウが手軽に使えるのが良いですよね。

まだブラウザによって対応状況が違うため使いどころが難しいなぁという印象ですが、
上手く取り入れていけたらと思います。

テスト。

↑実際に作ってみたもの。
IEでは角丸などが効いていないかと思いますが…。

↑Firefoxやsafariではだいたいこんな感じに表示されます。

.test {
	background-image: -webkit-gradient(linear, left top, left bottom,color-stop(0, rgb(237, 255, 178)),color-stop(0.2, rgb(182, 232, 88)),color-stop(0.8, rgb(100, 181, 79)),color-stop(0.9, rgb(165, 212, 127)));
	background-image: -moz-linear-gradient(-90deg,rgb(237, 255, 178) 0%,rgb(182, 232, 88) 26%,rgb(100, 181, 79) 85%,rgb(165, 212, 127) 99%);
	background-image: linear-gradient(-90deg,rgb(237, 255, 178) 0%,rgb(182, 232, 88) 26%,rgb(100, 181, 79) 85%,rgb(165, 212, 127) 99%);
	-webkit-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	-moz-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	-ms-box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	box-shadow: 2px 2px 4px rgba(51,51,51,0.5);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	font-size: 18px;
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffedffb2, endcolorstr=#ffa5d47f, gradienttype=0)) progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=2);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffedffb2, endcolorstr=#ffa5d47f, gradienttype=0)) progid:DXImageTransform.Microsoft.Shadow(color=#333333, direction=135, strength=2)";
	color: rgb(255, 255, 255);
	zoom: 1;
	border: 1px solid #fff;
	font-weight:bold;
	width: 200px;
	height: 45px;
	text-align: center;
	line-height: 45px;
}

隠されたメッセージ

2011年4月13日 pachara デザイン, 1

お疲れ様です。パチャラです。

今日海外のSixrevisions.comよりの青いロゴデザインのショーケースを読みました。様々なロゴデザインがありますが、僕が非常に気に入るのはこの２つです。

クライシスマネジメント会社 Insight India

赤ちゃんの棺桶 Minimac

以上のロゴに気に入ったのは隠されたメッセージが入っているのことです。

Ｉｎｓｉｇｈｔのロゴは最初に見たときは普通のシンメトリー迷路のかと思っていたが、よく見ると真ん中の部分は”i”の文字です。

これはInsightの最初の1文字で、会社を現すデザインです。「迷う時はＩｎｓｉｇｈｔに任せてください」と伝えるかなと思います。クライシスマネジメントの会社にぴったりだと思います。

Minimacの隠されたメッセージはこれです

このロゴは前に紹介しましたネガティブスペースのテクニックを使っています。よく見ると四つの顔を見えます。少し怖いと思う人もいるかもしれないが、この４つの顔は「家族」の意味です。赤ちゃんの棺桶のロゴなので、怖いより、愛・暖かさ・悲しみ、様々な感情を表現できるのがこのロゴの特徴だと思います。

面白いことを見つけたら、また紹介します。

Dreamweaverライブラリ機能

2011年4月12日 staff ソフトの使い方, 0

お疲れ様です、豊川です。

Dreamweaverには「テンプレート」とは別に、「ライブラリ」という物があります。
ライブラリ機能を使うと、ページの一部分をテンプレート化することができます。

１つのファイルを修正するだけで全ページに適用されるため、例えばキャンペーンの詳細やサブメニューなど定期的に変更する共通部分に使えば更新作業が大変楽になります。
またテンプレート機能と同様に、リンク先の位置関係も修正してくれます。

ウィンドウのアセットを表示し、左メニューのライブラリを選ぶと追加・編集できます。

テンプレートもライブラリも便利な機能ですが、複数人で管理する際は注意が必要です。
Dreamweaver上では編集不可になっているため心配はないですが、他のエディタを使いテンプレートやライブラリを使用している部分に修正を加えた場合、後日テンプレート・ライブラリを更新した時に上書きされてしまいます。

ワードプレスのカテゴリーテンプレート

2011年4月12日 pachara デザイン, 0

お疲れ様です。パチャラです。

普通のワードプレスのカテゴリーページは「category.php」のテンプレートファイルを使っています。ワードプレスはサイトの一つ一つのカテゴリーは別々のテーマを利用することができます。たとえば、「新着情報」のカテゴリーページと他のカテゴリーページのレイアウトを区別したい場合、「新着情報」のみのテーマを作ります。

方法に関しては、新しい「category.php」を作って、「category-ID.php」に名前を変えます。　IDのところはカテゴリーのIDを入れ替えます。たとえば、「新着情報」のカテゴリーIDが 4 なら、「category-4.php」に変えます。