「WYSIWYGエディタ」について

最終更新日:

2021/11/11のUI刷新 第一弾リリースにてカラースキーム(配色設計)とタイポグラフィ(文字の書体、大きさ、配列のしかたなど)を変更しております。オンラインマニュアルに掲載している画面キャプチャと実際の管理画面の配色や文字の状態が異なる場合がございますがご了承いただけますと幸いでございます。

「SATORI」のメールテンプレート機能、HTMLパーツ機能、ウェブページ機能では、HTMLを編集するツールとして「TinyMCE」というWYSIWYGエディタを利用しております。

画像やリンクの挿入など基本的な操作は、コーディングやHTMLの知識がなくても簡単に行うことが可能です。

エディタのツールバーの概要と、利用頻度の高い基本的な操作についてご案内します(2024年6月19日時点の情報です)。

 

目次

ツールバーの概要

ツールバーの概要については以下に記載します。

アイコン アイコン名称 操作内容
editor_240613_1.png 元に戻す

ひとつ前に行った動作を取り消します

editor_240613_2.png やり直す 直前に取り消した動作を再度行います
editor_240613_3.png 書式 選択した文字列やコンテンツの書式を変更します
editor_240613_4.png 太字 選択した文字列を太字にします
editor_240613_5.png 斜体 選択した文字列を斜体にします
editor_240613_6.png 左寄せ 選択したコンテンツを左揃えにします
editor_240613_7.png 中央揃え 選択したコンテンツを中央揃えにします
editor_240613_8.png 右寄せ 選択したコンテンツを右揃えにします
editor_240613_9.png 両端揃え 選択したコンテンツを幅に合わせ均等に配置します
editor_240613_10.png 箇条書き 選択したコンテンツを箇条書きにします
editor_240613_11.png 番号付き箇条書き 選択したコンテンツを番号付きの箇条書きにします
editor_240613_12.png インデントを減らす 選択したコンテンツの先頭に入っているスペースやタブを減らして、左にずらします
editor_240613_13.png インデントを増やす 選択したコンテンツの先頭にスペースやタブを入れて、右にずらします
editor_240613_14.png テキストの色 選択したテキストの色を指定します
editor_240613_15.png 背景色 選択したテキストの背景色を指定します
editor_240613_16.png リンクの挿入・編集

リンクを挿入・編集します

詳細はこちらを参照ください

editor_240613_17.png 画像の挿入・編集

画像を挿入・編集します

詳細はこちらを参照ください

editor_240613_18.png メディアの挿入・編集 メディアを挿入・編集します
editor_240613_19.png

特殊変数

※メールテンプレート機能のみ

特殊変数を挿入します

特殊変数についてはこちらの「特殊変数について」を参照ください

editor_240613_20.png

トラッキングURLに置換

※メールテンプレート機能のみ

すべてのリンク先URLをトラッキングURLに置換します
editor_240613_21.png プレビュー モーダルウィンドウでプレビューします
editor_240613_22.png ソースコード ソースコードを編集します

 

基本的な操作

画像を挿入する

事前に「SATORI」の「画像」機能に画像をアップロードしておく必要があります(貴社サーバーにアップロードしている画像を挿入する場合は不要です)。

「SATORI」の「画像」機能へのアップロードの手順は、オンラインマニュアル(「画像」について)をご参照ください。

(1) 画像を挿入したい場所にカーソルを移動します。

(2) ツールバーの「画像の挿入・編集」をクリックします(右クリックから「画像」選択でも可能です)。

editor_240612_1.png

(3) 画像の挿入・編集をします。

editor_240612_2.png

    1. 「画像のソース」で事前にアップロードしていた画像を選択します(貴社サーバーにアップロードしている画像の場合はURLを記入します)。
    2. 「画像の説明文」を記入します(任意)。画像が表示されなかった場合に代わりに表示する文字列になります(HTMLのalt属性に該当します)。
    3. 「画像サイズ(横・縦)」を記入します(任意)。記入しない場合は画像のデフォルトのサイズになります。

(4) 「OK」ボタンをクリックします。

リンクを挿入する

(1) リンクを挿入したい場所にカーソルを移動します。

(2) ツールバーの「リンクの挿入・編集」をクリックします(右クリックから「リンク」選択でも可能です)。

editor_240612_3.png

(3) リンクの挿入・編集をします。

editor_240612_4.png

    1. 「リンク先URL」にリンクしたいURLを記入します(カメラアイコンから事前にアップロードしていたファイルを選択することも可能です)。「ファイル」アップロードの手順は、オンラインマニュアル(「ファイル」について)をご参照ください。
    2. 「リンク元テキスト」を記入します。
    3. 「タイトル」を記入します(任意)。マウスオーバーした場合に表示する文字列になります(HTMLのtitle属性に該当します)。
    4. 「ターゲット属性」を選択します。リンク表示を同ウィンドウではなく、新規ウィンドウにしたい場合は「新規ウィンドウ」を選択します。

(4) 「OK」ボタンをクリックします。

注意事項

  • HTML・CSS・JavaScriptの具体的な記述方法やデバック対応、WYSIWYGエディタに関するサポートはサポート範囲外となります。
  • WYSIWYGエディタでは、空のタグが削除される、不明なタグを補正・補完するなど、自動で修正が入る場合があります。

よくある質問/トラブルシューティング

エディタ上でEnterキーを押す場合Shiftを押しながらEnterキーを押す場合では、挙動が異なります。
Enterキーを押すと同じ段落内で改行し、Shiftを押しながらEnterキーを押すと新しい段落を作成します。

※「見出し」を設定する場合は、Shiftを押しながらEnterキーを押し、新しい段落を作成してください。

違いについては以下をご参照ください。

Enterキーを押す場合

段落を分けずに、同じ段落内で改行します。

エディタでの表示(一例):

editor_240621_1.png

ソースコード(一例):

editor_240621_2.png

Shift + Enterキーを押す場合

新しい段落を作成します。

エディタでの表示(一例):

editor_240621_3.png

ソースコード(一例):

editor_240621_4.png

この記事は役に立ちましたか?

0人中0人がこの記事が役に立ったと言っています