画像とテキストの操作

インフォグラフィックス テンプレートに、スタンドアロン エレメントまたはパネルとして画像とテキストを追加できます。 画像とテキストを使用すると、テンプレートのデザインを改善できるほか、変数とサイト情報を表示するよう書式設定することもできます。

画像または図形の追加

インフォグラフィックス テンプレートに画像または図形を追加するには、画像をアップロードするか、図形を選択します。 インフォグラフィックス テンプレートに画像または図形を追加するには、次の手順に従います。

  1. インフォグラフィックス ビルダーで [エレメントの追加] をクリックします。 また、既存のパネルにポインターを合わせて [追加] 追加 または [置換] 置換 をクリックすることもできます。
  2. [画像] 画像 をクリックします。
  3. コンピューター上の画像を選択するには、[イメージの参照] をクリックして画像ファイルを選択します。 Business Analyst に付属の画像の中から選択するには、[形状とアイコン] をクリックし、参照または検索して形状とアイコンを見つけます。

    ヒント:
    テンプレートを開いて編集するには、サポートされている画像ファイル (.png.jpg.gif.svg) をコンピューターからテンプレートの任意のページにドラッグできます。

    画像または図形がテンプレートに追加されます。

画像または図形の編集

画像か図形を編集して、その外観と機能をカスタマイズできます。 インフォグラフィックス テンプレートの画像または図形を編集するには、次の手順に従います。

  1. 画像をサイズ変更または回転するには、画像をクリックします。 サイズ変更または回転ハンドルをドラッグし、画像を調整します。 必要に応じ、ショートカットを使用します。
    • サイズ変更時に Shift キーを押すと、画像の縦横比を維持できます。 Ctrl キーを押すと、画像の中心を基準に画像のサイズを変更できます。 Shift キーと矢印キーを押すと、キーボード コントロールを使用して画像のサイズを変更できます。
    • 回転時に Shift キーを押すと、画像を 10 度刻みで回転できます。
  2. 画像を編集するには、その画像にポインターを合わせて [画像の編集] 編集 または [図形の編集] 編集 をクリックします。
  3. 画像の場合は、[イメージ プロパティ] ウィンドウを使用して、次のいずれかの操作を実行します。
    • [円弧マスク] チェックボックスをオンにすると、画像を円形に切り取ることができます。 [カバー縮尺] チェックボックスをオンにすると、パネルに合わせて画像をサイズ変更できます。
    • [画像の挙動を変更] をクリックすると、この画像パネルにデフォルト ロゴかサイト画像 (ある場合) を表示するよう設定できます。
    • [サイズ] スライダーと [角度] スライダーを使用し、画像をサイズ変更し、画像を回転します。
    • [透過表示] スライダーを使用し、画像の透過表示を変更します。
    • [寸法] セクションと [整列と配置] セクションを展開し、ピクセル値を使用して画像のディメンションと配置を変更します。
  4. 図形の場合、[図形シェープのプロパティ] ウィンドウを使用し、次の操作を行えます。
    • [サイズ] スライダーと [角度] スライダーを使用し、図形をサイズ変更して回転します。 [縦横比を維持] チェックボックスをオンにし、図形の縦横比を維持します。
    • [塗りつぶし] チェックボックスと [枠線] チェックボックス、および色見本を使用して、図形の色を調整します。 [透過表示] スライダーを使用し、図形の透過表示を変更します。
    • [寸法] セクションと [整列と配置] セクションを展開し、ピクセル値を使用して図形のディメンションと配置を変更します。

テキスト ボックスの追加

