5章 テンプレート
7. WYSIWYG エディタ設定
WebRelease には、テンプレートの要素の型として「WYSIWYG エディタ」が使えるようになっています。テンプレート中で WYSIWYG エディタ型の要素を定義する場合には、その WYSIWYG エディタの機能をコントロールする「エディタ設定」を指定するようになっています。この時に指定する「エディタ設定」は「テンプレート一覧」画面にある「エディタ設定」タブで作成します。
サイトを作成した直後には「標準」という名称の「エディタ設定」がひとつだけ作成されています。このエディタ設定は WYSIWYG エディタの全機能が使えるように設定された標準的な「エディタ設定」です。
エディタ設定を編集するには、エディタ設定一覧画面で編集したいエディタ設定の編集ボタンをクリックしてエディタ設定編集画面を表示します。
サイトには複数の「エディタ設定」を作成することができます。設定の異る複数の「エディタ設定」を作成しておき、テンプレートの WYSIWYG エディタ要素の側で、状況に応じた「エディタ設定」を選択して指定しておくことで、要素ごとに異なる機能をもった WYSIWYG エディタを使い分けることができるようになります。
エディタ設定で指定可能な項目は下記のとおりです。
エディタ設定名
テンプレートの WYSIWYG エディタ要素から、エディタ設定を指定するときに使用する名称です。各エディタ設定ごとに異なる、わかりやすい名前を付けてください。なお、最初から定義されている「標準」という名称のエディタ設定の名称も、必要があれば変更しても構いません。
機能選択
WYSIWYG の多数の機能のうち、使用を許可する機能を選択して指定します。各機能のチェックボックスを ON にすることで WYSIWYG エディタ画面でその機能が使えるようになります。
| フォーマット削除 | 選択部分に設定されているインライン系のフォーマットを削除する機能。何かと必要になる機能なので通常は ON にしておくと良いでしょう。 |
| ボールド イタリック | 選択部分のテキストを太字や斜体にする機能。 |
| 下線 打ち消し線 | 選択部分のテキストに下線を引く機能。 |
| 上付き添字 下付き添字 | 選択部分のテキストを上付きまたは下付きの添字にする機能。 |
| 特殊文字挿入 | 選択部分に仮名漢字変換などでは入れにくい特殊文字を入れる機能。挿入した文字はすべての端末で表示できるわけではありませんので注意して使用する必要があります。 |
| 左揃え 中揃え 右揃え 両端揃え | 選択部分のテキストを左、右、中央、および両端で揃える機能。 |
| 箇条書 順序付き箇条書 | 選択部分のテキストを箇条書きまたは順序付き箇条書きにする機能。 |
| インデント／アウトデント | 選択部分のテキストをインデントしたり、設定してあるインデントを解除する（アウトデント）機能。 |
| ブロック引用 | 選択部分のテキストを引用形式に変更する機能。選択部分のテキストは HTML の blockquote タグで囲まれた状態になります。 |
| 書式 | 選択部分の書式を設定します。設定可能な書式は HTML の h1 h2 h3 h4 h5 h6 p pre adress div のいずれかです。 |
| フォントサイズ (pt % px) | 選択部分のフォントサイズを設定する機能。フォントサイズの指定は pt % px のいずれでも可能です。サイトのポリシに従ってフォント指定の単位を限定すると良いでしょう。 |
| テキスト色 テキスト背景色 | 選択部分のテキストの色とその背景色を指定する機能。指定可能な色は、後述するカラーパレットにより規定することができます。 |
| 貼り付け（ペースト） | ペーストボードから WYSIWYG 編集エリアに貼り付けを行なう機能。この機能はあまりおすすめではありません。注意して使用してください。ペーストボードに置かれているオブジェクトによって、さまざまな張り付け結果が発生します。例えば、どこかの Web サイトをブラウザで閲覧し、そのページの一部をペーストボードにコピーした後、コピーした部分をこの機能を使って WYSIWYG エディタ内に貼り付けを行なうと、画像などは閲覧していたページの URL を直接参照する形で張り付けられてしまいます。この機能を使って張り付けた結果については、後述する「ソース編集」機能を使って状態を確認できるだけの HTML に関する知識が必要です。安全のために、この機能の代わりに、後述する「プレーンテキスト貼り付け」や「ワード文書から貼り付け」の機能を使うことをお勧めします。 |
| プレーンテキスト貼り付け | ペーストボードの内容を、プレーンテキストとして張り付ける機能。上記の「貼り付け（ペースト）」機能よりも、この機能を使ってコンテンツを組み立てる方が安全です。 |
| ワード文書から貼り付け | ペーストボードの内容が、Word で作成したドキュメントであると仮定して張り付けを行なう機能。不要なタグの除去が行なわれ、比較的クリーンな HTML として貼り付けを行なうことができます。貼り付けに伴って画像とハイパーリンクは除去されます。 |
| テーブル挿入／編集 | テーブルの挿入や編集を行なう機能。編集機能はあまり強力ではありませんが、一応の作表は可能です。 |
| 横罫線 | カーソル位置に HTML の hr タグを挿入する機能。 |
| リンク挿入／編集／削除 | 選択されているテキストにリンクを設定する機能。リンク先には、WebRelease 内の他のページの URL、他のサイトの URL（http:// や https:// から始まる URL)が指定できます。また、pdf やエクセルのファイルをアップロードして添付ファイルとしてリンクすることもできます。後述する「添付ファイルのサイズの制限」を指定することで、アップロード可能なファイルの最大サイズを制限しておくことができます。 |
| アンカー挿入／編集 | カーソル位置にアンカーを挿入する機能。 |
| イメージ挿入／編集 | 画像を挿入する機能。画像は外部の URL を指定するか、または、アップロードして挿入することができます。アップロード可能な画像は jpeg gif png bmp webp のいずれかに限られます。後述する「画像サイズの制限」を指定することで、アップロード可能な画像の最大サイズを制限しておくことができます。 |
| Undo Redo | 操作の取り消しとやり直しが行なえるようにする機能。 |
| 検索 置き換え | WYSIWYG エディタエリア中の文字列の検索と、見つかった文字列部分を（一括して）置換する機能。 |
| すべてを選択 | WYSIWYG エディタ内の全コンテンツを選択する機能。 |
| ソース編集 | WYSIWYG エディタ内のコンテンツをソースモードで編集する機能。HTML の知識がないと使えません。 |
| ブロック構造の表示 | WYSIWYG エディタ内のコンテンツのブロック構造を表示する機能。 |
| 大画面編集 | ページ編集画面全体に広げる機能。普通は WYSIWYG エディタはページ編集画面の一部分に表示されていて、その中でコンテンツの編集を行なうことになりますが、コンテンツが大きく、広い領域を使って編集を行ないたい場合には WYSIWYG 領域をページ編集画面全体に広げることができます。 |
画像サイズの制限
WYSIWYG エディタ画面から画像を登録する際に、登録可能な画像のサイズを制限することができます。制限は、画像の幅(ピクセル)、高さ(ピクセル)、バイトサイズの組み合わせで行なうことができます。 制限を行なわない場合には空欄としておいてください。
添付ファイルのサイズの制限
WYSIWYG エディタ画面から、リンク先として登録する添付ファイルのサイズの上限を指定することができます。 制限を行なわない場合には空欄としておいてください。
カラーパレット
カラーパレットは、ページ編集画面で WYSIWYG エディタを使用している時に、色指定を行う場面で使うことができます。
WYSIWYG エディタ画面で、テキストの色または、テキストの背景色を指定する場合にユーザが指定可能な色をパレットとして指定しておくことができます。色は RGB を各色 2 桁(合計6 桁)の 16 進表現で指定します。たとえば、赤は FF0000 としていします。緑は 00FF00、青は 0000FF と指定することになります。パレットに載せる色を RGB で表現し、それらをカンマで区切って並べることでパレットを構成します。パレットの色数は自由です。ページデザイン時に決めたカラースキームに合わせてパレットを準備しておくと良いでしょう。
このパレットが適用されるのは、テキスト色およびテキスト背景色の指定の場合のみです。表の作成などの局面で発生するセル色の指定にはこのパレットは適用されません。
カラーピッカーを併用
カラーピッカーは、カラーパレットにない色を使いたい時にカラーパレットと併用して使用する色指定パネルです。
カラーパレットの指定の下に「カラーピッカーを併用」というチェックボックスが表示されています。このチェックボックスを ON になっている場合、ユーザは、テキスト色やテキスト背景色を指定する時に、パレットからの色の選択だけでなく、パレットにない色でも、カラーピッカーを起動して任意の色を選べるようになります。 デザイン上、テキスト色やテキスト背景色をパレットで定義した色に限定したい場合などでは、このチェックボックスは OFF にしておくと良いでしょう。
エディタ設定の使用状況
この欄は設定項目ではありません。この欄には、このエディタ設定を参照しているテンプレートとその要素が一覧表示されます。
エディタ設定の追加と削除
エディタ設定を追加する場合には「エディタ設定一覧」画面の右上にある「追加」ボタンをクリックしてください。新たなエディタ設定が作成されますので、用途に適した名前を付けて、必要な設定を加えてください。
どの要素からも参照されていないエディタ設定に対しては、「エディタ設定画面」に削除ボタンが表示されます。このアイコンをクリックすることでそのエディタ設定を削除することができます。
エディタ設定のダウンロードとアップロード
エディタ設定は、エディタ設定編集画面右上の「ダウンロード」ボタンをクリックすることでダウンロードすることができます。ダウンロードしたファイルは、手元の PC に適当な名前を付けて保存してください。
ダウンロードして保存しておいたエディタ設定ファイルをアップロードすることができます。
エディタ設定編集画面の右上にある「アップロード」ボタンをクリックすると、下記のような、アップロードするエディタ設定ファイルを指定する画面が表示されますので、アップロードしたいエディタ設定ファイルを指定してから画面上の「実行」ボタンをクリックします。
編集していたエディタ設定がアップロードしたエディタ設定で上書きされます。
保存しておいたエディタ設定ファイルから新たにエディタ設定を作成する
保存しておいたエディタ設定ファイルを使って、既存のエディタ設定を上書き更新するのではなく、新たなエディタ設定を作成したい場合には「エディタ設定一覧画面」に表示されている「アップロード」ボタンを使用してエディタ設定をアップロードしてください。アップロードの手順は同じです。
