配置(左寄せ/中央揃え/右寄せ)とインデントを設定する

ビジュアルエディタを使って記事の本文を作成する場合に、文章を右寄せや中央揃えで表示するための配置を設定する方法や、文章のインデントを増やしたり減らしたりする方法について解説します。

配置を設定する

最初に配置の設定です。文章を左寄せ、中央揃え、右寄せの中から配置方法を設定します。日本の場合はデフォルトで「左寄せ」となっています。

まず「中央揃え」を設定してみます。配置を設定したい文章のいずれかの場所にカーソルを置き、その後で「中央揃え」アイコンをクリックして下さい。文章が中央揃えで配置されます。

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

<p style="text-align: center;">
プールはもちろん (途中略) は大人気ですね。
</p>

次に「右揃え」を設定してみます。配置を設定したい文章のいずれかの場所にカーソルを置き、その後で「右揃え」アイコンをクリックして下さい。文章が右揃えで配置されます。

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

<p style="text-align: right;">
プールはもちろん (途中略) は大人気ですね。
</p>

明示的に「左揃え」を設定したい場合も同じように設定します。

インデントを設定する

次にインデントの設定です。インデントを増やすことで文章全体を右へずらし、インデントを減らすことで文章全体を左へずらします。

まず「インデントを増やす」を設定してみます。インデントを増やしたい文章のいずれかの場所にカーソルを置き、その後で「インデントを増やす」アイコンをクリックして下さい。文章が右方向へずれます。

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

<p style="padding-left: 30px;">
プールはもちろん (途中略) は大人気ですね。
</p>

インデントを増やせるのは1回だけではありません。「インデントを増やす」をクリックするたびに、現在カーソルがある文章が右へずれていきます。現時点では一度「インデントを増やす」をクリックするたびに右へ30pxずつずれていきます。

インデントを減らしたい場合には、インデントを減らしたい文章のいずれかの場所にカーソルを置き、その後で「インデントを減らす」アイコンをクリックして下さい。一度クリックすると30pxだけ文章が左へずれます。

なおインデントを減らすを何度クリックしても、インデントを増やす前の最初にあった位置より左へずれることはありません。

横ラインを設定する

次は横ラインの設定です。現在カーソルがある位置の前に水平の線が挿入されます。

横ラインを設定したい位置にカーソルを置き、その後で「横ライン」アイコンをクリックして下さい。カーソルの前に横ラインが挿入されます。

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

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

<hr />

ビジュアルエディタを使って文章の配置を変更したりインデントを増やす方法について解説しました。

© 2024 柏市のホームページ制作GIN