インラインスタイルシートを使って、アフィリサイト 商品バーナーリンクを並べて配置する方法。

自由に配置したい

アフィリサイトのバーナーリンクをホームページに配置するとき、文章の左や右に配置したい、自由に配置したい、そう思うのは当然。また、二つのリンクバーナーを組み合わせた方がいい感じだから並べて配置したい。バーナーを中央に配置したいことは、よくあることだ。

しかし、アフィリエイトサイトにて作成したバナーリンクをそのまま貼り付けると、上のサンプルのように左寄せになる。文章の回り込みはできない。バーナーリックの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” 右寄せになる。
このサイトで使っているWordPressテーマ「zBench」では、border=”0″設定にしても、枠線が出力されるので見た目がわるく、積極的に使える方法ではない。(CSS設定を変えればいいが、全体の表示が崩れるので変更できない。)

右寄せでの配置例

<サンプル記事>

【丸福珈琲店(公式店)】ドリップ...

【丸福珈琲店(公式店)】ドリップ…
価格:588円(税込、送料別)

昭和9年創業、大阪千日前の老舗珈琲店、丸福コーヒー。自家焙煎珈の抽出による“極みの濃さ”が特徴。アイスコーヒーは他では味わえな
い濃い味を楽しめる。

ドリップコーヒーは袋を開けた瞬間から素晴ら
しい香り。飲み応え十分の風味を十二分に楽し
める。これを家庭で味わえるのは贅沢だと思う。一息入れる休憩に気分をリフレッシュするのに、ドリップコーヒーを楽しんでいる。

ぜひ味わってほしい。

丸福コーヒーのお店で味わうのも良いだろう。お店ではコーヒー(ホットもアイスも)500円。これらの商品、ドリップは8カップ、アイスは1Lなのでグラス4杯。お買い得な商品だ。

無料メルマガ

  • ブログに書けないココだけの裏話
  • お得なご案内
  • バックナンバーは非公開
  • 不定期発行
ものくろキャンプ メルマガ
購読登録フォーム
Eメール必須
お名前(姓)必須
お名前(名)必須

講座・ワークショップ に参加する

2023-06-08
19:00 - 22:00
2023-06-17
11:00 - 12:30
2023-06-21
19:00 - 21:00
2023-06-23
19:00 - 22:00
2023-06-25
10:00 - 12:00
2023-07-01
  • ブックマーク

著者情報

おおひがし のぶひと

大東 信仁

1976年大阪生まれ。鳥取大学大学院博士課程(専門は乾燥地農業)を中退後、零細企業の立ち上げに関わり、スタッフ育成・社内ITならびにWEBシステム開発を担当。6億円の受注プロジェクト案件をまとめる。2011年に過労にて就労禁止(双極性障害)の診断を受け、生き方を見つめなおす。双極性障害を克服し、2014年からフリーランスにてWEB・ITコンサルにてWordPressを得意とした活動を行い、1,200名を超えるコンサル実績を持つ。その中で2009年から書き続けているブログは、4,100記事を超え、2016年には月間65万PVを達成した。2018年に法人化し”株式会社あみだす”となる。現在は、コンサルタントに加えて、自己受容と自己理解を広げ、誰もがそのままで命を輝かせるトランスパーソナル心理学をベースとしたカウンセラーとして”心が通う組織づくり”の支援(企業内コミュニケーション改善コンサルティング)を中心に活躍中。


株式会社 あみだす 代表取締役/岡部明美LPL養成講座 認定心理カウンセラー ・セラピスト(業界歴 5年)/ ブロガー / WordPress & Woocommerceが得意 / 親指シフト歴11年/ orz レイアウト開発者

サービス提供領域

  • WEBコンサルティング
  • WEB・コンテンツ マーケティング
  • SEO コンサルティング
  • WEBサイト制作・運用保守サポート
  • EC サイト制作・運用保守サポート
  • WordPress 導入サポート
  • WordPress 運用サポート
  • SNS コンサルティング
  • Youtube コンサルティング
  • 情報発信 サポート
  • IT・WEBの枠組みを超えた経営支援
  • 講師・ワークショップ 運営サポート
  • 心理カウンセリング
  • 企業様向け コミュニケーション研修
  • 経営者様向け サポート
  • 自己成長・探求 サポート

お仕事のご依頼はこちら

WEB・ITコンサルティング

カウンセリング・セラピー

公式LINE

公式LINEにて、不定期ながら、モニターセッションやお得情報などのスケジュール案内や、心と向き合うコツなどを発信し、日常の中でカウンセリングの視点からの”気づき”を公式LINEにて語ります。ぜひ、ご登録ください。

友だち追加

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。


カテゴリー 一覧