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をしっかり記述する際におすすめです。

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

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への切り替え方法をご案内します。


CREAM管理『デザイン設定』について

CREAM管理『デザイン設定』について

『デザイン設定』では主にサイトのHOME画面の見た目を調整します。


不用品回収 タスクル

ページTOPへ