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(テキストの色)が指定できます。

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

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

CREAMに関するお問い合わせはこちら

お問い合わせ・資料請求は下記のフォームからお気軽にお申し付けください。

CREAMお問い合わせフォームへ
不用品回収 タスクル

関連する投稿


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


サイト内で使う画像をアップロードする「画像管理」の使い方

サイト内で使う画像をアップロードする「画像管理」の使い方

管理画面の「画像管理」メニューでは、サイト内で使う画像をアップロードすることができます。バナーやよく使う画像など、サイト全体で共有したい画像を登録しておきましょう。 また、ウィジェットやページ作成で画像を表示するときにも「画像管理」を使います。 「画像管理」での画像の登録の仕方と便利な使い方をご紹介します。


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

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

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


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

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

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


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

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

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


最新の投稿


メディア運営をサポートするおすすめサービス

メディア運営をサポートするおすすめサービス

メディア運営の運用サポートやお悩みの解決におすすめのサービスサイトをご紹介いたします。


CREAMアップデートのお知らせ

CREAMアップデートのお知らせ

CREAM標準パッケージを対象とした、2023年3月のアップデート内容の詳細についてお知らせします。


ウェブページを軽量化!WebP画像対応

ウェブページを軽量化!WebP画像対応

WebP(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。ウェブ上で使われるPNGやJPGよりも軽量なため、ウェブサイトの表示速度を向上させることができます。CREAMにも導入可能です。


Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクス(GA4)をCREAMに設定する

Googleアナリティクスは、メディアの運営上、必須ともいえるアクセス解析ツールです。CREAMの管理画面からGoogleアナリティクスのタグを設置して、アクセス解析を始めましょう。


Googleアナリティクス(GA4)に切り替える

Googleアナリティクス(GA4)に切り替える

Googleアナリティクスは、2023年7月1日に「ユニバ―サルアナリティクス(UA)」から「Googleアナリティクス4(GA4)」に変わります。UAを利用している場合は、GA4への切り替えが必要です。CREAMでUAを利用している方向けに、GA4への切り替え方法をご案内します。


不用品回収 タスクル

ページTOPへ