【主な仕様】WYSIWYGエディタ / 出力されるタグについて

WYSIWYG(ウィジウィグ)エディタ

WYSIWYGエディタ

WYSIWYG(ウィジウィグ)とは、「What You See Is What You Get.」の略で「見たままのものが手に入る」という意味となります。記事を投稿後に実際に作成される画面に近い形で、本文の入力を行うことができる仕組みです。以下の表で各ボタンの機能説明と最終的に出力されるタグ形式※1を一覧化してあります。
※1 WMS更新パッケージではW3C準拠及びSEO対策効果を意識するため、独自のタグ変換エンジンを実装しています。通常<span style="color:#fff">テキスト</span>などとなる場合も、<span class="WMS_fc_White">テキスト</span>のように変換され出力されます

  名称 説明 出力されるタグ CSS詳細
UI（ユーザインターフェース）操作系
画面表示切り替え

エディタサイズ

 記事本文の入力画面を最大化（もとのサイズに戻す）します。 なし なし
ブロック表示

ブロック表示

 <p>タグの領域を枠線で囲みます。HTMLのタグに精通されている方向けの機能です。 なし なし
記事編集系01
切り取り

切り取り

 選択した文字列を切り取ります。 なし なし
コピー

コピー

 選択した文字列をクリップボードにコピーします。 なし なし
貼り付け

貼り付け

 切り取ったりコピーした文字列を貼り付けます。 なし なし
プレーンテキスト貼付

プレーンテキスト貼付

 コピーした文字列のテキスト情報のみを貼り付けます。(文字の大きさや文字色などは無視します) なし なし
記事編集系02
元に戻す

元に戻す

 一つ前に行った動作を取り消します。 なし なし
やり直し

やり直し

 直前に取り消した動作をもう一度行います。 なし なし
検索

検索

 WYSIWYGエディタ内の文字列を検索します。 なし なし
置換

置換

 WYSIWYGエディタ内の検索した文字列を、別の文字列に置き換えます。 なし なし
すべて選択

すべて選択

 WYSIWYGエディタ内のデータを全て選択した状態(青色で反転)にします。 なし なし
フォーマット削除

フォーマット削除

 文字色や文字サイズ、行寄せなど、設定した属性をすべてリセットします。 なし なし
記事装飾系
文字サイズ

文字サイズ：80%

 選択した文字列の大きさを80～150%の範囲でサイズ指定します。 <span class="WMS_fs_150per">テキスト</span> .WMS_fs_80per { font-size: 80%; }
.WMS_fs_90per { font-size: 90%; }
.WMS_fs_100per { font-size: 100%; }
.WMS_fs_110per { font-size: 110%; }
.WMS_fs_120per { font-size: 120%; }
.WMS_fs_130per { font-size: 130%; }
.WMS_fs_140per { font-size: 140%; }
.WMS_fs_150per { font-size: 150%; }
文字色

文字色

 選択した文字列の色を指定します。アイコンをクリックすることで開くパレットから色を選択します。 ※別表参照 ※別表参照
太字

太字

 選択した文字列を太字にします。 <span class="WMS_bold">テキスト</strong> .WMS_bold { font-weight: bold; }
下線

下線

 選択した文字列に下線を引きます。 <span class="WMS_underline">テキスト</span> .WMS_underline { text-decoration: underline; }
リンク挿入/編集

リンク挿入/編集

 選択した文字列にハイパーリンクを設定します。アイコンをクリックすると別ウインドウが開きます。通常は「プロトコル」に"http://"を選択し、リンク先のURLを入力します。「ターゲット」で"新しいウィンドウ(_blank)"を選択することで、リンクをクリックした際に新しいブラウザウィンドウで開くことができます。 <a href="exampleURI" target="_blank or self">テキスト</a> なし
リンク削除

リンク削除

 ハイパーリンクを設定した文字列を選択後に、アイコンをクリックすると、ハイパーリンクを解除します。 なし なし
段落番号の追加/削除

段落番号の追加
/削除

 行頭に番号のついた箇条書きを設定します。アイコンをクリックすると「1.」が挿入されますので、その後に文章を続けます。「Enter」キーを押すと改行され、次の番号が挿入されます。もう一度アイコンをクリックするか続けて「Enter」キーを押すと、箇条書きを終了します。 <ol>
    <li>テキスト</li>
    <li>.....</li>
</ol>		 なし
箇条書きの追加/削除

箇条書きの追加
/削除

 行頭に中黒(・)のついた箇条書きを設定します。アイコンをクリックすると「・」が挿入されますので，その後に文章を続けます。「Enter」キーを押すと改行され、次の「・」が挿入されます。もう一度アイコンをクリックするか続けて「Enter」キーを押すと、箇条書きを終了します。 <ul>
    <li>テキスト</li>
    <li>.....</li>
</ul>		 なし
横罫線

横罫線

 水平線を引きます。 <hr /> なし
左揃え

左揃え

 選択した段落を左揃えに設定します。初期状態は左揃えとなります。 なし または
<p class="WMS_textAlignLeft">テキスト</p>		 .WMS_textAlignLeft { text-align: left; }
中央揃え

中央揃え

 選択した段落を中央揃えに設定します。 <p class="WMS_textAlignCenter">テキスト</p> .WMS_textAlignCenter { text-align: center; }
右揃え

右揃え

 選択した段落を右揃えに設定します。 <p class="WMS_textAlignRight">テキスト</p> .WMS_textAlignRight { text-align: right; }
インデント(字下げ)解除

インデント(字下げ)解除

 適用されている字下げを解除します。 なし なし
インデント(字下げ)

インデント(字下げ)適用

 5文字分、右に字下げを設定します。1つの段落に対して、5回(25文字文)まで設定することができます。 <p class="WMS_marginLeft5">テキスト</p> .WMS_marginLeft1 { margin-left: 2em; }
.WMS_marginLeft2 { margin-left: 4em; }
.WMS_marginLeft3 { margin-left: 6em; }
.WMS_marginLeft4 { margin-left: 8em; }
.WMS_marginLeft5 { margin-left: 10em; }
添字

添字

 選択した文字列を小さくして、右下に表示します。 <sub>テキスト</sub> なし
上付き文字

上付き文字

 選択した文字列を小さくして、右上に表示します。 <sup>テキスト</sup> なし
特殊文字挿入

特殊文字挿入

 アイコンをクリックすると別ウィンドウが表示されます。特殊文字をクリックすることで、WYSIWYGエディタ内に挿入されます。 なし なし
キーボード操作系
 

記事内の改行

 文字を改行するには「Shift」＋「Enter」キーを押します。 <br /> なし
 

行間空け

 「Enter」キーを連続して改行すると、最大5回分まで行間を広げることが可能です。 <p class="WMS_marginTop5">テキスト</p> .WMS_marginTop1 { margin-top: 2em; }
.WMS_marginTop2 { margin-top: 4em; }
.WMS_marginTop3 { margin-top: 6em; }
.WMS_marginTop4 { margin-top: 8em; }
.WMS_marginTop5 { margin-top: 10em; }