リスト、引用、配置、インデント、横ラインの設定

ビジュアルエディタを使って記事の本文を作成する場合に、リストや引用を設置したり配置方法を設定する方法について解説します。

1.番号なしリストと番号付きリスト
2.引用
3.配置の設定
4.インデントの設定
5.横ラインの挿入

※ ツールバーの位置や設定した書式をクリアする方法については「テキストの書式の設定(フォント、太字、色など)」を参照して下さい。

最初に番号なしリストと番号付きリストです。どちらも複数の行に分かれた文をリストの形で表示するために使います。

「番号なしリスト」は番号が付かないリストを作成する時に使用します。リストとして表示したい複数の文を選択した上で「番号なしリスト(Alt+Shift+U)」をクリックすると、選択していた複数の文が箇条書きとして表示されます。

テキストエディタで次のように記述した場合と同じです。

<ul>
<li>昨年の売上</li>
<li>営業所別スタッフ一覧</li>
</ul>

「番号付きリスト」は番号が自動で付けられるリストを作成する時に使用します。リストとして表示したい複数の文を選択した上で「番号付きリスト(Alt+Shift+O)」をクリックすると、選択していた複数の文が番号付きリストとして表示されます。

テキストエディタで次のように記述した場合と同じです。

<ol>
<li>昨年の売上</li>
<li>営業所別スタッフ一覧</li>
</ol>

次は引用です。他から文章などを引用した場合に引用した部分がどこなのかを明示的に表示する場合に使用します。

引用として表示したい1つ又は複数の文を選択した上で「引用」をクリックして下さい。選択していた複数の文が引用として表示されます。

テキストエディタで次のように記述した場合と同じです。

<blockquote>明日は明日の雨が降る・・・</blockquote>

最後は配置です。本文中に入力された文をどのように配置するのかについて設定します。「左寄せ」「中央揃え」「右寄せ」「両端揃え」の4つの中から配置方法を選択することができます。

設定する場合は配置を設定したい文のどこかにカーソルを置いた上でいずれかの配置をクリックして下さい。

まず1行目にカーソルを置いてから「右寄せ」をクリックして下さい。1行目が右詰めで表示されます。

テキストエディタで次のように記述した場合と同じです。

<p style="text-align: right;">2015/12/16</p>

次に2行目にカーソルを置いてから「両端揃え」をクリックして下さい。2行目が両端揃えで表示されます。

テキストエディタで次のように記述した場合と同じです。

<p style="text-align: justify;">It was a very nice・・・</p>

次はインデントの設定です。

インデントは文章全体を右方向へ字下げします。右側のボタンが「インデントを増やす」で、1回クリックする毎に1段階右方向へ字下げします。左側のボタンは「インデントを減らす」でインデントされた文章を1段階左方向へ戻します。

まず2行目にカーソルを置いてから「インデントを増やす」をクリックして下さい。1回クリックする毎に2行目が右方向へ字下げされて表示されます。

テキストエディタで次のように記述した場合と同じです。1回右に字下げする毎に30pxずつ左側にパディングが設定されます。2回インデントを行った場合は60pxのパディングが設定されます。

<p style="padding-left: 30px;">星はいつも見ているぞ</p>
<p style="padding-left: 60px;">星はいつも見ているぞ</p>

次に2行目にカーソルを置いてから「インデントを減らす」をクリックして下さい。1回クリックする毎に2行目が左方向へ戻って表示されます。なおインデントされていない文に対して「インデントを減らす」をクリックしても何も変わりません。

次は横ラインの設定です。

横ラインは水平の線を記事の中に挿入します。「横ライン」をクリックすると、現在カーソルがある位置に横ラインが挿入されます。文の途中で挿入した場合は文が前後に分断されます。

それでは最初の文の最後にカーソルを置いてから「横ライン」をクリックして下さい。最初の文と次の文の間に横ラインが挿入されます。

----

ビジュアルエディタのツールバーの中でリスト、引用、配置、インデント、横ラインの設定に関するボタンの使い方について解説しました。

AdminWeb