Adsense･楽天･Amazonなどのアフィリエイトリンクを左･中央･右寄せする方法

This post is also available in: English-US (英語)

Adsense･楽天･Amazonなどのアフィリエイトリンクを左･中央･右寄せする方法について書いています。
アドセンスを中央寄せするためのCSSの質問をよく聞かれるので記事にしました。本格的に勉強したい場合にはCSS（スタイルシート）について調べてみてください。

Adsense･楽天･Amazonなどのアフィリエイトリンクを左･中央･右寄せする方法

HTMLにCSS（スタイルシート）を直接書き込む方法

基本はCSS（カスケーディングスタイルシート）というコードを使って行うのですが、簡単にコピペだけで行えるようにかなり説明は省略しています。

以下のコードをコピペして使ってデザインに問題が起きた時、もしくは左寄せ・中央寄せ・右寄せされない場合には、他のCSSが何かしら干渉しているので、別の対策方法が必要です（ほとんどの場合、インライン要素・ブロック要素の問題です。本記事は、インライン要素を寄せることを前提に書いています）。

左寄せ

<div style="text-align:left;">
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

中央寄せ

<div style="text-align:center;">
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

右寄せ

<div style="text-align:right;">
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

外部CSS（スタイルシート）を使う方法

「HTMLにCSSを直接書き込む方法」が美しくないと思われる場合、外部スタイルシートで左寄せ・中央寄せ・右寄せする方法もあります。

左寄せ

HTMLコード

<div class="LinkLeft" >
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

外部CSSコード(LinkLeftの前のピリオドが大事です)

.LinkLeft{
text-align:left;
}

中央寄せ

HTMLコード

<div class="LinkCenter">
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

外部CSSコード(LinkCenterの前のピリオドが大事です)

.LinkCenter{
text-align:center;
}

右寄せ

HTMLコード

<div class="LinkRight">
	<!-- この部分にアフィリエイトリンクを入れる -->
</div>

外部CSSコード(LinkRightの前のピリオドが大事です)

.LinkRight{
text-align:right;
}

アフィリエイトリンクに対して文章を回り込みさせたい時は？

画像に対して文章を回り込みさせたい時にはCSSの「float」や「margin」などを使います。
ただし、「float」や「margin」を使うと色々とややこしい問題が起こりますので、どうしても！という場合でなければ上記の方法を検討したほうがいいかもしれません。

No tags for this post.