ここではショートコードを使って文字を左寄せ・中央寄せ・右寄せする方法について紹介したいと思います。
文字の左寄せ・中央寄せ・右寄せに
まずは中央寄せから見ていきましょう。
中央寄せ
ショートコードで左寄せするには、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
で表全体を囲めば、すべて中央寄せにすることができます。
ショートカット | 操作 |
---|---|
⌘+C | コピー |
⌘+X | 切り取り |
⌘+V | ペースト |
ショートカット | 操作 |
---|---|
⌘+C | コピー |
⌘+X | 切り取り |
⌘+V | ペースト |
次のコードを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]


補足
こちらのショートコードでは、内部的には次のような指定をしています。
text-align: center !important
もし!important
を使いたくない場合には、ショートコードのimportant
オプションをfalse
にすることで、importantなしの指定にすることができます。
[center important="false"]...[/center]
※ leftやrightのショートコードも同じようにimportantのオプションがあります。
また、ショートコードではtext-align
を使って整列させているので、インライン要素なら画像も整列させることができます。
コメントを残す