CSSのリンクボタンや文を中央揃えにする【コピペOK・WordPress】
cssでリンクボタンを作ったけど、中央揃えにしたいのに左によって困ってる
そんな悩みを解決していきます。
結論、divタグとpタグを使えば簡単にできます。
例えば、ブログ記事の最後に使うカテゴリーへの誘導ボタンや、
リンクをHTMLのaタグで書くとき
プロフィールはこちら
左寄せになってしまいますよね。
そこで今回は、中央揃えしていきます。
本記事を読むと、WordPressでリンクボタンや文を中央揃えにする方法がわかるようになります。
記事の内容
- ボタンや文を中央揃えにする方法
- 一か所だけ中央揃えにしたい
- divを使わなくてもできるけど、問題点あり
記事の内容
ボタンや文を中央揃えにする方法
HTML
HTMLでは、中央寄せをするためにpタグに「クラス（class）」と呼ばれる名札を付けます。
class を付けることで、css上でまとめてデザインの設定をすることができます。
<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を使わなくてもできるけど、問題点あり
一か所だけ中央揃えにしたいでも書いたように、実は「div」を使わなくても中央揃えにすることはできます。
さらに、pタグ自体にclassを付けることで中央揃えも可能です。
しかし、問題点があります。
- まとめて変更できない
- 元のレイアウトが崩れてしまうことがある
- WordPressのテーマによっては中央揃えにできない場合がある
なので、今回は「div」を使ったやり方を紹介しました。
少し問題点を解説します。
まとめて変更できない
<p style="text-align: center;"></p>直接上のように書いたとすると、後で変更したいときにpタグを1つ1つ直す手間がかかってしまいます。
注意
一か所だけ変更したいなど、数が少ない場合は直接書いた方が早い場合もあります。
元のレイアウトが崩れてしまうことがある
どういう事かと言うと、pタグはすでに左揃えになっています。
pタグの例を見る
なので、下のように
/*中央揃えにする*/
p {
text-align: center;
}CSSを上書きしてしまうと、全てのpタグが中央揃えになってしまいます。
WordPressのテーマによっては中央揃えにできない場合がある
テーマによって予めpタグにCSSの設定がされていることがあります。
text-align: justify;
が設定されています。
そのため、追加CSSに
/*中央揃えにする*/
p {
text-align: center;
}と書いても、反映されないことがあります。
ポイント
divを使ったやり方で書いたように、
/*中央揃えにする*/
.center p {
text-align: center;
}centerの中のpタグと設定すると反映されます。
つまり、ただのpタグでは反映されませんが、○○の中のpタグのように詳細を書くと優先度が変わるので知っておくと便利です。
以上で終わります。
ご不明な点がありましたら、Twitterやお問い合わせからご連絡ください。
匿名で聞けちゃう！はる@専門学生ブロガーさんの質問箱です
おもに専門学校の質問に答えます！(それ以外もOK) 【プロフィール】 ランサーズでPythonのDjango案件受注経験あり| web系のプログラミング情報をつぶやきます | 20歳 専門学校3年生 | プログラミング挫折→ブログ書く→挫折→ブログ再開→ブログで最高月収益4桁&最高月間3000pv達成 | 実は仮想通貨でお金を5倍増やした経験もあります | 家に引きこもって生きる
少しでも参考になれば幸いです。
ご覧いただきありがとうございました。