デザイン > ガイドのデザイン > ガイドの外観の設定
  

ガイドの外観の設定

ガイドの外観をカスタマイズできます。組み込みのテーマから選択して、ユーザーがデスクトップのブラウザでガイドを実行するときにガイドがどのように表示されるかを決めることができます。ガイドの実行時に表示される手順をカスタマイズすることもできます。

ガイドの外観

[ガイドの設定]ページを使用して、組織レベルで、ガイドのテーマを指定し、ガイドのイメージを管理します。
[ガイドの設定]ページ上のタブを使用して、ガイド設定を構成します。
テーマ
ガイドを設定するためのテーマを組み込みテーマのリストから選択します。次のいずれかを選択できます。
次の図は、[ガイドの設定]ページの[テーマ]タブで[ライトニング]テーマが選択されている状態を示しています。
この図は、[ガイドの設定]ページの[テーマ]タブを示します。[ライトニング]のテーマが選択されており、スタイルエディタには、このテーマのCSSが表示されています。
[スタイルエディタの表示]をクリックして、テーマに含まれるガイドステップ、パラグラフ、または文字のCSSを表示および編集します。エレメントの種類で通常使用できる任意のCSSプロパティを使用できます。
例えば、ステップのヘッダーテキストの色を青に変えるには、次のCSSを設定します。
aesf-theme div.aesf-theme-instructions-header h1 {
color:blue;
}
テーマを選択し、設定して保存すると、そのテーマは組織内のすべてのガイドに適用されます。
画像
[イメージ]タブを使用して、ガイドで使用するアイコンを表示および編集します。
次の図は、[ガイドの設定]ページで[イメージ]タブが選択されている状態を示します。
この図では、[ガイドの設定]ページの[イメージ]タブが選択されています。Chatterイメージに関する詳細が表示されています。
[イメージ]タブ最上部の[イメージの追加]をクリックすると、[イメージの追加]ダイアログボックスが表示されます。システムの.gif.jpg.jpeg、または.pngイメージを、アプリケーションの統合のイメージライブラリにアップロードできます。

ガイドの画面エディタ

画面エディタを使用して、ガイドに表示される画面に手順やフィールドを挿入し編集できます。
画面エディタでは、次のツールを使用できます。
ボタン
説明
太字ボタン(太字)
選択したテキストを太字に設定するか、入力しようとしているテキストが太字になることを示します。太字のテキストが選択されているときにこのボタンを押すと、太字が解除されます。(キーボード: Ctrl+B)
斜体ボタン(斜体)
選択したテキストを斜体に設定するか、入力しようとしているテキストが斜体になることを示します。斜体のテキストが選択されているときにこのボタンを押すと、斜体が解除されます。(キーボード: Ctrl+I)
下線ボタン(下線)
選択したテキストに下線を付けるか、入力しようとしているテキストに下線が付くことを示します。下線の付いたテキストが選択されているときにこのボタンを押すと、下線が解除されます。(キーボード: Ctrl+U)
箇条書きリストボタン(箇条書きリスト)
現在のパラグラフに箇条書きが設定されていない場合は、箇条書きにしてパラグラフのインデントを変更します。パラグラフが箇条書きの場合、このコマンドは、箇条書きを解除し、インデントのレベルを1つ減らします。
パラグラフ内または末尾でEnterキーを押すと、次のパラグラフも箇条書きになります。箇条書きリストを終了するには、改行を2回入力するか、このアイコンを再度選択します。
番号付きリストボタン(番号付きリスト)
現在のパラグラフに番号が設定されていない場合は、番号を追加してパラグラフのインデントを変更します。パラグラフに番号が付いている場合、このコマンドは、番号を解除し、インデントのレベルを1つ減らします。
先行するパラグラフが番号付きリストの一部である場合、このコマンドを選択すると、現在のパラグラフがそのリストに追加されます。
パラグラフ内または末尾でEnterキーを押すと、次のパラグラフにも数字が付きます。番号付きリストを終了するには、改行を2回入力するか、このアイコンを再度選択します。
インデントを減らすボタン(インデントを減らす)
現在のパラグラフまたは選択したパラグラフにインデントが設定されている場合に、インデントのレベルを1つ減らします。
インデントを増やすボタン(インデントを増やす)
現在のパラグラフまたは選択したパラグラフに、インデントのレベルを1つ追加します。
リンクの挿入/編集ボタン(リンクの挿入/編集)
選択したテキストをリンクに変更します。このボタンを選択すると、Guide Designerは次のダイアログを表示します。
このダイアログには、次のものが表示されます。
  • - [リンクのURL]: ここに、Webアドレスを入力します。
  • - [タイトル]: ユーザーがリンクにカーソルを重ねると表示されるテキストです。(このテキストは、一部のブラウザで表示されない場合があります。)
