概要

リッチテキストエディタでは、バルーンまたはシャウトアウト内のテキストをデザインし、強調、パーソナライゼーション、色のカスタマイズ、画像、動画、ハイパーリンクなどを追加できます。

ユースケース

リッチテキストエディターの使用例には以下のようなものがあります。

• エラーメッセージとしてバルーンをデザインする。
• サイトに戻ってきたユーザーを名前で歓迎する。
• 他のスマートウォークスルーを、バルーンのテキストで、直接開始するオプションをユーザーに提供します。

使用方法

リッチテキストエディターでは、BBCodeを適用して、簡単にフォントのサイズ、色、スタイルなどを変更したり、ハイパーリンク、動画、画像、ダイナミックテキストを追加したりできます。 RTEでツールを使用すると、このBBCodeが適用されます。 ソースビューを入力して自分でBBCodeを書き込んだり、CSSコンソールを開いて他の編集オプションを利用したりすることもできます。

WalkMeコンテンツを作成したら、オプションメニューに戻り、個々のアイテムの外観や動作に必要な変更を行います。 アイテム（ステップまたはシャウトアウト）をクリックして編集すると、特定のアイテム設定メニューのインタラクションタブにリッチテキストエディターが表示されます。

Tabs Overview

リッチテキストエディターレイアウト

リッチテキストエディターは4つのセクションに分かれています。

1. 左側のバルーンのタイトルと説明フィールド
2. 右側のバルーンプレビュー
   • バルーンをプレビューする方法には以下の2つのモードがあります。
     1. ビジュアル：これは、バルーンでBBCodeテキストを視覚化するデフォルトのオプションです。 カスタムCSSが考慮されます。
     2. ソース - このオプションを使用して、裏で何が起こっているかを確認します。
3. 上部のリッチテキストエディターのカスタマイズ機能
4. CSSカスタマイズコンソール
   • 高度なテンプレートを編集して、自分だけのオリジナルを作りましょう！ プレビューでエレメントを選択して、CSで関連する行を見つけます

カスタマイズオプション

以下はカスタマイズオプションの一覧です。

フォント

フォントのカスタマイズフォーマットを使用するには、目的のテキストを強調し、関連するアイコンをクリックします。

• 太字
• 斜体
• 下線
• フォントの色
• フォントサイズ
• テキストの配置

挿入

• ダイナミックテキスト
• WalkMeアイテムへのリンク
  • クリックした際に、WalkMeアイテム（ウォークスルー/スマートウォークスルー/リソース/サーベイ）を起動するリンクを追加します。 エンドユーザーがリンク先のWalkMeコンテンツをクリックすると、それまで操作していた元のコンテンツは閉じられます。
• 画像
  • 画像URLを入力します（画像を挿入する前に、オンラインでホストする必要があります）。 WalkMeがお客様に使用する画像は、Amazon S3サーバーに保存されています。
  • 画像の幅と高さは、元の画像のアスペクト比を保ったまま、バルーンまたはShoutOutのサイズに自動的に調整されます。
  • 必要に応じて編集する画像をダブルクリックすることで画像の幅と高さを調整できます。
  • 画像を削除するには画像 URL の横にあるごみ箱アイコンをクリックするか、テキストエディターでテキストを編集中に Backspace または Delete を使用して削除します。
• リンク
  • URLを入力する
• 動画
  • 対応するホスティングサービスは、YouTube、Vimeo、Wistia、Ustream、Vidyardのリンクです。
  • 対応する動画プラットフォームに動画 URL を入力します。 ビデオは iFrame を使用する MP4 形式である限り、どのプラットフォームからでも再生できます (下の表の BBCode を参照) 。 必要に応じて幅と高さを入力します。
    この動画は存在しません

    リストにないVimeo動画は、動画の”ハッシュ”がエディターのURLに追加されている場合にのみ埋め込むことができます。 「この動画は存在しません」というメッセージが表示された場合は、エディターのURLに動画の”ハッシュ”を追加されていることを確認してください。

• iFrame
  • URLとオプションのスケール寸法を入力します

BBCode

リッチテキストエディターのボタンを使用して、テキストを簡単に書式設定することができます。 テキストを強調する際、WalkMeはテキストにBBCodeを適用します。 リッチテキストエディターを使用して挿入されたBBCodeを確認する場合は、［Source（ソース）］ビューをご確認ください。

WalkMe機能を使用せずに自分でBBCodeを追加したい場合は、以下の表でBBCodeの例を確認することができます。

以下は、［Source（ソース）］ビューで使用できるが、自動生成用のアイコンがないBBCodeの例です。

CSS

Tip Tuesday動画

BBCode Basics：ヒントと小技

BBcodeでのボタンのカスタマイズ方法

CSSを使用したボタンのアニメ化方法

サポートページに移動する前にFAQのミニメニューを開く

エンゲージメント向けのミニメニュー

カスタムCSSボタン

技術的なノート

• リッチテキストエディター内で[Enter]キーを押すと、自動的にdivタグがBBCodeに追加されます。 重複するdivタグの追加やCSSの上書きを防ぐには、プレビューボックス（ShoutOutやSmart Walk-Thruのバルーンのオプションメニューにあるリッチテキストエディター）ではなく、BBCodeの編集画面を使ってテキストを入力してください。
• バルーンでテキストをマークしてスマートウォークスルーで他のコンテンツや外部リンクにリンクすると、テキストはバルーンのトリガーになり、マップに1として表示されます。 リンクされたテキストにスタイリングが追加されると、トリガーの名前が歪んで、スタイリングタグの一部も表示されます。 スタイリングタグはトリガータグ（[trg]）の外側に、トリガータグは実際のテキストにできるだけ近い場所に保管することをお勧めします。