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

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

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

この記事のライター

関連する投稿


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


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

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

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


初期管理者やログインユーザー追加の使い方

初期管理者やログインユーザー追加の使い方

CREAM環境構築が終わり、初期管理者で管理画面にログインできるようになったら、まずは他のログインユーザーを追加登録しましょう。


【CREAM】12月のアップデート内容詳細

【CREAM】12月のアップデート内容詳細

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


サムネイル画像の注意すべき点を教えてください

サムネイル画像の注意すべき点を教えてください

メディア構築CMSのCREAMでは、記事にサムネイル画像をセットできます。サムネイル画像は一覧表示だけでなく、メイン画像のように使われるケースもあるため、サイズや内容物の位置に注意が必要です。


最新の投稿


オウンドメディアに使いやすいフォームサービスを導入(formrun編)

オウンドメディアに使いやすいフォームサービスを導入(formrun編)

企業のオウンドメディアやブログへの導入が進むメディア構築CMS「CREAM」を使う際に、効果が高まる外部サービスとの組み合わせ活用の紹介です。今回はCVアップやコミュニケーション促進に、フォームサービス「formrun」を埋め込み導入します。


Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

Googleマイビジネスを活用したGoogleマップ埋め込みをスポットページに

メディア構築CMS「CREAM」のスポットページ作成機能を使う際に、自社名や店舗名が表示されたGoogleマップを埋め込む方法があります。Googleマイビジネスの説明と合わせて紹介します。


構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

構造化データを使ってリッチリザルト対応をしましょう。まずはFAQの活用を

Googleは、検索エンジンが理解しやすいHTMLタグに記述する特殊なコードである構造化データの利用を推奨しています。構造化データで記述することでリッチリザルトが表示され、検索ユーザーの目に触れやすくなります。メディア構築CMSのCREAMなら初めから機能が用意されています。


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

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

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


初期管理者やログインユーザー追加の使い方

初期管理者やログインユーザー追加の使い方

CREAM環境構築が終わり、初期管理者で管理画面にログインできるようになったら、まずは他のログインユーザーを追加登録しましょう。


 

ページTOPへ