グラデーション編集支援ツールに続き、今回はテキストのスタイルを編集できるツールを作成いたしました !
影付けあたりは特に便利ですので、ぜひ使ってみてください。
ここの冒頭の画像も、このツールで作っていますが、周囲のぼかしなど思いがけないものもできてしまいますので、デザインの幅がぐんと広がります。
あなたのWEBデザインがワンランクアップすることは間違いありません。
主な特徴
○ イラストレーターなどで、テキストの装飾をして画像として作り出すことは普通に行いますが、このツールでは、CSSのスタイルで作成します。こうすることのメリットは、・すぐに修正ができること、 ・CSSアニメーションに活用できることなどがあります。
○ スタイルを変更すると、リアルタイムに刻々とデザインが変わっていくので、納得の行くまで簡単に編集できます。
○ テキストの色、影の色、背景色などを、別途、色生成ツール画面で作成できます。これもスライドバーの移動とともに、全ての値が連動して変わるため、便利です。
○ テキストシャドウを何重にも設定することが可能です。中抜きの縁取りのついた文字の作成も可能で、その時も追加で影を付けることができます。これと同じことをこのような編集支援ツールなしにやれば、相当大変です。
○ いったん作成し取得した色も、ラジオボタンをクリックすると、色作成画面に再現されますので、色の微調整に便利です。
使い方
- ツールを開くと、初期値として「サンプル」の文字が入っています。文字は「テキスト」のところで書き換えてください。
- 大きさは、初期値が50pxですので、適宜書き換えてください。
- フォントを変えたい時は「選択」のボタンを押して、現れるテーブルにおいて、フォントファミリーの種類の上でクリックしてください。その欄に色が付くと同時に、そのフォントファミリーのテキストに書き換わります。
- フォントファミリーのテーブルを消す時は、もう一度「選択」ボタンを押してください。
- 色を指定する時は、上にある「色作成」ボタンをクリックし、左に現れる作成用画面でスライドバーを動かすなどして、色を作成してください。なお、初期値は赤色です。右側にある「取得」ボタンを押すと、作成した色番号が転記され、それと同時にテキストの色が変わります。
- 取得した色を変更したい時は、その左側にある丸いラジオボタンにチェックを入れてください。そうすると、色作成画面の色番号が全てその色に対応して変わりますので、微調整をしてください。
- 影を追加するときは、上の「影追加」ボタンをクリックしてください。指定できる4行の欄が追加されます。
- 文字の周囲全体に縁取りのある文字にしたいときは、「中抜き」にチェックを入れて、4つの値を指定してください。
- 編集し終わったら、CSSのスタイルのコードをコピーして、ご自身のファイルのスタイル指定のところにペーストしてください。クラス名が「text」となっていますので、適宜変更してください。
課題
○ 「px」など指定された単位以外は使える場合もあるかと思いますが、間違った入力をした時のエラーメッセージは出ません。ただし、何も指定しない場合は、問題なく作動します。
○ 「拡大率」は増減ボタンで0.1ずつ変わるようにすれば良いですが、1つずつ変わります。滅多に使わない機能だと思いますので、各自で手動で書き換えてください。
○ フォントファミリーの選択をスマホで行う場合、ポップアップ画面を消すのが、(もう一度「選択」ボタンを押さないといけないので)少々面倒ですが、スマホでの利用がなくいこと、また、フォントファミリーの変更も少ないことから、改善していません。
まとめ
今回は、テキストのスタイルを編集するツールを作りました。
文字本体の色と影の色(ぼかしもできます)など、どのような色の組み合わせが良いかの検討や、影を複数にすることで、あまり普通の人が作らないようなユニークなデザインも可能になります。
CSSでいきなり作ると、いちいち変更してアップロードして確認するのが大変ですが、このツールではそのような手間なしにその場で瞬時に、1ポイントずつ確認できるので、便利であるとともに、納得のいくデザインの作成が可能となります。
グラデーション編集支援ツールとともに、ぜひご活用ください。