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

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

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

この記事のライター

関連する投稿


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

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

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


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

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

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


記事をページ分割(改ページ)したいときには

記事をページ分割(改ページ)したいときには

ブログやメディアサイトでは、記事コンテンツが長文になりやすいことからページ分割(改ページ)を行う場合があります。CREAMでは標準で、指定したブロック数で「次のページ」ボタンを表示する機能を用意しています。このページネーション機能を説明しながら、便利な活用Tipsなども紹介します。


キーワード(タグ)の機能説明④:削除と統合、分散させないコツ

キーワード(タグ)の機能説明④:削除と統合、分散させないコツ

企業ブログやオウンドメディアサイトでよく活用される、記事のラベル分類やタグ付けの「キーワード」機能を説明しながら、便利な活用Tipsなども紹介します。その4。


キーワード(タグ)の機能説明③:多階層構造の管理とパンくずリスト

キーワード(タグ)の機能説明③:多階層構造の管理とパンくずリスト

企業ブログやオウンドメディアサイトでよく活用される、記事のラベル分類やタグ付けの「キーワード」機能を説明しながら、便利な活用Tipsなども紹介します。その3。


最新の投稿


2020年夏季休業期間のお知らせ

2020年夏季休業期間のお知らせ

2020年8月の弊社休業期間をお知らせします。


回遊を高める「関連する投稿」、レコメンド広告の活用

回遊を高める「関連する投稿」、レコメンド広告の活用

メディア構築CMSのCREAMには「関連する投稿」の機能があります。回遊を高める効果もあるため、仕様を説明します。また、同じような効果をもたらすレコメンドウィジェット広告(関連コンテンツ ユニット)についても、活用方法を解説します。


CREAMが「IT導入補助金2020」の補助対象ITツールになりました

CREAMが「IT導入補助金2020」の補助対象ITツールになりました

独立行政法人 中小企業基盤整備機構が運営する「IT導入補助金2020」のIT導入支援事業者として、私どもSODA株式会社が採択されました。また、メディア構築CMSの「CREAM」が補助対象となるITツールに認められました。


モバイル表示の確認方法とメディアサイトの特性

モバイル表示の確認方法とメディアサイトの特性

メディアサイト構築CMSのCREAMにはモバイル表示(スマートフォン表示)のプレビュー機能があります。またメディアサイトならではの特性もあります。合わせて、Chromeブラウザを使ったモバイル表示方法もご案内します。


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

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

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


 

ページTOPへ