MENU

無料相談

  1. HOME
  2.  > 
  3. サイト職人スタッフブログ
  4.  > 
  5. CMSで活用されるWYSISYGエディタについておさらい

サイト職人スタッフブログ

CMSで活用されるWYSISYGエディタについておさらい

「WYSIWYG」という言葉をご存知でしょうか?
CMSを利用した際に聞いたことがあるWeb担当者の方もいらっしゃるかと思います。
多くのCMSでは「WYSIWYGエディタ」を使ってWebページを更新するのが主流となっています。

 
今回は、何気なく使っているWYSIWYGエディタの操作にあたっての注意点をご紹介いたします。
 

WYSIWYGとは

WYSIWYGとは、What You See Is What You Getの略称で「見たままが得られる・見たままのものが実際に作成され出力される」という意味があります。そのため、WYSIWYGを利用すれば、編集画面で表示されるものと同じ表示のものを視覚で確認できます。
 

WYSIWYGエディタの特徴

WYSIWYGエディタは、多くのCMS(コンテンツ管理システム)で使われているツールです。入力画面と出力結果が一致するような表現ができるリッチテキストエディタの技術で、IT知識の不足を補いサポートしてくれるため、非常に人気があります。
 
少し専門的な表現をするのであれば、HTMLに苦手意識のある方や初心者をサポートしてくれるツールとお伝えすると、機能の特徴が伝わりやすいかもしれません。
 

WYSIWYGエディタで基本的にできること

WYSIWYGエディタでは、次のような基本的なことができます。
 
・入力したテキストに装飾ができる
・画像や動画の挿入ができる
・表組みの作成ができる
・用途に応じてビジュアル編集モードとテキスト編集モードに切り替えができる
 
WYSIWYGエディタは、テキストの入力はもちろん、画像や動画、表など、コンテンツの種類を問わず、表示できます。そして、用途に応じて編集モードを変更できるのも魅力のひとつといえます。
 

基本的な編集にはビジュアル編集モードを使う

WYSIWYGエディタ上で、改行や装飾といった編集作業を行う場合は、ビジュアル編集モードを使います。
しかし、エディタの操作は、書式による影響を考慮して変更する必要があるため、次の注意点や対処法を参考にしてください。
 

WYSIWYGエディタ操作の注意点と対処法

CMSを利用した記事投稿やページ作成に慣れない方であれば、「書式が反映されてエディタの扱い方が難しい」と思う方もいます。では、どうすればエディタを有効に利用できるのでしょうか。
 

コピー&ペーストの注意

Wordの情報をコピーしてCMS上のWYSIWYGエディタに貼り付けると、Word上の書式が反映されて、そのままでは公開できないことがありますよね? Wordなどで予め作成した文書をコピー&ペーストすると、Wordの書式やタグもコピーされるため、表示が崩れるといった問題が生じます。これは、Wordの情報をビジュアル編集モードの状態で貼り付けることが問題の原因です。
 
なぜなら、ビジュアル編集モードでは、Wordの書式が引き継がれてしまうからです。ここでは、具体的な3つの対処法をご説明します。
 

【対処①:テキスト編集モードに切り替える】

まずは、Wordの情報をビジュアル編集モードの状態で貼り付ける前に、テキスト編集モードに切り替えてください。テキスト編集モードに切り替えることができたら、Wordの情報をペーストし、ビジュアル編集モードに切り替えて体裁を整えます。
 
この方法なら、Wordの書式を気にすることなく編集できます。ちょっと、難しいと思った方は、下記の手順を参考にしてください。
 
・ステップ1:Wordの情報を用意する
・ステップ2:ビジュアル編集モードではなく、テキスト編集モードに変更する
・ステップ3:テキスト編集モードの状態でWordの情報をペーストする
・ステップ4:テキスト編集モードからビジュアル編集モードへ変更する
・ステップ5:ビジュアル編集モードの状態で編集する
 
ひとつずつステップを踏んでいけば、書式の反映を回避する手順として非常に納得いただけるかと思います。
 

【対処②:メモ帳に一度貼り付けてからコピーしなおす】

Word上からそのまま貼り付けると、余計なタグがたくさん含まれているため、どうしても表示がおかしくなります。そのため、この問題を回避するには、テキスト情報にタグが含まれていない状態する必要があります。
 
メールを送信する際、以前の書式が反映されて、変な部分に改行が入ったり、通常の文字色ではなかったりしたことはないでしょうか?これも、WYSIWYGエディタと同様に書式が残ることで生じる問題です。
 
これらの問題は、メモ帳に一度貼り付けてからコピーしなおしてWYSIWYGエディタにペーストするとタグを無くすることができます。ちょっとした小技なので覚えておきましょう。
 

【対処③:貼り付け時にショートカットキーを利用する】

メモ帳への貼り付け作業が面倒な方は、ショートカットキーを利用しましょう。
 

Windowsの場合
「Ctrl」+「Shift」+「V」
 
Macの場合
「command」+「shift」+「V」
思ったように機能しない場合は「option」を追加します。
「command」+「shift」+「option」+「V」
 
上記のショートカットキーの操作を覚えておけば、メモ帳への貼り付け作業なしで、書式の影響を受けずに、作業を進められます。
 

まとめ

WYSIWYGエディタは、多くのCMSで使われる便利なツールです。書式の反映にさえ気をつければ、とても使いやすいツールなので、ぜひ使い方を覚えましょう。

PAGETOP