CSSのリンクボタンや文を中央揃えにする【コピペOK・WordPress】

cssでリンクボタンを作ったけど、中央揃えにしたいのに左によって困ってる

そんな悩みを解決していきます。

結論、divタグとpタグを使えば簡単にできます。

例えば、ブログ記事の最後に使うカテゴリーへの誘導ボタンや、

プログラミングの記事一覧へ

リンクをHTMLのaタグで書くとき
 
プロフィールはこちら

左寄せになってしまいますよね。そこで今回は、中央揃えしていきます。

本記事を読むと、WordPressでリンクボタンや文を中央揃えにする方法がわかるようになります。

ボタンや文を中央揃えにする方法

HTML

HTMLでは、中央寄せをするためにpタグに「クラス（class）」と呼ばれる名札を付けます。

class を付けることで、css上でまとめてデザインの設定をすることができます。

<div class="center">
<p>
<a href="https://sushiringblog.com/category/programming" class="btn-gradient-3d-simple">プログラミングの記事一覧へ</a>
</p>
</div>

<div class="center">
<p>
<a href="https://sushiringblog.com/profile">プロフィールはこちら</a>
</p>
</div>

classの” “の中にある、「center」が名札です。

classに付ける名札はどんな英単語でもいいですが、あとで見ても分かりやすい名前にしましょう。

CSS

次に、CSSでプログラムを追加します。

外観 ＞ カスタマイズ ＞ 追加CSS にソースコードを貼り付けてください。

/*中央揃えにする*/
.center p{
	text-align: center;
}

完成例

一か所だけ中央揃えにしたい

いちいちdivで囲うのは面倒！
一か所だけだから、簡単に済ませたい

こういった方は、pタグに直接書いてしまうのがおすすめです。

<p style="text-align:center;">
<a href="https://sushiringblog.com/category/programming" class="btn-gradient-3d-simple">プログラミングの記事一覧へ</a>
</p>

<p style="text-align: center;">
<a href="https://sushiringblog.com/profile">プロフィールはこちら</a>
</p>

divを使わなくてもできるけど、問題点あり

一か所だけ中央揃えにしたいでも書いたように、実は「div」を使わなくても中央揃えにすることはできます。

さらに、pタグ自体にclassを付けることで中央揃えも可能です。

<p class="text-center">
<a href="https://sushiringblog.com/category/programming" class="btn-gradient-3d-simple">プログラミングの記事一覧へ</a>
</p>

.text-center {
 text-align:center;
}

しかし、問題点があります。

1. まとめて変更できない
2. 元のレイアウトが崩れてしまうことがある
3. WordPressのテーマによっては中央揃えにできない場合がある

なので、今回は「div」を使ったやり方を紹介しました。

少し問題点を解説します。

まとめて変更できない

<p style="text-align: center;"></p>

<p style="text-align: center;"></p>

<p style="text-align: center;"></p>

直接上記のように書いたとすると、後で変更したいときにpタグを1つ1つ直す手間がかかってしまいます。

元のレイアウトが崩れてしまうことがある

どういう事かと言うと、pタグはすでに左揃えになっています。
 pタグの例を見る

なので、下のように

/*中央揃えにする*/
p {
 text-align: center;
}

CSSを上書きしてしまうと、全てのpタグが中央揃えになってしまいます。
 全てのpタグが中央揃えになってしまう例

WordPressのテーマによっては中央揃えにできない場合がある

テーマによってあらかじめ、pタグにCSSの設定がされていることがあります。

※私が利用していた「manablog copy」は、pタグに「text-align: justify;」が設定されています。

そのため、追加CSSに

/*中央揃えにする*/
p {
 text-align: center;
}

と書いても、反映されないことがあります。

ポイント

divを使ったやり方で書いたように、

/*中央揃えにする*/
.center p {
 text-align: center;
}

centerの中のpタグと設定すると反映されます。

ただのpタグでは反映されませんが、○○の中のpタグのように詳細を書くと優先度が変わるので知っておくと便利です。

以上で終わります。

ご不明な点がありましたら、Twitterやお問い合わせからご連絡ください。

少しでも参考になれば幸いです。ご覧いただきありがとうございました。