カーソルがリンクの任意の場所にある間にこのボタンを押すと、リンクの情報を編集できます。
テキストを選択するのを忘れると、リンクは表示されません。ただし、リンクが作成されます。これを修正するには、<>ボタンを押してリンクを特定します。HTMLがわかる場合は、リンクを直接編集できます。わからない場合は、削除します。(空のリンクのテキストは、「<a href=""><a>」のようになっています。)
リンク解除ボタン(リンク解除)
以前に作成されたリンクを解除します。カーソルは、リンク内の任意の場所に置くことができます。表示するテキストフィールド内のテキストは、このボタンを選択した後も残ります。
画像の挿入/編集(画像の挿入/編集)
画像が選択されていない場合、このボタンを押すと新しい画像を挿入できます。既存の画像やそのプロパティを変更するには、このボタンを押す前に画像を選択します。このボタンを押すと、Guide Designerは次のダイアログを表示します。
上部領域に表示される画像は、[デザインホーム]ページ上にある[設定]ボタンを使用して、以前にGuide Designerにインポートされたものです。また、現在の画面ステップで使用する画像をアップロードすることもできます。ここでアップロードした画像は、このガイド内の他のステップや、他のガイドでは使用できません。
Web上で使用可能な画像を、ステップに挿入することもできます。これは、Webサイトの画像を、画面エディタの挿入先に直接ドラッグして行います。
このダイアログには、次のフィールドがあります。
  • - 検索領域: 左側のテキストボックスを使用して、[タイトル]フィールドまたは[説明]フィールドのいずれかに入力したテキストに基づいて画像を検索します。右側のテキストボックスを使用して、画像にラベルを付けるために使用されたタグを入力します。タグのテキストを入力すると、入力している文字と一致するタグが表示されます。
  • - [URL]: URLを使用してアクセスできる場合は、ここに入力します。
  • - [タイトル]: 画像のタイトルです。
  • - [説明]: 画像を説明するテキストです。このダイアログに追加されたテキストを確認します。
  • - [幅x高さ]: これらのフィールドを使用して、画像の幅と高さを変更します。ピクセル単位でサイズを入力するか、元のサイズに対する割合を入力できます。入力する値は、画像の元の寸法より小さくすることも大きくすることも可能です。幅のみをピクセル単位で入力した場合、サイズは比例して変更されます。例えば、前の例の表示幅を235に変更した場合、表示の高さはブラウザに応じて93または94になります。値を割合で入力した場合、その割合は高さにも適用されます。
  • - [元のW x H]: 保存されたとおりの画像の幅と高さです。
  • - [float]: この選択リスト内のオプションを使用して、挿入された場所との関連で画像の位置を示します。[なし](1列に表示)、[左](画像は左にフロート)、[右](画像は右にフロート)の選択肢があります。
  • - [参照]: このボタンを押すと、コンピュータのファイルエクスプローラを使用して画像を選択できるダイアログが表示されます。選択してその内容を確認すると、ここに画像が表示されます。
