記事本文を装飾するには？ビジュアルエディターの使い方②

左から9番目と10番目はリスト表示、箇条書きの指定です。

9番目がUnordered list（番号なしリスト）で、ULタグと同様です。
10番目がOrdered list（番号ありリスト）で、OLタグと同様です。

サンプル文字は上の3行がUnordered list（番号なしリスト）、下の3行がOrdered list（番号ありリスト）を指定したものです。

11番目はTable、テーブルタグ、表組みの指定です。

マス目が表示されるため、ドラッグしながら「○×○」のように希望のセル数になったところでクリックすると表が出てきます。

「1×1」〜「10×10」まで指定できます。

サンプルの表は「3×2」です。
クリックしてできた表のセルに、テキストを記入します。

セルにカーソルが当たるとさらに指定のボタンが出てきて、行・列の追加や削除ができます。

左から12番目と13番目は、Link（リンク）とPicture（画像設置）です。

Linkボタンを押すと、設定のためのポップアップウィンドウが表示されます。

上段にテキスト表示の内容を、下段にリンク先URL（サンプルでは相対パス）を記入します。
新しいウィンドウで開く（target="_blank"）指定にもできます。

サンプルで記入した「前の記事」がテキストリンク扱いになっています。

カーソルが当たっていると、リンク先URLが表示され、リンク編集とリンク解除のボタンが出現します。

Pictureボタンを押すと、設定のためのポップアップウィンドウが表示されます。

アップロードするローカルの画像ファイルを指定するか、どこかにアップロード済みの画像ファイルのURLを指定できます。

アップロードした画像にカーソルを当てると編集ボタンが出現します。

画像サイズ変更したり、画像の位置を変更したり、画像削除もできます。

左から14番目、右から2番目のボタンはCode View（ソース表示）です。

例えば、このようなサンプルテキストを用意します。

テキスト色、背景色、太字、下線、番号ありリスト、フォントサイズ22pxを組み合わせ指定しています。

Code Viewボタンからソース表示してみると、すべての指定内容がHTMLで確認できます。

実はこのCode Viewは、ここからHTMLの直接変更もできます。例えばフォントサイズを26px以上に指定するなど自由に変更できます。

また、Tableボタンで表組みを作成したあと、styleを追加するなどスタイル指定して、罫線を変更する使い方もおすすめです。

一番右のボタンはFull Screen（全画面表示）です。

ボタンを押すと、ブラウザいっぱいにコードのフォームが広がります。
大きな表組みに記入したり、Code ViewからHTMLやCSSをしっかり記述する際におすすめです。