画像 + タイトルと説明 + ボタンというアフィリエイトリンクを、レスポンシブさせるCSSの一例

よく「画像＋タイトルや説明＋ボタン」という組み合わせがあると思います。主にAmazonアソシエイトといったアフィリエイトとかで。

この組み合わせ自体はよくあるのですが、サイトがレスポンシブデザインのとき、画像と文章とボタンの配置がうまくいかずイライラすることはありませんか？

レイアウト的に変な空間ができたり、ボタンが大きくなりすぎたり…。

ボタンが一つならまだ簡単なのですが、2つ3つと増えたり減ったりと、ボタンの数自体もその都度変わるものなら、全部に通用するCSSを作るのは面倒ちぃものです。

今回、Amazonや楽天のアフィリエイト用に自作のものを作ったので、何かの参考なるかなぁーと思い紹介したいと思います。

スポンサーリンク

画像+タイトルと説明文+ボタンのHTMLとCSS

では紹介していきます。こういうのってなんて言うのでしょう？ アフィリエイトリンクかな？

今回のコード紹介は CodePen を使ってみました。

このようなコードなどを実行できてブログなどに埋め込めるオンラインサービスは jsbin や jsfiddle などいろいろありますね。

ですが AMP での表示もテストした結果、iframeの埋め込みで表示もくずれない CodoPen を使うことにしました。

まあ CodoPen によくある「どやーー」というコードは書けませんけどね（笑）

とりあえず、作ったコードはこちらです。

表示環境がパソコンならば、ブラウザのウィンドウ幅を狭めたり広げたりグリグリ動かしたら配置が変わります。スマホなら縦横と画面を回転させたら変わるはずです。

以下、解説です。

解説

まず第一段階としてスマホ版の状態から解説します。

ちなみにわたしのブログでは、このCSSにbox-shadowなどの装飾やボタンの位置を微調整など施していますが、配置変化の仕組み自体はまったく同じです。

第一段階（スマートフォンなど）

スマホなどで表示する最小段階では、説明文にclear:bothを指定してフロートで左に寄せている画像の下に来るようにしています。

ボタン部分は Flexbox にして中央表示するようにしています。max-widthも指定してボタンが一つだけでも大きくなりすぎないようにしています。

ちなみにタイトル部分は念のため、overflow:hiddenを指定して画像の下に文字が回り込まないようにしています。

第二段階（タブレットなど）

次の段階ではclear:noneを指定して説明文が画像の右側にいくようにしています。

ボタン部分は元々width:100%指定しているので、回り込まずに画像の下側に残ります。

第三段階（パソコンなど）

そして最も大きくなるこの段階では、ボタンも画像の横に配置するため、元々div要素で囲んでいたタイトルと説明文とボタンの要素にoverflow:hiddenを指定させます。

この時、ボタンが中央表示のままだと変に中央表示してしまうので、justify-content:flex-startで通常通り左に寄るように指定しています。

まとめ

基本的にはCSSのclearとoverflowを使って簡単に指定してます。

CSSの指定自体は他にもあると思いますし、デザインによっては変わってくるとは思います。

まぁ、こんな方法もあるよーということで、ご参考になりましたら幸いです。

スポンサーリンク