インフォグラフィックス テンプレートにテキストを追加できます。 テキスト ボックスには、自分で記述したテキストを表示できます。あるいは、高度な編集を使用して、変数値やサイト情報などの動的なフィールドを組み込むこともできます。 インフォグラフィックス テンプレートにテキスト ボックスを追加するには、次の手順に従います。

  1. インフォグラフィックス ビルダーで [エレメントの追加] をクリックします。 また、既存のパネルにポインターを合わせて [追加] 追加 または [置換] 置換 をクリックすることもできます。
  2. [テキスト] テキスト をクリックします。
  3. ドロップダウン メニューで [テキスト ボックス] をクリックします。

    テキスト ボックスがテンプレートに追加され、[テキスト スタイル] ウィンドウが表示されます。

  4. テキスト ボックスにテキストを入力します。
  5. [テキスト スタイル] ウィンドウで、次のいずれかの操作を実行します。
    • テキストのフォント、サイズ、配置、色、エレメントの塗りつぶし色を書式設定できます。
    • [高度なテキスト編集] をクリックし、編集ウィンドウを開きます。 「高度なテキスト編集」をご参照ください。
    • [設定を増やす] をクリックしてテキスト ボックスを複製し、スタイルをコピーするか、テキストを消去します。 インフォグラフィックスの閲覧者がテキストを編集できるようにするには、[テキスト編集の有効化] チェックボックスをオンにします。 [動的なフィールドまたはノートの追加] をクリックし、動的コンテンツを追加します。 「動的なフィールドまたはメモノートをテキスト エレメントに追加」をご参照ください。
    • [枠線] セクションを展開し、テキスト ボックスに枠線を追加して、書式設定します。
    • [寸法] セクションと [整列と配置] セクションを展開し、ピクセル値を使用してテキスト ボックスのディメンションと配置を変更します。

テキスト パネルの追加

インフォグラフィックス テンプレートにテキスト パネルを追加できます。 テキスト パネルは、テキスト ボックスに加え、タイトル、画像、変数などの他のエレメントで構成されます。 インフォグラフィックス テンプレートにテキスト パネルを追加するには、次の手順に従います。

  1. インフォグラフィックス ビルダーで [エレメントの追加] をクリックします。 また、既存のパネルにポインターを合わせて [追加] 追加 または [置換] 置換 をクリックすることもできます。
  2. [テキスト] テキスト をクリックします。
  3. ドロップダウン メニューで [パネル] をクリックします。

    テキスト パネルがテンプレートに追加され、[テキスト スタイル] ウィンドウが表示されます。

  4. テキスト パネルにテキストを入力します。 [エレメントの追加] をクリックし、テキストに付随する他のパネル エレメント (タイトルや画像など) を選択します。
    注意:

    パネル書式設定オプションを使用するには、パネルにエレメントを追加する必要があります。 エレメントを追加しなければ、パネルはテキスト ボックスになります。

    エレメントを選択すると、パネルに追加されます。 パネルのエレメントを移動、サイズ変更、回転できます。

  5. [適用] をクリックします。
  6. パネル内のエレメントを編集するには、そのパネルにポインターを合わせて [編集] 編集 をクリックします。 テキスト エレメント (タイトルやテキスト ボックスなど) にポインターを置き、[テキストの編集][スタイルとフィールドの編集] をクリックします。

    [テキスト スタイル][タイトルのスタイル]、または [サブタイトルのスタイル] ウィンドウが表示されます。

    注意:

    パネル内のテキスト以外のエレメントを編集するには、画像と図形変数チャートマップを編集する手順に従います。

  7. ウィンドウで、次のいずれかを実行します。
    • テキストのフォント、サイズ、配置、色、エレメントの塗りつぶし色を書式設定できます。
    • [高度なテキスト編集] をクリックし、編集ウィンドウを開きます。 「高度なテキスト編集」をご参照ください。
    • [設定を増やす] をクリックしてテキスト ボックスを複製し、スタイルをコピーするか、テキストを消去します。 インフォグラフィックスの閲覧者がテキストを編集できるようにするには、[テキスト編集の有効化] チェックボックスをオンにします。 [動的なフィールドまたはノートの追加] をクリックし、動的コンテンツを追加します。 「動的なフィールドまたはメモノートをテキスト エレメントに追加」をご参照ください。

変数をテキストとして追加

