はじめに
ASPから広告コードを取得してコピペしたけど、バナーが中央に表示されない･･････
と悩んでいる方は、本記事を読めば解決できるはずです。
内容は入門レベルですが、HTML/CSS の基本的な書き方を理解していることが前提になります。
[方法１] text-align: center;
広告コードを div タグで囲い、適当なクラス名を付けます。
(今回は、”ad1″ としました。)
<div class="ad1">
<!-- 広告コード -->
<!--
<a href=...>
<img src=...>
</a>
-->
</div>この状態では、バナーはまだ左詰めのままです↓
次にカスタムCSSにて、クラス “ad1” に対し、
text-align: center;
と指定します。
.ad1 {
text-align: center;
}すると、バナーが中央に表示されます↓
[方法２] display: block; margin: 0 auto;
※ よほどの理由がない限り、[方法１] をオススメします。
※ 「こういう方法もあるんだな」程度に捉えてください。
広告コードを div タグで囲い、適当なクラス名を付けます。
(今回は、”ad2″ としました。)
<div class="ad2">
<!-- 広告コード -->
<!--
<a href=...>
<img src=...>
</a>
-->
</div>この状態では、バナーはまだ左詰めのままです↓
次にカスタムCSSにて、クラス “ad2” の子要素である img タグに対し、
display: block;
margin: 0 auto;
と指定します。
.ad2 img {
display: block;
margin: 0 auto;
}img タグの display 値は、デフォルトでは inline レベルのため、margin を設定できません。
そのため、block レベルに変更します。
また、margin について、上下 に 0、左右 に auto を指定しました。
すると、バナーが中央に表示されます↓
なお、クラス “ad2” の子要素である img タグに対し、
margin: 0 auto 0 auto;
と指定しても大丈夫です。
上 右 下 左 の順番で、0 auto 0 auto を指定しています。
.ad2 img {
display: block;
margin: 0 auto 0 auto;
}参考文献
TechAcademyマガジン
本記事は、以下の記事を元に作成しました。
本記事より内容は難しいですが、より詳しく説明されています。
MDN Web Docs
Firefoxブラウザなどを開発する Mozilla によるサイトです。
以下は、本記事で説明したタグやプロパティに関するページです。
- タグ：img
- プロパティ：text-align, display, margin
初心者にとっては (自分も含む)、かなり難しいサイトかもしれません。
しかし、信頼性も高く、Web制作に有用なサイトです。
1冊ですべて身につく HTML&CSSとWebデザイン入門講座
自分が HTML/CSS を学んだ書籍の１冊です。
図が豊富で説明も分かりやすく、コーティング未経験者でも最後まで取り組めます。
HTML/CSS を体系的に学ぶのに、オススメの１冊になります。
終わりに
本記事では、WordPressのカスタムCSSで、広告バナーを中央寄せする方法を２つ説明しました。
CSS の知識があれば、WordPressでの記事作成において、様々なアレンジができるようになります。
自分もまだまだ勉強中であり、ほぼ毎回のようにコーティングで悩んでいます。
それでは、今回はここまで。
お疲れ様でした！
コメント