2012年08月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

デザインの肝の1つはテクスチャだな、と思った

僕はデザイナーじゃないが、最近少しだけWEBデザインもしている。

本職のデザイナーが作ったかっこいいものと、僕が作ったなんとなく垢抜けない物。

何が違うのかな、と観察していて、肝はこのへんかなと思ったのが、

・グラデーションの作り方
 →できるだけ色の変化が少ないほうがよい

・1pxのハイライト
 →いろんなところに使える。ぐっとおしゃれに。 

・テクスチャ
 →fireworksにもともと入っているテクスチャはださい。
 「fireworks テクスチャ」で検索して、どんどんイイヤツを取り込もう。


■テクスチャの取り込み方(mac)

①Finderのサイドメニューから「アプリケーション」を開く
② Fireworks > Configuration > Texturesにいく
③そこにダウンロードしてきたテクスチャ画像をぶちこむ
④Fireworksを再起動する


特に、背景でつかえるような布や紙っぽいテクスチャ 。

インパクトを出したい 文字画像等に使える岩っぽいテクスチャ。

ポップなWEBサービスで多用されている斜線のテクスチャ。
(もともとはいってる斜線テクスチャはまったく使えませんね)


がオススメ。

楽天のRMSでCSSの背景化した画像のロールオーバー(マウスオーバー)がうまくでないを解決する

楽天RMSだと、ロールオーバー用のjavascriptって使えないじゃないですか。

しょうがないから、cssで背景化して、background-positionで
1枚の画像の位置を変える という、よくあるやり方をやろうとしたら、

IEでうまくいかない。
IE6,7,8,9で全部でうまくいかない。

調べてみたら、
background-positionはhover前もhoverあとも、絶対値で指定しないとだめなんだって。

楽天の場合。

よくやるやり方はこうだと思う↓

.menu1 a{background:url(img/menu1.gif)  no-repeat left top;}
.menu1 a:hover{background:url(img/menu1.gif)  no-repeat left bottom;}

menu1.gifという1枚の画像をマウスを乗せることによって、bottomを見せるというやり方。

ところが、楽天だとこれがエラーになる。
(なんでなのかはわからない)

なので、下のようにやる

.menu1 a{background:url(img/menu1.gif)  no-repeat 0px 0px;}
.menu1 a:hover{background:url(img/menu1.gif)  no-repeat 0px -20px;} 

 
一応書いたやつを全部のせておきます。

#globalmenu li{float:left;}
#globalmenu li a{
text-indent:-9999em;
overflow:hidden;
font-size:10px;
display:block;
height:59px;
}

#globalmenu li.menu1 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu1.png) no-repeat ;width:60px;}
#globalmenu li.menu2 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu2.png) no-repeat ;width:59px;}
#globalmenu li.menu3 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu3.png) no-repeat ;width:75px;}
#globalmenu li.menu4 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu4.png) no-repeat ;width:129px;}
#globalmenu li.menu5 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu5.png) no-repeat;width:115px;}
#globalmenu li.menu6 a{background:url(http://www.rakuten.ne.jp/gold/**/img/common/gmenu6.png) no-repeat;width:118px;}

#globalmenu li a{background-position:0px 0px !important;}
#globalmenu li a:hover{background-position:0px -74px !important;} 


冷えピタの仕事のはかどり方はすごい。PC作業に。

僕はプチノマドなので、たまには家で仕事をしています。

ところが家にある仕事部屋には、クーラーがありません。

暑い日に仕事をしていると、だんだんボンヤリしてきて、

「自宅で仕事っていっても全然はかどらないな!」

ってなることありますよね。



これまでは、ジェルアイマスクというのを冷蔵庫で冷やしておでこにまいたりして使ってました。



でもすぐに生暖かくなっちゃうんですよね。30分くらいで。


ネットで冷えピタがいいらしいって知って、 さっそく使ってるのですが、

冷えピタすごい。

ずっと冷たい。




貼った瞬間はちょっと寒気がするほど。



人間のCPUである、脳みそも熱をもつと、処理能力が落ちますたぶん。

夏の仕事のおともに、冷えピタ。


ドラッグストアで買って、たぶん経費で落ちます。

Filezillaで鍵認証をつかってSFTP接続する

winSCPでやるっていうイメージがあったけど、
Filezillaでもできるんですね。

お客さんから、
「鍵ファイルを送るのでSFTP接続してください」
と言われ、え、どうやんの?ってことで調べましたら、すでにありました。

http://www.ark-web.jp/sandbox/wiki/2562.html 


「全般設定」というタイトルの下からやっていけばいいようです。

必要ファイルは

・ホスト
・ユーザ名
・putty鍵ファイル( 拡張子がppk)というやつ
・パスフレーズ

です。
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