PowerCMS X ユーザーガイド

リッチテキストエディタ

概要

リッチテキストエディタは、文字装飾や画像挿入などを画面上で操作できる編集機能です。
HTMLタグを直接入力しなくても、文書作成ソフトのような感覚でコンテンツを作成できます。

リッチテキストエディタは、フォーマットで「リッチテキスト」を選択した場合に利用できます。

リッチテキストエディタを利用する

リッチテキストエディタ

フォーマット

  • 編集画面の「フォーマット」で「リッチテキスト」を選択します
  • リッチテキストエディタが表示されます
  • ツールバーを利用して文字装飾や画像挿入を行えます

フォーマットプルダウン

ツールバー

ツールバーには編集に利用するさまざまなボタンが表示されます。

ツールバー

元に戻す・やり直し

元に戻す やり直し

  • 元に戻す
    直前の操作を取り消します
  • やり直し
    取り消した操作を再実行します

文字装飾

太字 斜体

  • 太字
    文字を太字で表示します
  • 斜体
    文字を斜体で表示します

段落配置

左寄せ 中央揃え 右寄せ 両端揃え

  • 左揃え
  • 中央揃え
  • 右揃え
  • 両端揃え

文章や画像の配置を変更できます。

リスト

箇条書きリスト 番号付きリスト 定義リスト

  • 箇条書きリスト (ul要素)
  • 番号付きリスト (ol要素)
  • 定義リスト (dl+dt+dd/+dt/+dd)

項目を見やすく整理できます。

引用

引用

  • 引用文として表示します
  • 外部文書や参考文献を掲載する場合に利用します

テンプレート挿入

テンプレート挿入

  • あらかじめ用意された定型文やHTMLパーツを本文に挿入します
  • よく利用する文章やレイアウトを、エディタ上から選択して挿入できます
  • 同じ形式のコンテンツを繰り返し作成する場合に利用します

全画面表示

全画面表示

  • エディタを全画面表示します
  • 広い編集領域で作業できます
  • 長文の編集時に利用すると作業しやすくなります

リンク

リンク挿入

  • リンクを挿入します
  • 既存のリンクを編集できます
  • リンクを解除できます

画像

画像挿入

  • 画像をURL指定で挿入できます
  • 本文中に画像を挿入、または挿入済みの画像を編集します
  • ボタンをクリックすると「画像の挿入/編集」ダイアログが表示されます
  • 画像の参照先、代替テキスト、サイズ、余白、枠線などを設定できます

挿入済みの画像を編集する場合は、本文中の画像を選択してから「画像の挿入/編集ボタン」をクリックします。
画像を新しく挿入する場合は、「画像の挿入・アップロード」を参照してください。

一般タブ

画像の設定画面

ソース
  • 画像のURLや画像の絶対パス・相対パスを入力します
  • 画像を表示するために必要な項目です
代替の説明文
  • 画像の内容を説明するテキストを入力します
  • 画像が表示されない場合や、スクリーンリーダーで読み上げる場合に利用されます
  • 装飾目的の画像を除き、画像の内容が分かる説明を入力することを推奨します
幅・高さ
  • 画像の表示サイズを指定します
  • 幅と高さを入力することで、本文中に表示される画像サイズを調整できます
  • 鍵アイコンが有効な場合、画像の縦横比を維持したままサイズを変更できます
  • 元画像より大きなサイズを指定すると、画像が粗く表示される場合があります

詳細タブ

画像の詳細

上下余白
  • 画像の上下に余白を設定します
  • 画像と前後の文章との間隔を空けたい場合に利用します
左右余白
  • 画像の左右に余白を設定します
  • 画像の横にテキストを配置する場合や、画像と周囲の要素との間隔を調整したい場合に利用します
枠線幅
  • 画像の周囲に表示する枠線の太さを指定します
  • 枠線を表示しない場合は空欄のままにします
枠線スタイル
  • 画像の周囲に表示する枠線の種類を選択します
  • 枠線幅を指定している場合に、枠線の見た目を設定できます
枠線スタイル選択肢
  • 選択...
    枠線スタイルを指定しません
  • 実線
    実線の枠線を表示します
  • 点線
    点線の枠線を表示します
  • 破線
    破線の枠線を表示します
  • 二重線
    二重線の枠線を表示します
  • 谷線
    立体的にへこんだように見える枠線を表示します
  • 山線
    立体的に浮き上がったように見える枠線を表示します
  • 内線
    内側に沈み込んだように見える枠線を表示します
  • 外線
    外側に浮き上がったように見える枠線を表示します
  • なし
    枠線を表示しません(img タグに style="border-style: none;" を付与)
  • 非表示
    枠線を非表示にします(img タグに style="border-style: hidden;" を付与)

補足

  • 画像の表示は、公開サイトのCSS設定によって見え方が変わる場合があります
  • 余白や枠線を設定した場合は、公開前にプレビューで表示を確認してください
  • アクセシビリティの観点から、画像の内容を説明する「代替の説明文」の入力を推奨します

画像の位置とテキストの回り込み

画像の位置とテキストの回り込み

  • 本文中に挿入した画像の配置と、画像の周囲に表示するテキストの回り込みを設定します
  • 画像と本文を組み合わせたレイアウトを作成する場合に利用します

画像の位置とテキストの回り込み選択肢

  • なし
    画像の位置やテキストの回り込みを指定しません。

  • 画像を左側に配置し、テキストを画像の右側へ回り込ませます。

  • 画像を右側に配置し、テキストを画像の左側へ回り込ませます。

画像の位置や回り込みの表示は、公開サイトのCSS設定によって異なる場合があります。

ファイルアップロード

ファイルアップロード

  • ファイルをアップロードします
  • アップロードしたファイルへのリンクを本文へ挿入できます
  • PDFやOfficeファイルなどの配布資料を掲載する場合に利用します

ファイルの挿入・アップロードの詳細ページを見る

画像の挿入/編集

メディア挿入

  • 登録済みの画像を選択してサイズや配置を設定できます
  • 画像をアップロードできます

画像の挿入・アップロードの詳細ページを見る

テキストとして貼り付け

貼り付け

  • ボタンをクリックすると「テキストとして貼り付け」モードになります
  • もう一度ボタンをクリックすると解除されます
  • 「テキストとして貼り付け」モードの時に他のアプリケーションからコピーしたテキストをペーストすると不要な書式を除去します

ソースコード

ソースコード表示

  • HTMLソースを直接編集できます

注意事項

  • 公開前にプレビューで表示を確認することを推奨します
  • 利用可能なボタンは環境設定によって異なる場合があります

補足

  • リッチテキストエディタには TinyMCE を利用しています
  • 追加プラグインや管理者設定により、表示される機能が増減する場合があります