アドセンス風のカード型広告

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

Googleアドセンスのアプリ紹介などで使われる、カード型広告のCSSです。

バナーとテキストの広告タグを貼り付けることで、ASPの指定したタグを崩さずに好きな広告を作ることができます。

CSSの解説

コードを見る

余計な装飾を省いています。

HTML

<div class="ad-card">
  <div class="top-area">
    <!-- 1.ここに上の画像用バナー -->
  </div>
  <div class="under-area"> <!-- 下側エリア -->
    <div class="inner-box">
      <div class="icon-ad">
        <!-- 2.ここにアイコン画像用のバナー -->
      </div>
      <div class="ad-title">
        <!-- 3.ここにテキスト広告 -->
      </div>
      <p class="ad-descript">
        ここにセール文
      </p>
      <div class="ad-arrow">
        <a href="#"> <!-- 4.広告用のリンク -->
          >
        </a>
      </div>
    </div>
  </div>
</div>

CSS

/**************
 全体
**************/
.ad-card{
  width: 380px;
  background: rgb(86,80,79);
  margin: 0 auto;
  border: 1px solid gray;
}
.ad-card a{
  text-decoration: none;
  color: inherit;
}

/******************
 上のバナー画像
******************/
.top-area img{
  width: 100%;
  vertical-align: bottom; /*画像下の余白削除*/
}

/*****************
 下のエリア
*****************/
.under-area{
  position: relative;
  top: -20px; /*少しだけ上の画像と被せる*/
  backdrop-filter: blur(10px); /*背景をぼかす*/
  -webkit-backdrop-filter: blur(10px);
  text-align: center; /*中央揃え*/
  padding: 10px 20px;
}

/******************
 カード部分
******************/
.inner-box{
  padding: 10px;
  background: white;
  border-radius: 6px; 
  box-shadow:0 0 4px rgba(0,0,0,50%);
}

/****************
 アイコン画像
****************/
.icon-ad img{
  width: 80px;
  height: auto;
}

/****************
 タイトル（商品名）
****************/
.ad-title{
  font-weight: bold;
  font-size: 18px; /*文字サイズ*/
}

/****************
 セール文
****************/
.ad-descript{
  color: #666;
}

/***************
 矢印ボタン
***************/
.ad-arrow a{
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: rgb(62,54,53); /*ボタン色*/
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  text-shadow: 1px 1px 0 rgb(255 255 255 / 10%);
  box-shadow: 1px 2px 3px 0 rgb(0 0 0 / 40%)
}

以下の4つの広告コードを、所定の位置に貼り付けて使用します。

広告リンク	貼り付け場所
横長バナー	.top-area
アイコン用のバナー	.icon-ad
テキストリンク	.title-ad
広告URLのみもしくはテキストリンク	.ad-arrow（テキストは ">" にする）

また、全体の背景色は .ad-card 内のbackgroundから、矢印ボタンの色は .arrow-ad のbackgroundから変更できます。

応用CSS

インライン化済みのタグ

CSSを全てインライン化したもの。
HTMLコードだけをそのまま貼り付けたい場合は、こちらを使用すると便利です。

なお、広告の貼り付け位置や、色の変更箇所は同様です。

<div class="ad-card" style="width: 380px;background: rgb(86,80,79);margin: 0 auto;border: 1px solid gray;">
  <div class="top-area">
    <!-- 1.ここに上の画像用バナー -->
  </div>
  <div class="under-area" style="position: relative;top: -20px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);text-align: center;padding: 10px 20px;"> <!-- 下側エリア -->
    <div class="inner-box" style="padding: 10px;background: white;border-radius: 6px;box-shadow: 0 0 4px rgba(0,0,0,50%);">
      <div class="icon-ad">
        <!-- 2.ここにアイコン画像用のバナー -->
      </div>
      <div class="ad-title" style="font-weight: bold;font-size: 18px;">
        <!-- 3.ここにテキスト広告 -->
      </div>
      <p class="ad-descript" style="color: #666;">
        ここにセール文
      </p>
      <div class="ad-arrow">
        <!-- 4.広告用のURLに差し替える -->
        <a href="#" target="_blank" rel="noopener sponsored" style="text-decoration: none;color: white;font-size: 18px;font-weight: bold;background: rgb(62,54,53);display: inline-block;width: 50px;height: 50px;line-height: 50px;border-radius: 50%;text-align: center;text-shadow: 1px 1px 0 rgb(255 255 255 / 10%);box-shadow: 1px 2px 3px 0 rgb(0 0 0 / 40%);"> 
          >
        </a>
      </div>
    </div>
  </div>
</div>