変数をテキストとしてインフォグラフィックス テンプレートに追加できます。 テキスト ボックスには、インフォグラフィックスを実行するサイトに対して選択された変数の値が動的に表示されます。 変数をテキストとしてインフォグラフィックス テンプレートに追加するには、次の手順に従います。

  1. インフォグラフィックス ビルダーで [エレメントの追加] をクリックします。 また、既存のパネルにポインターを合わせて [追加] 追加 または [置換] 置換 をクリックすることもできます。
  2. [テキスト] テキスト をクリックします。
  3. ドロップダウン メニューで [変数] をクリックします。
  4. データ ブラウザーを使用し、変数を検索して選択します。

    変数がテキストとしてインフォグラフィックスに追加され、数、パーセンテージ、インデックスを表します。

  5. 変数を含むテキスト エレメントを編集するには、そのテキスト エレメントにポインターを合わせて [スタイルと形式の編集] 編集 をクリックします。

    [スタイルと形式] ウィンドウが表示されます。

  6. [スタイルと形式] ウィンドウで、次のいずれかの操作を実行します。
    • テキストのフォント、サイズ、配置、色、エレメントの塗りつぶし色を書式設定できます。
    • [高度なテキスト編集] をクリックし、編集ウィンドウを開きます。 「高度なテキスト編集」をご参照ください。
    • [設定を増やす] をクリックしてテキスト ボックスを複製し、スタイルをコピーするか、テキストを消去します。 [条件][テキスト スタイリング][画像] をクリックし、変数値に基づく条件付きスタイリングを追加します。 [動的なフィールドまたはノートの追加] をクリックし、動的コンテンツを追加します。 「動的なフィールドまたはメモノートをテキスト エレメントに追加」をご参照ください。
    • [表示形式] セクションを展開し、数値形式 (小数点以下の桁数など) を指定します。
    • [枠線] セクションを展開し、テキスト ボックスに枠線を追加して、書式設定します。
    • [寸法] セクションと [整列と配置] セクションを展開し、ピクセル値を使用してテキスト ボックスのディメンションと配置を変更します。

高度なテキスト編集の実行

複数の変数およびテキストを使用した文章と段落の作成、テキストの部分的なスタイル変更、ハイパーリンクの追加が可能です。 高度なテキスト編集を実行するには、次の手順に従います。

  1. [テキスト スタイル] または [スタイルと形式] ウィンドウで [高度なテキスト編集] をクリックします。

    [変数をテキストに追加] ウィンドウが開き、ビルダー エリアにテキスト ボックスが表示されます。

  2. [変数をテキストに追加] ウィンドウで、データ ブラウザーを使用して変数を検索します。 変数を追加するには、テキスト ボックスにドラッグします。
  3. テキストの式を構築します。 次のいずれかを実行します。
    • テキストを追加または変更するには、テキスト ボックスとタイプの内側をクリックします。 テキストを書式設定するには、テキストをハイライト表示して [テキスト スタイル] オプションを使用します。
    • テキスト ボックスにサイト情報か属性を挿入するには、[動的なフィールドまたはノートの追加] をクリックします。 ドロップダウン メニューを使用してフィールドを選択します。

    テキストにポインターを置き、不連続のブロックに関する情報を表示します。

  4. テキストの編集と書式設定を完了したら、[保存] をクリックします。

動的なフィールドまたはノートをテキスト エレメントに追加

動的なフィールドまたはサイト ノートをテキスト エレメントに追加できます。 これは、テキスト エレメントと、サイト属性に入力された情報をリンクするものです。 動的なフィールドまたはノートをテキスト エレメントに追加するには、次の手順に従います。

  1. [テキスト スタイル] または [スタイルと形式] ウィンドウで [動的なフィールドまたはノートの追加] をクリックします。
  2. ドロップダウン メニューを使用し、テキスト ボックスに表示するフィールドを選択します。
    注意:

    [テキスト スタイル] または [スタイルと形式] ウィンドウから動的なフィールドを追加すると、テキスト ボックスのコンテンツが削除され、選択したフィールドに置換されます。 大きいテキストの一部として動的なフィールドを追加するには、「高度なテキスト編集」をご参照ください。