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

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

この記事のライター

関連する投稿


ページ作成機能の説明と活用方法(お知らせや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へ