CREAMサポートブログ | はじめてのメディアサイト運用に

記事本文を装飾するには?ビジュアルエディターの使い方①

記事本文を装飾するには?ビジュアルエディターの使い方①

CREAMの記事作成に機能追加された、HTMLを書かなくても簡単に太字や色付けなどの装飾ができるビジュアルエディター機能を説明します。今回は前編です。


ビジュアルエディターとは?

CREAM標準パッケージを対象とした、2019年夏のアップデートで追加された機能です。

記事作成のコンテンツパーツにはこれまでも「コード」コンテンツがありましたが、HTMLやJavaScriptを直接記述するためのフォーム機能だけでした。

アップデートにより「コード」コンテンツを拡張して、HTMLを書かなくてもより簡単に太字や色付けなどの装飾ができる、エディター機能を追加しました。

CREAM7〜9月のアップデート機能追加と改善点詳細(その他) | CREAMサポートブログ

https://media.cream-cms.com/blog/articles/24

CREAM標準パッケージを対象とした、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(テキストの色)が指定できます。

サンプル文字は上から背景色、テキスト色、両方の組み合わせです。

あとの機能は後編に続きます。

 

 

 

この記事のライター

関連する投稿


広告にもデザインにも活用!「ウィジェット」の使い方

広告にもデザインにも活用!「ウィジェット」の使い方

バナー画像や広告タグを配置するための機能のひとつ、『ウィジェット』を紹介します。トップページやカテゴリー記事一覧トップなどに表示されるエリアを管理できます。コンバージョン促進など、自由なアイデアで活用していただきたい機能です。


「おすすめ」機能を使って、流れていかない記事の固定表示をしましょう

「おすすめ」機能を使って、流れていかない記事の固定表示をしましょう

任意の記事をまとめて固定表示させる「おすすめ」機能を説明します。ぜひ活用してください。


PR記事(タイアップ広告設定)機能の活用のススメ

PR記事(タイアップ広告設定)機能の活用のススメ

CREAMには標準でマネタイズを支援する機能がいくつも用意されています。そのうちのひとつ、PR記事(タイアップ広告設定)機能をご紹介します。


ページ作成機能の説明と活用方法(お知らせやLPにも使えます)

ページ作成機能の説明と活用方法(お知らせやLPにも使えます)

メディア構築CMSのCREAMには「ページ作成」の機能があります。記事ページではないページを作成する機能です。どう使うのか質問を受けることがありますので、活用方法を解説します。


記事メディアにおける画像サービスの活用とメリット

記事メディアにおける画像サービスの活用とメリット

記事メディアに画像はつきものです。記事のサムネイル画像としても必要であり、また記事内でもテキストの間に挿し絵的な画像を挿入することで読みやすさの向上にも。CREAMが標準で用意している、外部サービスから画像を検索するAPIの使い方から、画像掲載の効果まで紹介します。


最新の投稿


2021年 ゴールデンウィーク休業のお知らせ

2021年 ゴールデンウィーク休業のお知らせ

2021年のゴールデンウィークの弊社休業期間をお知らせします。


企業ブログの成功ポイントと事例

企業ブログの成功ポイントと事例

企業ブログは、オウンドメディアやメールマガジンなど様々なコンテンツマーケティング手法のひとつです。企業ブログの成功のポイントや事例、CMS活用についてまとめました。


CREAMサイトにおけるサブドメインとサブディレクトリの扱い

CREAMサイトにおけるサブドメインとサブディレクトリの扱い

オウンドメディアやWebメディアサイトに特化したCMS「CREAM」の導入時に、サブドメインやサブディレクトリを設定できるのか、といった質問をよく受けるため説明します。


2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始休業のお知らせ

2020〜2021年の年末年始の弊社休業期間をお知らせします。


RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSを活用しよう!リーダーで情報収集も、記事の外部サイト表示もできます

RSSは登録したWebサイトの新規記事や更新情報などを配信する仕組みです。メディア構築CMSのCREAMには標準で用意されています。情報収集にも、記事の外部サイト表示もできる活用方法を案内します。


 

ページTOPへ