CSSで作ったリンクボタンや文を中央揃えにする【コピペOK・WordPress】
cssでリンクボタンを作ったけど、中央揃えにしたいのに左によって困ってる
そんな悩みを解決していきます。
結論、divタグとpタグを使えば簡単にできます。
例えば、ブログ記事の最後に使うカテゴリーへの誘導ボタンや、
リンクをHTMLのaタグで書くとき
プロフィールはこちら
左寄せになってしまいますよね。
そこで今回は、中央揃えしていきます。
本記事を読むと、WordPressで作ったリンクボタンや文を中央揃えにする方法がわかるようになります。
記事の内容
- そもそもdivタグ・pタグとは
- ボタンや文の中央揃えソースコードを公開
- 一か所だけ中央揃えにしたい
- 追記
そもそもdivタグ・pタグとは
divタグ
divは「かたまりをつくる」ものです。
pタグと違って役割はありませんが、divで囲むことによって1つのかたまりを作ることができます。
pタグ
「段落」を意味するもの。
paragraphの略で使われています。
段落で使うものだと覚えておけば問題ないです。
divタグとpタグの表
| divタグ | pタグ | |
| 役割 | 特になし | 段落 |
| 使い方 | 1つのかたまりを作る | 文章の段落で使う |
ボタンの中央寄せソースコードを公開
HTML
HTMLでは、中央寄せをするためにpタグに「クラス（class）」と呼ばれる名札を付けます。
<div class="center">
<p>
<a href="https://sushiringblog.com/category/study" class="btn-gradient-3d-simple">勉強の記事一覧へ</a>
</p>
</div>
<div class="center">
<p>
<a href="https://sushiringblog.com/profile">プロフィールはこちら <i class="fa fa-hand-o-right" aria-hidden="true"></i></a>
</p>
</div>
classの" "の中にある、「center」が名札です。
classに付ける名札はどんな英単語でもいいですが、あとで見ても分かりやすい名前にしましょう。
CSS
次に、CSSでプログラムを追加します。
外観 ＞ カスタマイズ ＞ 追加CSS にソースコードを貼り付けてください。
/*中央揃えにする*/
.center p{
text-align: center;
}
ボタンのデザイン
ボタンのデザインは、サルワカさんのサイトを参考にしています。
CSSで作る！押したくなるボタンデザイン100（Web用）
私のボタンのCSSはこちらです。
ボタンのCSS
完成例
一か所だけ中央揃えにしたい
いちいちdivで囲うのは面倒！
一か所だけだから、簡単に済ませたい
こういった方は、pタグに直接書いてしまうのがおすすめです。
<p style="text-align: center;">
<a href="https://sushiringblog.com/category/study" class="btn-gradient-3d-simple">勉強の記事一覧へ</a>
</p>
<p style="text-align: center;">
<a href="https://sushiringblog.com/profile">プロフィールはこちら <i class="fa fa-hand-o-right" aria-hidden="true"></i></a>
</p>
追記
一か所だけ中央揃えにしたいでも書いたように、実は「div」を使わなくても中央揃えにすることはできます。
しかし、問題点があります。
- まとめて変更できない
- 元のレイアウトが崩れてしまうことがある
- WordPressのテーマによっては中央揃えにできない場合がある
なので、今回は「div」を使ったやり方を紹介しました。
少し問題点を解説します。
まとめて変更できない
<p style="text-align: center;"></p>直接上のように書いたとすると、後で変更したいときにpタグを1つ1つ直す手間がかかってしまいます。
注意
一か所だけ変更したいなど、数が少ない場合は直接書いた方が早い場合もあります。
元のレイアウトが崩れてしまうことがある
どういう事かと言うと、pタグはすでに左揃えになっています。
pタグの例を見る
なので、下のように
/*中央揃えにする*/
p {
text-align: center;
}CSSを上書きしてしまうと、全てのpタグが中央揃えになってしまいます。
全てのpタグが中央揃えになってしまう例
WordPressのテーマによっては中央揃えにできない場合がある
テーマによって予めpタグにCSSの設定がされていることがあります。
text-align: justify;
が設定されています。
そのため、追加CSSに
/*中央揃えにする*/
p {
text-align: center;
}と書いても、反映されないことがあります。
ポイント
divを使ったやり方で書いたように、
/*中央揃えにする*/
.center p {
text-align: center;
}centerの中のpタグと設定すると反映されます。
つまり、ただのpタグでは反映されませんが、○○の中のpタグのように詳細を書くと優先度が変わるので知っておくと便利です。
まとめ
以上で完成です。
ご不明な点がありましたら、Twitterやお問い合わせからご連絡ください。
今後の記事づくりの参考にさせていただきます。
他にもプログラミングについての記事を書いています。
ぜひご利用ください。
少しでも参考になれば幸いです。
ご覧いただきありがとうございました。