カウンセラー / WEB・ITコンサルタント 大東 信仁（ものくろ） 
自由に配置したい
アフィリサイトのバーナーリンクをホームページに配置するとき、文章の左や右に配置したい、自由に配置したい、そう思うのは当然。また、二つのリンクバーナーを組み合わせた方がいい感じだから並べて配置したい。バーナーを中央に配置したいことは、よくあることだ。
しかし、アフィリエイトサイトにて作成したバナーリンクをそのまま貼り付けると、上のサンプルのように左寄せになる。文章の回り込みはできない。バーナーリックのHTMLを書き換えたいが、Amazonも楽天もHTMLの書き換えを禁じている。どこのアフィリサイトリンクもコード変更を認めていない。
そのままでは、自由な配置どころか、並べて配置することも出来ない。これでは困る。
解決する方法は2つある。どちらもバーナーリンクオブジェクトをTable・float環境で囲ってしまい、そのTable・float環境を左寄せ・右寄せ、文章の回り込みができるように設定する方法だ。
- Tableタグでの表組み
- インラインスタイルシートのfloat環境
2つの方法のうち「スタイルシート」を使うほうが今の手法だと思う。方法をまとめた。
インラインスタイルシートのfloat環境
左寄せ・右寄せ
<div style="float: left; margin: 10px;"> バナーリンク </div>
これは左寄せ・マージン10ピクセルの配置設定。バーナーリンクの右側は、文章が回り込む。
右寄せの時は、float: right; に書き換えるとOK。下は右寄せのサンプル。
＜サンプル記事＞
UCC ブルーマウンテンブレンド。インスタントコーヒーなのか？！とびっくりするコーヒー。とても美味しい。価格も50gで1000円、と高い。Amazonでも楽天でも同じ値段だ。大きなスーパーならば商品棚に並んでいることがある。コーヒー好きならインスタント？と思われるだろう、だからこそ、逆に一度試して欲しい。風味・香りはすばらしい。価格も高く感じる。でも、缶コーヒーと比べてどうだろうか？そう考えると、お買い得な商品なことがわかるだろう。
苦言だが一つ。そのすばらしい美味しさ・香りを伝えるために「ブルーマウンテンブレンド」を商品名にした気持ちはわかる。しかし、ジャマイカ「ブルーマウンテン山脈」標高800～1200m 特定エリアでの生産豆しか「ブルーマウンテン」と名前をつけることができない。UCCの商品紹介にて「生豆生産国：ジャマイカ、ブラジル他」と書いてある。だから「ブレンド」なのだろうが、、。美味しく香りも最高なのだから違う商品名もあったと思う。UCCだからこそ「ブルーマウンテン」のブランドを大切使っていく方が好感を持つのだが。
中央配置
インラインスタイルシートを使った場合に、中央配置はちょっとコツがいる。「float: center;」というオプションが無いからだ。
これについては、Web標準普及プロジェクトホーム:ブロックレベル要素をセンタリングする方法に詳しく説明されている。全体領域に対して中央寄せ設定は以下のようになる。
<div style="border:black;"> <div style="margin-left:auto;margin-right:auto;width:10em;border:red;"> バーナーリンク </div> </div>
このサイトは、右のサイドバーを含んだ領域が全体となっているために、全体領域の中央には配置されているが、下のサンプルのようにサイドバーとぶつかってしまう。これでは使い物にならない。
どうすれば？思ったところに配置できるのか
ではどうすれば良いのだろうか？。このサイトならメインコンテンツ表示部分は640ピクセル。（もしわからないなら、ピクセル物差しで計ればOK。）リンクバーナーの幅は決まっている。これを計算し、float環境の余白設定で思ったところに配置できる。
Amazonのバーナー サイズは468 x 60ピクセル。640 – 468 = 172 。172ピクセルが余白部分。これを均等に86ピクセルを左右の余白設定にすれば中央寄せになる。(このサイトでは、右ツールバーがあることで86ピクセルの配置では右に寄っているように錯覚する。80ピクセルの設定がきれいだった。)
<div style="float: left;margin-left:86px;width:640px;"> バーナーリンク </div>
左寄せで2つのバーナーを並べて配置するTableタグ組
これは、CSSが使われる前によく使われた手法。表で配置を組み立て、枠線を非表示にすることでレイアウトする方法。詳しくは「Tableタグ」の使い方を参照してほしい。
<table align="left" border="0" > <tr> <td> バーナーリンク1 </td> <td> バーナーリンク2 </td> </tr> </table>
- table align=”center” 中央寄せになる。
- table align=”right” 右寄せになる。
右寄せでの配置例
＜サンプル記事＞
|
|
昭和9年創業、大阪千日前の老舗珈琲店、丸福コーヒー。自家焙煎珈の抽出による“極みの濃さ”が特徴。アイスコーヒーは他では味わえな
い濃い味を楽しめる。
ドリップコーヒーは袋を開けた瞬間から素晴ら
しい香り。飲み応え十分の風味を十二分に楽し
める。これを家庭で味わえるのは贅沢だと思う。一息入れる休憩に気分をリフレッシュするのに、ドリップコーヒーを楽しんでいる。
ぜひ味わってほしい。
丸福コーヒーのお店で味わうのも良いだろう。お店ではコーヒー（ホットもアイスも）500円。これらの商品、ドリップは8カップ、アイスは1Lなのでグラス4杯。お買い得な商品だ。
