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

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

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

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


ビジュアルエディター機能を説明した、前編からの続きです。

機能説明

Unordered list、Ordered list

左から9番目と10番目はリスト表示、箇条書きの指定です。

9番目がUnordered list(番号なしリスト)で、ULタグと同様です。
10番目がOrdered list(番号ありリスト)で、OLタグと同様です。

サンプル文字は上の3行がUnordered list(番号なしリスト)、下の3行がOrdered list(番号ありリスト)を指定したものです。

Table

11番目はTable、テーブルタグ、表組みの指定です。

マス目が表示されるため、ドラッグしながら「○×○」のように希望のセル数になったところでクリックすると表が出てきます。

「1×1」〜「10×10」まで指定できます。

サンプルの表は「3×2」です。
クリックしてできた表のセルに、テキストを記入します。

セルにカーソルが当たるとさらに指定のボタンが出てきて、行・列の追加や削除ができます。

Link、Picture

左から12番目と13番目は、Link(リンク)とPicture(画像設置)です。

Linkボタンを押すと、設定のためのポップアップウィンドウが表示されます。

上段にテキスト表示の内容を、下段にリンク先URL(サンプルでは相対パス)を記入します。
新しいウィンドウで開く(target="_blank")指定にもできます。

サンプルで記入した「前の記事」がテキストリンク扱いになっています。

カーソルが当たっていると、リンク先URLが表示され、リンク編集とリンク解除のボタンが出現します。

Pictureボタンを押すと、設定のためのポップアップウィンドウが表示されます。

アップロードするローカルの画像ファイルを指定するか、どこかにアップロード済みの画像ファイルのURLを指定できます。

アップロードした画像にカーソルを当てると編集ボタンが出現します。

画像サイズ変更したり、画像の位置を変更したり、画像削除もできます。

ですが、13番目のPicture(画像設置)ボタンについては、保存できないことがあります。
保存できるのは、ごく小さな軽い画像ファイルのみです。

外部ライブラリ利用のため仕様制限があるようで、申し訳ありません。

Code View

左から14番目、右から2番目のボタンはCode View(ソース表示)です。

例えば、このようなサンプルテキストを用意します。

テキスト色、背景色、太字、下線、番号ありリスト、フォントサイズ22pxを組み合わせ指定しています。

Code Viewボタンからソース表示してみると、すべての指定内容がHTMLで確認できます。

実はこのCode Viewは、ここからHTMLの直接変更もできます。例えばフォントサイズを26px以上に指定するなど自由に変更できます。

また、Tableボタンで表組みを作成したあと、styleを追加するなどスタイル指定して、罫線を変更する使い方もおすすめです。

Full Screen

一番右のボタンはFull Screen(全画面表示)です。

ボタンを押すと、ブラウザいっぱいにコードのフォームが広がります。
大きな表組みに記入したり、Code ViewからHTMLやCSSをしっかり記述する際におすすめです。

ビジュアルエディターの使い方説明は以上です。
ぜひ、ご活用ください!

 

 

 

この記事のライター

関連する投稿


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


最新の投稿


初期費用半額キャンペーン実施中!

初期費用半額キャンペーン実施中!

SODA株式会社では、withコロナ時代にデジタルマーケティングの活動を行う皆様を支援するため、初期費用を半額にするキャンペーンを実施します。


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

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

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


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

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

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


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

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

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


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

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

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


CREAM 初期費用半額キャンペーン

ページTOPへ