Customize Text – OptiSigns

この記事では、OptiSignsデザイナーアプリでテキストを作成・追加するためのすべてのオプションについて説明します。

テキストの追加
テキストの編集
追加の要素オプション

デザインにテキスト要素を追加するのは簡単ですが、デザイナーには文字を本当に際立たせるための多くのオプションがあります。

デザイナーの基本的な要素について詳しくは、デザイナーを始めるガイドをご覧ください。

テキストの追加

テキストオプションを使用すると、デザインにテキストを挿入できます。

トップメニューからテキストを選択すると、サイドメニューの選択と連動し、さらなるオプションが表示されます：

テキストボックスを追加またはプリセットのテキストオプションをクリックすると、デザイナービューにテキストボックスが追加されます：

テキストの編集

ダブルクリックまたはテキストを選択すると、テキストを直接入力できます。

最後に、テキストの要素ボックスをシングルクリックし、マウスボタンを押したままドラッグすることで、テキストの位置を変更できます。

選択されると、テキスト自体には完全なオプションセットが表示されます：

複製 - 選択したテキストの完全な複製を作成します
削除 - デザインから選択したテキストを削除します
その他
- コピー - 選択したテキストを後で貼り付けるためにコピーします
- スタイルをコピー -
- 貼り付け - クリップボードから要素をテキストに貼り付けます
- 複製 - 選択したテキストの完全な複製を作成します
- コンポーネントを追加 -
- 削除 - デザインから選択したテキストを削除します
- レイヤー - 選択したテキストのレイヤーを変更するオプション
  - 前面に移動 - 選択したテキストを1つ上のレイヤーに移動します
  - 最前面へ移動 - 選択したテキストを最上位レイヤーに移動します
  - 背面に移動 - 選択したテキストを1つ下のレイヤーに移動します
  - 最背面へ移動 - 選択したテキストを最下位レイヤーに移動します
- 要素の整列 - 選択したテキストの配置を変更するオプション
  - 左
  - 中央
  - 右
  - 上
  - 中央
  - 下
- リンク - 選択したテキストにURLを追加します。
- アニメーション - 選択したテキストにアニメーションを追加します。

追加の要素オプション

テキストをクリックすると、トップメニューが変わります：

トップメニューには追加オプションがあります：

フォント

フォントオプション（デフォルトではRobotoとして表示されます）をクリックすると、サイドメニューのフォントセクションが開きます。

デザイナーには数百のフォントオプションがあり、Googleフォントには選択可能なフォントウェイトがあります。いずれかをクリックすると選択され、表示方法のオプションが提供されます：

フォントサイズは、'-'または'+'オプションをクリックするか、フォントサイズの数値をクリックして変更できます。

フォントサイズの数値をクリックすると、プリセットのフォントサイズから選択したり、カスタムサイズを入力したりできます。

ブランドキットを通じてカスタムフォントも提供しています。

カラー

カラーオプションを選択すると、サイドメニューのカラーセクションが開きます。

ここで、プリセットカラー、このデザインで既に使用されているカラー、またはカラーピッカーオプションから選択できます：

カラーピッカー

カラーセレクター
現在選択されている色 / カラードロップツール
カラースライダー
不透明度/透明度スライダー
カラーコード入力
コードスイッチャー - 16進数、RGB、HSLAカラーコードを切り替えます
以前使用した色

注意

不透明度/透明度スライダーは、カラーピッカーが適用されている要素（テキスト、背景、またはカラーピッカーを使用できる他の領域）に適用されます。

カラードロップツールを使用すると、任意の色を簡単に選択できます。

注意

カラードロップツールは特定のブラウザでは利用できません。

テキストスタイリング

太字、斜体、下線、または取り消し線を選択すると、これらの属性が選択したテキストに適用されます。これらのエフェクトは互いに重ねることができ、任意の組み合わせで使用できます。

テキストケース

テキストケースを選択すると、サブメニューが開きます：

ここで、表示用に異なる文字の大小文字を選択できます：

大文字 - 大文字のみで入力できます。
小文字 - 小文字のみで入力できます。
文頭大文字 - テキストを自動的に文頭大文字に書式設定します。
タイトルケース - テキストを自動的にタイトルケースに書式設定します。

配置

配置オプションを選択すると、別のサブメニューが開きます：

ここで、左揃え、中央揃え、右揃え、または両端揃えから選択できます。

間隔

間隔オプションを選択すると、さらに別のサブメニューが開きます：

ここで、文字間と行間の間隔をカスタマイズできます。

リンク

リンクオプションを選択すると、テキストをインタラクティブな要素に変換できます。これは主にキオスクで使用されます。サイドメニューのリンクオプションセクションが開きます：

リンクを追加をクリックすると、URLを入力するか、アセットを選択するよう求められます：

リンクまたはアセットが選択されると、リンクオプションセクションにさらなるオプションが表示されます：

スケールセクションを展開すると、アセットに対するこのオプションが提供されます：

ここで、画像のスケール方法を選択します。3つのオプションがあります：

フィット（デフォルト） - 画像を画面に合わせます。
ストレッチ - 画面全体を埋めるように画像を引き伸ばします。
ズーム - 画像をズームインして画面全体を埋めます。大型ディスプレイ上の小さな画像には推奨されません。ぼやけが生じます。

注意

URLが提供されている場合、スケールオプションは表示されません。

設定セクションを展開すると、リンクに対する以下のオプションが提供されます：

持続時間（秒） - リンクがクリックまたはタップされたときに、メインデザインに戻るまでのリンクまたはアセットの表示時間。これは画面への最後のタッチまたはリンクがクリックされた時間から始まります。
プリロード - チェックすると、デザインがロードされるときにウェブサイトがロードされます。これにより、リンクがクリックされたときのウェブサイトの表示時間が短縮されます。ただし、多数のリンクをロードする必要がある場合は、ラグが発生する可能性があります。

閉じる＆ナビバースタイラーセクションを展開すると、リンクに対する以下のオプションが提供されます：

このセクションは、画面にプッシュされたときに表示されるボタンについて説明しています。このボタンをクリックまたはタップすると、元のデザインに戻ります。

アイコン位置 - このアイコンが表示される場所を示します。デフォルトは下部中央ですが、上部または下部のどこにでも配置でき、完全にオフにすることもできます。
アイコンスタイル - アイコンのスタイルを設定できます。ラベル、ソリッド、ラウンド、またはデフォルト（上記参照）から選択します
アイコンサイズ - アイコンのサイズを変更できます。小、中、大、またはデフォルト（上記参照）から選択します
アイコンカラー - デザインに合わせてアイコンの16進数HTMLカラーを変更します。
背景色 - デザインに合わせてアイコンの背景の16進数HTMLカラーを変更します。
不透明度 - スライダーでアイコンの背景の不透明度または透明度を変更できます。
ナビゲーションバーを表示 - チェックすると、アイコンに小さなナビゲーション矢印が追加されます。複数のリンク間を素早くナビゲートできます。次のようになります：