モック制作時、サイドカラムのメニューの中の仮文言を本物の文言に差し替えたら、長くてカラムからはみ出してしまった経験があるかと思います。これを回避するために文字幅を固定したテキストブロックを作るのですが、マウスでやろうとしたらなかなか面倒なものです。

今日は文字の幅をぴったりに合わせる方法をいくつか実験してやった分をまとめていきます。実験ではFireworks CS6を使用しているので、CS4からでもだいたい同じ挙動をするかと思います。

テキストブロックの固定幅・変動幅の切り替え

既存のテキストオブジェクトの幅を固定する

テキストオブジェクトはテキストを編集時のバウンディングボックスの右上の形によって、文字数によってテキストブロックが変動するタイプものか、すでに固定されているものかを判断できます。

右上が丸になっている場合は変動幅のテキストオブジェクトで、四角になっているものが固定幅のテキストオブジェクトになっています。

既存の変動幅のテキストオブジェクトを固定幅にする場合は、隅についている四角や丸(バウンディングボックス)のどれかをドラッグアンドドロップすると、固定幅のテキストオブジェクトに変わります。変動幅から固定幅にするとき、文字の縦位置が2px程度上に移動するので気をつけてください。

あらかじめドラッグアンドドロップで固定する

最初からテキストオブジェクトとしてテキストを挿入する場合は、テキストツールを選択して大きさをドラッグアンドドロップをすると、文字幅を固定でテキストブロックを作ることができます。

テキストツールを選択し、カンバスをドラッグアンドドロップ

固定幅の大きさを変更する

ドラッグアンドドロップで変更する

テキストブロックを選択ツールで選択後、バウンディングボックスの6つのどれかをドラッグアンドドロップすると、テキストブロックの幅を固定できます。

これだと同じテキストオブジェクトを複数作らなくてはいけないときにコピーするのが面倒なので、他の方法も紹介していきます。

プロパティインスペクタで変更する

プロパティインスペクタで幅と高さを指定すると、変動幅のテキストでも固定幅のテキストに変更できます。ちなみに、このとき入力した高さは無視されますので、幅の数値を変えるだけで大丈夫です。

コマンドで変更する

[コマンド]→[テキスト]→[幅を設定]でテキストの固定幅の値を変更できます。プロパティインスペクタまでマウスカーソルを持って行くのが面倒なので、僕はショートカットを割り当てて、こちらをよく使います。

ただし、注意点があります。こちらは数値を「200」と入れても、実際にプロパティインスペクタでは「204」となっています。入力する際には、反映したい数字から「4」を引いて入力します。幅を200ピクセルに収めたいときは、「196」と入力します。

Fireworksに表示したい幅から4ピクセル引いた数字を入力

また、値を「0」とすると変動幅に戻すこともできます。

PI_Utilityで変更する

拡張機能のピクセルラボさんのPI_Utilityの拡張機能の中でも文字の幅を数値を入力して指定することができます。

ただし、コマンドで変更したときと同じで幅を「200」と指定しても、プロパティインスペクタでは「202」とされてしまいます。逆算して指定したい幅から「2」を引いた数を入れて、テキストブロックの幅を調整します。

Fireworksで表示したい幅から2ピクセル引いた数字を入力

まとめ

なるべくなら入力した値がそのまま幅にが反映されてほしいところですが、現状はこんなところです。う〜ん。

  挙動 指定時の数値
プロパティインスペクタで指定 そのままの数値が反映 指定値そのまま
コマンドで指定 4px大きく反映 幅 - 4
PI_Utilityで指定 2px大きく反映 幅 - 2

デバイステキストで表示するものは、2行にまたがるものと考えて、固定幅にしています。さらに行送りを整えておくと、コーディングのときにline-heightを入れるような癖がついたり、「2行目以降どうしよう」と考える癖もつきました。

デバイステキストを固定幅で整えておく方法、おすすめです。