Mac OS Xの裏技

TheAppleBlogに載ってたOS Xの裏技。
OS X Hidden Gems
知らないものが多かったので自分用にメモ！
こういうの知っていると作業効率が全然違ってきますから、積極的に覚えていきたいです。

• 作成中のファイルをセーブしていない時は、ウィンドウを閉じる赤いボタンの中に黒い丸が出ている。
  
  
• ファイルを保存する時、キーボードの「/」を押すと保存先のフォルダを選ぶダイアログが出る。
  移動したいフォルダのパスを入力するとそこに移動。
  
  
• Shift＋Control＋イジェクトキーでディスプレイのスリープ。
  
  
• メニューバーのAirMacアイコンをクリック。プルダウンメニューを出している時にOptionキーを押すと、通信速度付きで接続先を一覧表示。
  
  
• ファインダーで、Controlキーを押しながらフォルダ名の頭のアイコンをクリックすると、上の階層のフォルダがプルダウン表示されて移動できる。
  
  
• Control ＋ Option ＋ Command ＋ 8 で、モニターのカラー反転。
  
  
• SafariやMailで、単語を選択して Control ＋ Command ＋ D を押すと、辞書を起動してその場に表示。
  （日本語なら国語辞典、英語なら和訳を表示しました。）
  

何となく知ってても、いざとなると肝心なショートカットを忘れちゃうんですよね〜。
自分で一覧作ってプリントアウトしておこうかなぁ。

PhotoshopでFaviconを作る

たまに必要になって、その度に調べてる気がする「Favicon（ファビコン）」について、メモっておくことにします！

Faviconを作る

Faviconは.GIFや.PNGでもいいのですが、IEが.ICOじゃないとダメみたいなので、ICOファイルを作ります。

私はPhotoshopでアイコンを作るので、プラグインを使うのがラクです。

プラグインのダウンロードはこちらから。
Telegraphics - Free plugins for Photoshop & Illustrator...and other software

「ICOFormat.8bi」というプラグインファイルを、Photoshopの「プラグイン」＞「ファイル形式」フォルダに入れておくと、「別名で保存」のプルダウンメニューからICO形式を選べるようになります。
ちゃんと透過アイコンもできます。

あと、マルチアイコンにしたいんだったらこんなのもいいですね～。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

サイズはマルチアイコンの場合、16×16、32×32、64×64（MacOSX用）、128×128（MacOSX用）。
マルチにしない時は16×16で大丈夫そうです。

設定の仕方

＜head＞内で指定します。

<link rel="shortcut icon" href="ファイル名" />
<link rel="icon" href="ファイル名" type="image/vnd.microsoft.icon" />

『image/vnd.microsoft.icon』っていうのが .icoファイルのメディアタイプです。

表示されないとか更新されないとか不具合が起きやすいので、＜link rel=～＞の前に

 <script language="JavaScript">
  var image = new Image()
  image.src = "ファイル名"
 </script>

と書いておくと良いらしいですよ。

Timesが選んだベストデザインブログ50

これ、かなりツボです。
50 of the world's best design blogs - Times Online
クリスマス前なのでギフトやインテリアの参考に…ということらしく、かわいい雑貨やインテリアのブログがたっぷり50個載ってます。

知っているブログも多かったのですが、知らないのもいっぱい♪
眺めているだけでも楽しいです。

個人的にはこの辺が好きです。

• Apartment Therapy
• Design Sponge
• Oh Joy!
• Decor8
• Emma's Design Blog
• Bloesem
• Print and Pattern
• Grain Edit

トラのイラスト、無料です♪

2010年は寅年！ということで、虎（寅）の絵を描きました。
（ちょっとかわいい感じになっちゃったので、トラ猫っぽいですね・・・。）
けど使わなかったので、なんとなくここに置いておきます。

もし気に入ってくださる方がいましたら、良識的な範囲でご自由にお使いください。
（もし何かの間違いでいっぱいダウンロードされるようだったら、その時考えよう！）
商用利用も可！と一応書いておこう。

こちらからどうぞ。
File Download（Zip）

形式はPNG、背景は透過です。
あ、入ってるイラストは上の1個だけですので・・・。

WordPressのフレームワーク

最近はWordPressの勉強をちょっとだけしています。
と言ってもデザイナーなので主にデザインまわり。

フリーのテンプレートはいっぱいありますが、英語に最適化されてるのが多いし、一通り理解するためにもテンプレートを最初から自分で作ってみたりしたのですが、タグがいっぱいあってめんどくさいんです・・・。

シンプルなテーマを加工した方がいいかなぁ、と思い始めて探してみると、カスタマイズ用のフレームワークっていうのがいっぱいあるんですね。

個人的な好みでいくつか選んでみました。

• Hybrid WordPress Theme Framework
  （Demo）


• Carrington - The CMS Theme Framework for WordPress
  （Demo）
  Blog、Text、Mobileの3種類あります。


• Thematic, A WordPress Theme Framework
  （Demo）


• The Buffet Framework

タブなどのjQueryが既に組み込んであったりして、かなり便利そうです。
使い心地が良さそうのなのを選んでいじってみようと思います！

IEでも大丈夫な、角丸にするJavaScript

ひとつ前の記事で書いた角丸にするスクリプト、便利なのですがIE6に対応してないのでお仕事で使うには微妙・・・と思っていたら、Internet Explorerでも大丈夫なスクリプトを発見しました！

↓こちらです。
CurvyCorners - Beautiful rounded corners for your HTML boxes

一応、使い方もメモ。

<script type="text/JavaScript" src="curvycorners.js"></script>

JavaScriptを読み込んで、

<script type="text/JavaScript">
  addEvent(window, 'load', initCorners);
  function initCorners() {
    var settings = {
      tl: { radius: 10 },
      tr: { radius: 10 },
      bl: { radius: 10 },
      br: { radius: 10 },
      antiAlias: true
    }
    curvyCorners(settings, "#myBox");
  }
</script>

コーナーのサイズと、角丸にするオブジェクト（idやclass）を指定します。
かんたん！

ボーダー、背景画像などにも対応。使いやすいです。
試してみたら、確かにIE6でも大丈夫でしたよ！

今さらですが、角丸にする「jQuery Corner」

今さらな感じもしますが、何度も検索している気がするので、自分用にメモ。

オブジェクトの角を丸くするjQueryスクリプトです。
JQuery Corner Demo

まず読み込んで、

<script type="text/javascript" src="/js/jquery.js" charset="utf-8"></script><br /><script type="text/javascript" src="/js/corner.js" charset="utf-8"></script>

適用させるidやclassと、丸の大きさを指定します。

<script type="text/javascript">
$('#corner').corner("10px");
</script>

かんたん！

もちろん、borderが指定されていても大丈夫です。
他にもいろいろな効果が付けられますが、Round以外はめったに使わないんですよね～。

IE6はダメみたいなので、角丸じゃなくても大丈夫なデザインにしておくと安心です。