• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Muromachi

日本人のためのGenesis子テーマ『Muromachi』

  • ホームHome
  • Muromachiの特徴About
  • Muromachiの使い方Manual
  • ダウンロードDownload
  • Genesisとは
  • Genesis子テーマ一覧
  • Genesisの使い方
  • Genesisカスタマイズ
  • Genesisプラグイン
  • Genesis WP Fan
HomeMuromachiの使い方ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法
  • Muromachiの使い方

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

Genesis WP Fan
2020年8月9日2020年8月9日

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

目次

  • 1 文字の左寄せ・中央寄せ・右寄せに
  • 2 こんな使い方も
  • 3 補足

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

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

中央寄せ

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

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

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

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

centerショートコード

文字の中央寄せ

[ の記号と ] の記号は半角で入力してください。
[center]<p>文字の中央寄せ</p>[/center]

右寄せ

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

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

rightショートコード

文字の右寄せ

[ の記号と ] の記号は半角で入力してください。
[right]<p>文字の右寄せ</p>[/right]

左寄せ

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

leftショートコード

文字の左寄せ

[ の記号と ] の記号は半角で入力してください。
[left]<p>文字の左寄せ</p>[/left]

こんな使い方も

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

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

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

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

ショートカット操作
⌘+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]
2020年8月9日関連キーボードのボタン風デザインをショートコードで作る方法 2020年8月9日関連ショートコードでカードデザインのサイト内リンクを作る方法

補足

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

text-align: center !important

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

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

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

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

スポンサードリンク

demo
demo

PVランキング

  • 1
    2020年8月9日

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

  • 2
    2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 3
    2020年11月3日

    フッターのコピーライトを編集する方法

  • 4
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 5
    2013年1月11日

    マークアップ: HTML タグとフォーマット

関連記事

  • 2020年8月7日

    shoutショートコードで文字を強調する方法

  • 2020年3月7日

    CTAを表示する方法

  • 2020年8月8日

    キーボードのボタン風デザインをショートコードで作る方法

  • 2020年8月9日

    ショートコードで画像の横に吹き出しを追加する方法

  • 2020年11月3日

    フッターのコピーライトを編集する方法

  • Muromachiの使い方
この記事を書いた人
Genesis WP Fan

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。
※ この説明文は非表示にしたり、通常の投稿と同じようにHTMLを使用できます。







日本人のためのGenesisフレームワーク専用WordPressテーマ 『Muromachi』

SEOやセキュリティのプロから信頼されるGenesisフレームワークのメリットを生かしながら、日本人向けに見やすさや使いやすさ、機能性を追求しました。

Genesisサイトの制作ノウハウやウェブサイトの運営経験が詰まったWordPressテーマです。企業サイトはもちろん、ブログやアフィリエイトサイトなど、様々な用途にお使いいただけます。

ダウンロードする
← 前の記事
ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法
ショートコードでBoxデザインを作る方法
次の記事 →
ショートコードで文字を左寄せ(中央寄せ・右寄せ)する方法
フッターのコピーライトを編集する方法

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


最初のサイドバー

Genesis WP Fan

Genesis WP Fan

たいやき伝道師

WordPressテーマ『Muromachi』はGenesis WP Fanの中の人がGenesisフレームワークの子テーマとして制作しました。

Follow

サイト内検索

タグ

aside (1) Codex (2) css (5) html (3) jetpack (2) twitter (2) videopress (1) wordpress.tv (1) アライメント (2) カテゴリー (1) ギャラリー (2) コメント (3) コンテンツ (11) ショートコード (5) タイトル (3) タイル状 (1) タグ (1) チャット (1) テンプレート (11) トラックバック (1) パスワード (1) ピンバック (1) マークアップ (6) メディア (1) リンク (1) レイアウト (3) 一覧 (1) 動画 (2) 埋め込み (3) 字幕 (1) 引用 (1) 投稿 (1) 投稿フォーマット (15) 抜粋 (2) 改ページ (1) 書式化 (1) 極端な例 (8) 標準 (2) 母船 (1) 注目の画像 (3) 状態 (1) 画像 (7) 続きを読む (1) 読みやすさ (1)

アーカイブ

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

PVランキング

  • 1
    2020年8月9日

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

  • 2
    2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 3
    2020年11月3日

    フッターのコピーライトを編集する方法

  • 4
    No Image
    2012年1月8日

    テンプレート: ページ分け

  • 5
    2013年1月11日

    マークアップ: HTML タグとフォーマット

最近の投稿

  • 2020年11月3日

    フッターのコピーライトを編集する方法

  • 2020年8月9日

    サイドバーのプロフィールをウィジェットで設定する方法

  • 2020年8月9日

    ショートコードで画像の横に吹き出しを追加する方法

  • 2020年8月9日

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

  • 2020年8月9日

    参考リンクの紹介に便利なアクセント用ショートコードの使い方

  • 2020年8月9日

    記事編集時にショートカットキーでプレビューする方法

  • 2020年8月9日

    シンタックスハイライトの設定方法

  • 2020年8月9日

    サイトタイトルと説明文を中央寄せ(左寄せ)にする方法

  • 2020年8月8日

    ショートコードでBoxデザインを作る方法

  • 2020年8月8日

    ショートコードでボタンを作る方法

目次

  • 1 文字の左寄せ・中央寄せ・右寄せに
  • 2 こんな使い方も
  • 3 補足
ページトップへ

Footer

Muromachi

日本人のためのGenesis Framework子テーマ - Muromachi

Genesis FrameworkのSEOの強さをそのままに、日本人にとっての使いやすさにこだわりました。

タグ一覧

Muromachiの使い方 テンプレート マークアップ メディア 子カテゴリー 01 子カテゴリー 03 孫カテゴリー 投稿フォーマット 極端な例 親カテゴリー

フッターメニュー

  • ホーム
  • Muromachiの特徴
  • Muromachiの使い方
  • ダウンロード

メタ情報

  • ログイン
  • 投稿フィード
  • コメントフィード
  • WordPress.org

カテゴリー

  • Muromachiの使い方33
  • テンプレート10
  • マークアップ4
  • メディア1
  • 投稿フォーマット14
  • 極端な例5
  • 親カテゴリー1
    • 子カテゴリー 011
    • 子カテゴリー 031
      • 孫カテゴリー1

Copyright © 2023
Muromachi
All Rights Reserved.