グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

テキストエディタといえば、自分はこれまでWindowsの「秀丸エディタ」を愛用してきましたが、Macに引っ越した際に「mi」というテキストエディタを使い始めました。
若干勝手が違う部分もありますが、この「mi」も秀丸に負けず劣らず様々な機能を持っています。
その中でも自分が特に便利だと思っている【自作ショートカット】を二つ紹介します。


＜設定手順＞

【1】メニューバー「mi」　→　「モード設定」

【2】「キーバインド」タブを選択

【3】「動作なし」となっている、空いているキーを選択（Shift、Control等のキーとの組み合わせも可能）
※おすすめは同時押しキーなしのF1〜F12キー

【4】同ウィンドウ下部の「動作」のプルダウンから「文字列挿入」を選択

【5】すぐ下の「文字列挿入」の入力エリアに、下記の記述を入力

【6】該当するキーを押して使用！



■行末に<br />をつけ、キャレットを一段下へ移動

<<<MOVECARET-ENDOFLINE
>>><><<<MOVECARET-LEFT
>>>br<<<SPACE
>>>/<<<MOVECARET-DOWN
>>>



■行末の改行を削除

<<<MOVECARET-DOWN
>>><<<MOVECARET-STARTOFLINE
>>><<<DELETE-PREV
>>><<<MOVECARET-STARTOFLINE
>>>



※注意
上記のコードは、ウィンドウ幅、文字数等のテキスト折り返し設定オフ時を想定している設定です。
テキストを折り返ししているテキストでは、正常に動作しない場合がありますので、長い文章には折り返しを解除してご使用下さい。

自分は折り返しオフ派なのでこのように使っていますが、普段折り返しして使用する人にとっては、この手間のせいでショートカットにならないかもしれません......

Dreamweaverの「ブラウザでプレビュー」と「デザインビュー」の機能は
コーディング時の確認にとても役立つ機能ですが、
「サイトの管理」と合わせて使うことでさらに便利になります。

何のことかというと、サイトを設定することで
ルートパスが使われているサイトでもプレビューできる、ということです。


サイトの管理でサーバーの情報（URL接頭辞など）が正しく入っていると、
/（ルート階層）から始まるパスで書かれたファイルも
デザインビューの表示に反映させることができます。

さらに、環境設定から 「ブラウザでプレビュー」＞「一時ファイルを使用してプレビュー」にチェックを入れると、
「ブラウザでプレビュー」したとき一時的にサーバーにファイルが生成され、
実際にアップしたときの見え方を確認することができます。

※その際参照するファイルはサーバー上のものなので、
　画像やスタイルなど必要なファイルはアップする必要があります。


サイト管理の設定をするのは少し面倒かもしれませんが、
毎回 アップ → 確認 とするよりは随分楽になると思います。

Photoshopでデザインすると無数のレイヤーが生まれます。

いざ、画面上に見えているオブジェクト？（ではないですが、要するに見えている"ブツ"）がどのレイヤーなのか分かりにくいこと事もしばしば。どのレイヤーなんだー、探せないっ！というときの為に、そのブツがどのレイヤーなのかすぐに判別できる方法を教えてもらいました。備忘録的に記録。

移動ツール
↓
Macならoptionキーを押しながら、探したいブツを右クリック
↓
レイヤーパレット上でブツのレイヤーが選択されている状態になる

簡単ですが、かなり便利。

以前Skypeをアップデートしたとき、
突然メニュー類が英語表記になってしまって焦ったことがあります。

バグなのかどうかはわかりませんが、
単純に文字の設定が英語になってしまっているだけですので、
日本語に直すのも簡単です。

メニューから
「Tools」＞「Change Language」＞「日本語（Japanese）」を選択。

以上です。

別のPCでもちょくちょく同じ現象が起こっていたので、
一応メモ書きでした。

切り抜き作業で大変なのは、やっぱり髪の毛などの細かい部分。
以前は「抽出」などを使ってなんとかこなしていましたが、
その「抽出」も写真次第では使いづらく、さらにいつの間にかなくなっていました。

ですが、CS5ではさらに簡単で、精度の高い「境界線を調整」という
機能があります。
（機能自体はCS3からあったようですが、CS5で大幅に強化されたとか）


使い方はこんな感じ。


（1）選択範囲を作成する

ここはそれぞれやりやすい方法で良いと思います。
切り抜きたい範囲を選択し、髪の毛などの細かい箇所は大まかに選択します。
内側気味に取ったほうが上手くいきやすい、らしいです。




（2）境界線を調整

選択範囲を右クリックし、「境界線を調整」という項目を選択。
パネルが表示されます。




（3）調整範囲の選択、詳細設定

赤で囲んだ「半径調整ツール」が選択されていることを確認し、
大まかに選択した箇所をなぞります。
何度かやることで髪の毛が綺麗に表示されます。



今回はほぼ無調整ですが、上手く選択されるように設定を調整しましょう。
「不要なカラーの除去」にチェックを入れれば、境界付近の
背景の色が透けてしまっているような部分を自然な色に直すことができます。


（4）完成

OKを押して切り抜き完了。
今まで以上に簡単に、かつ正確に切り抜けました。