ショートコードで文字を左寄せ（中央寄せ・右寄せ）する方法

ここではショートコードを使って文字を左寄せ・中央寄せ・右寄せする方法について紹介したいと思います。

文字の左寄せ・中央寄せ・右寄せに

まずは中央寄せから見ていきましょう。

中央寄せ

ショートコードで左寄せするには、centerというショートコードを使います。

たとえば次のような文字（pタグに囲まれた文字）があったとき

<p>文字の中央寄せ</p>

［center］と［/center］で囲めば、中央寄せの文字を作ることができます。

［center］<p>文字の中央寄せ</p>［/center］

右寄せ

文字を右寄せする場合は、rightというショートコードを使います。

使い方はcenterと同じで、右寄せしたい文字やグループを［right］と［/right］で囲みます。

［right］<p>文字の右寄せ</p>［/right］

左寄せ

文字の左寄せについても、中央寄せや右寄せと同じようにleftというショートコードで整列させることができます。

［left］<p>文字の左寄せ</p>［/left］

こんな使い方も

文字寄せのショートコードでは、文字（pタグ）を囲む以外にも表やdivタグなどのグループを囲むことができます。

そのため、たとえば表全体をショートコードで囲んでしまえば、表の中の文字を整列させることができます。

通常は次のように表の見出しは中央寄せ、表のデータは左寄せになっていますが、次のようにcenterで表全体を囲めば、すべて中央寄せにすることができます。

Before

ショートカット	操作
⌘+C	コピー
⌘+X	切り取り
⌘+V	ペースト

Aefore

次のコードをcenterのショートコードで囲むと、上のような並び方になります。

<table>
  <tbody>
    <tr>
      <th width="50%">ショートカット</th>
      <th width="50%">操作</th>
    </tr>
    <tr>
      <td>[key]⌘[/key]+[key]C[/key]</td>
      <td>コピー</td>
    </tr>
    <tr>
      <td>[key]⌘[/key]+[key]X[/key]</td>
      <td>切り取り</td>
    </tr>
    <tr>
      <td>[key]⌘[/key]+[key]V[/key]</td>
      <td>ペースト</td>
    </tr>
  </tbody>
</table>

※ キーボードのボタン風のデザインはkeyショートコードで作ることができます。

⌘+C

[key]⌘[/key]+[key]C[/key]

2020年8月9日関連キーボードのボタン風デザインをショートコードで作る方法 2020年8月9日関連ショートコードでカードデザインのサイト内リンクを作る方法

補足

こちらのショートコードでは、内部的には次のような指定をしています。

text-align: center !important

もし!importantを使いたくない場合には、ショートコードのimportantオプションをfalseにすることで、importantなしの指定にすることができます。

[center important="false"]...[/center]

※ leftやrightのショートコードも同じようにimportantのオプションがあります。

また、ショートコードではtext-alignを使って整列させているので、インライン要素なら画像も整列させることができます。