元に戻すボタン(元に戻す)
以前に実行したアクションが解除されます。(キーボード: Ctrl+Z)
やり直しボタン(やり直し)
以前に[元に戻す]を選択していた場合にこのボタンを押すと、変更が復元されます。(キーボード: Ctrl+Y)
全画面切り替えボタン(全画面)
ステップのサイズを大きくして、Guide Designerのタブの下の領域全体を占める大きさにします。すでに大きくしている場合にこのボタンを押すと、ステップが元のサイズに戻されます。
注意: エディタが全画面モードの場合は、ステップにフィールドを挿入できません。
(テキストの色)
このボタンを押すと、テキストを表示するときに使用できる色のパレットが表示されます。テキストが選択されていない場合にこのボタンを押して色を選択すると、入力するテキストの色が変わります。このテキストからカーソルを離すと、色はカーソルがあるところの色になります。
このボタンを押して、テキストが選択された状態で色を選択すると、選択したテキストの色が変わります。
背景色ボタン(背景色)
このボタンを押すと、テキストの背後の色に使用できる色のパレットが表示されます。テキストが選択されていない場合にこのボタンを押すと、入力するテキストの背景色が変わります。このテキストからカーソルを離すと、背景色はカーソルがあるところの色になります。
このボタンを押して、テキストが選択された状態で色を選択すると、選択したテキストの背景色が変わります。
検索/置換ボタン(検索と置換)
このボタンを押すと、現在の画面内で特定するテキストを入力できるダイアログが、Guide Designerに表示されます。
[置換]フィールドにテキストを入力して置換ボタンを押すと、選択したテキストが置き換えられます。[すべて置換]を選択した場合、見つけられるすべてのテキストが置き換えられます。
ソースコードボタン(ソースコード)
テキストが表示されている場合にこのボタンを押すと、Guide Designerはテキストのフォーマットに使用されているHTMLを別のブラウザウィンドウで表示します。このブラウザウィンドウは、HTMLソースエディタです。これは切り替えボタンではありません。ソースエディタでの変更が完了したら、[OK]ボタンを押します。
他のツールを表示/非表示ボタン(他のツールを表示/非表示)
画面エディタのボタンに2つ目の行が追加されます。2つ目の行が表示されている場合は、このボタンを押すと非表示になります。
フォントファミリボタン(フォントファミリ)
このボタンを押すと、テキストを表示するときに使用できるフォントの選択リストが表示されます。テキストが選択されていない場合にこのボタンを押してフォントファミリを選択すると、入力するテキストのフォントが変わります。このテキストからカーソルを離すと、フォントはカーソルがあるところのフォントになります。
このボタンを押して、テキストが選択された状態でフォントを選択すると、選択したテキストのフォントが変わります。
フォントサイズボタン(フォントサイズ)
このボタンを押すと、テキストを表示するときに使用できるフォントサイズの選択リストが表示されます。テキストが選択されていない場合にこのボタンを押してサイズを選択すると、入力するテキストのサイズが変わります。このテキストからカーソルを離すと、フォントサイズはカーソルがあるところのサイズになります。
このボタンを押して、テキストが選択された状態でサイズを選択すると、選択したテキストのサイズが変わります。
テーブルボタン(テーブル)
このボタンを押すと、Guide Designerはテーブルコマンドの選択リストを表示します。[テーブルの挿入]を選択すると、ボックスのグリッドが表示されます。マウスを使用して、テーブル内に表示する行と列の数を選択します。
カーソルがテーブル内にある場合、この選択リストで他のコマンドを選択できます。
テーブルプロパティ
選択リストから[テーブルプロパティ]を選択すると、2つのタブを持つダイアログボックスが表示されます。
このダイアログボックスを使用して、テーブルの高さと幅を表示します。(幅は、パーセント記号を使用して割合として設定することをお勧めします。)高さはあまり設定しません。[セルの間隔]は、テーブルセル間のスペースを設定します。[セルの余白]は、セルのコンテンツとセルの端の間のスペースの広さです。枠線を設定する場合は、その幅を示す数を入力します。テーブルにキャプションを設定する場合は(通常、サイズが小さいステップのキャンバスには設定しません)、このボタンを選択します。テーブル上部に小さい領域が表示されます。最後に、[整列]選択リストで[なし]、[左]、[中央]、または[右]を選択します。[なし]と[中央]が最もよく使用されます。
[詳細]タブでは、テーブルのスタイル、枠線、および背景色を設定できます。
[テーブルの削除]コマンドを選択して、キャンバスからテーブルを削除します。
セルのプロパティ
[テーブル]選択リストから[セル]を選択すると、2つ目の選択リストが表示されます。この選択リストを使用して、セルのプロパティ定義、2つのセルのマージ、マージされたセルの分割などを行えます。
セルのプロパティを定義するときに、セルの幅や高さ(通常高さは選択しません)、タイプ(セルまたはヘッダー)、変更の範囲(なし、行、列、行グループ、列グループ)、セルコンテンツの整列(水平と垂直)を指定できます。
行のプロパティ
[テーブル]選択リストから[行]を選択すると、2つ目の選択リストが表示されます。
行のプロパティは、セルのプロパティと似ています。この選択リストのその他のコマンドは、コマンド名のとおりに動作します。
書式のクリア(書式のクリア)
テキストの表示方法が変更された場合にこのボタンを押すと、画面エディタは変更を解除します。
左寄せボタン(左寄せ)
現在選択しているパラグラフまたはカーソルが置かれているパラグラフを、左マージンに揃えます。
中央揃えボタン(中央揃え)
現在選択しているパラグラフまたはカーソルが置かれているパラグラフを、左マージンと右マージンの中央に配置します。
右寄せボタン(右寄せ)
現在選択しているパラグラフまたはカーソルが置かれているパラグラフを、右マージンに揃えます。
行揃えボタン(行揃え)
現在選択しているパラグラフまたはカーソルが置かれているパラグラフの単語から行の間にスペースを追加して、テキスト行が揃うようにします。つまり、すべてのテキストが左マージンと右マージンに揃えられます。
引用ボタン(引用)
選択しているパラグラフまたはカーソルが置かれているパラグラフのインデントを変更します。パラグラフはすでに引用に含まれる場合は、元のマージンが復元されます。