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

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

この記事のライター

関連する投稿


構造化データを使ってリッチリザルト対応をしましょう。まずは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へ