ビジュアルエディターとは？
CREAM標準パッケージを対象とした、2019年夏のアップデートで追加された機能です。
記事作成のコンテンツパーツにはこれまでも「コード」コンテンツがありましたが、HTMLやJavaScriptを直接記述するためのフォーム機能だけでした。
アップデートにより「コード」コンテンツを拡張して、HTMLを書かなくてもより簡単に太字や色付けなどの装飾ができる、エディター機能を追加しました。
CREAM7〜9月のアップデート機能追加と改善点詳細(その他) | CREAMサポートブログ
https://media.cream-cms.com/blog/articles/24CREAM標準パッケージを対象とした、2019年7〜9月のアップデート内容の詳細についてお知らせします。
ビジュアルエディターとは、「WYSIWYG式」のオンラインリッチテキストエディターのことで、WYSIWYGエディターとも呼ばれます。
リッチテキストエディタともいわれているようですが、HTMLの知識がなくても、フォントサイズの大小・見出し文字・テーブル表記などを、直感的に使うことの出来るエディタです。
ちなみに「What You See Is What You Get（見たままが得られる）」という頭文字をとった言葉です。
ビジュアルエディターが使える場所は
■記事作成
記事作成画面の「コンテンツパーツ」ボタンから「コード」を選ぶと、シンプルモードとエディターモードを選択できます。
シンプルモードは、本文と同様のテキスト入力フォームですが、こちらはHTMLやJavaScriptの直接入力が可能です。
エディターモードを選ぶと、直感的に操作できる文字装飾などのボタンが並んでいます。
記事作成のはじめ方③【コンテンツ作成の後半】 | CREAMサポートブログ
https://media.cream-cms.com/blog/articles/32メディア構築CMS「CREAM」を使って記事を書く流れを説明します。はじめて使う方でもわかるよう、できるだけ丁寧に紹介します。3つ目の記事はコンテンツ作成の後半です。
「コード」コンテンツはこちらの記事でも説明しています。
■ページ作成
CREAMでは、記事ページでないページも作成できます。記事として流れていかないため、サービス紹介や告知、ランディングページなどに使われています。
そのページ作成の中にある「HTMLページの追加」のフォームにもビジュアルエディターが実装されました。
「HTMLページ」のフォームにあるビジュアルエディターです。
機能説明
では具体的に、ビジュアルエディターの各機能（ボタン）を説明していきます。
■Style
一番左のボタンは「Style」、書式のことです。段落のスタイルを指定する機能です。
Wordなどでも「標準」や「見出し」などのスタイルがありますが、同様の使い方です。
Header2、Header3、Header5、を上から書式指定したテキストです。
■Bold、Underline、Strikethrough
左から2番目、3番目、4番目のボタンは、似た性質のボタンです。
Bold：太字
Underline：下線
Strikethrough：取り消し線
の指定ができます。
■Font Size、Remove Font Style
左から5番目と6番目はフォントサイズの指定です。
5番目がFont Size。10〜25px（ピクセル）のフォントサイズを1pxずつ変えて指定できます。デフォルトは14pxです。
6番（消しゴムのアイコン）はRemove Font Style。フォント指定の解除ボタンです。
サンプル文字は上から10px、14px、25pxを指定したものです。
■Recent Color、More Color
左から7番目と8番目はフォント関連の色の指定です。
こんな蛍光ペンや赤字はこれまではHTMLとCSSで指定する必要がありましたが、ボタンで簡単に装飾できるようになりました。
7番目がRecent Color（最近使用した色）で、8番目（半分サイズの▼アイコン）はMore Color（他の色指定）です。
More Colorを開くと、Background Color（テキストの背景色）とForeground Color（テキストの色）が指定できます。
サンプル文字は上から背景色、テキスト色、両方の組み合わせです。
あとの機能は後編に続きます。
