見出し画像

フローティングバナーの作り方

村井宗明（ITエンジニア・元文部科学大臣政務官）

特定の画像がフローティングバナーになっていて、それをクリックすると、リンクされる仕様の作り方。

例

https://image.jimcdn.com/app/cms/image/transf/dimension=436x10000:format=jpg/path/s895e204866c539b5/image/i85bfb1e309f93d40/version/1708864188/image.jpg

クリックすると、

https://tobutoptours.ai/masaru35

にリンクされるフローティングバナー

ロジック


１，<head>と</head>の間に<style>でCSSっぽく。
２，<body>と</body>の間にバナー

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローティングバナー</title>
<style>
  /* フローティングバナーのスタイリング */
  #floatingBanner  {
    position: fixed; /* 画面に固定 */
    bottom: 20px; /* 下から20pxの位置に配置 */
    right: 20px; /* 右から20pxの位置に配置 */
    z-index: 1000; /* 他の要素よりも前面に表示 */
  }
</style>
</head>
<body>

<!-- フローティングバナー -->
<a href="https://tobutoptours.ai/masaru35" id="floatingBanner">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=436x10000:format=jpg/path/s895e204866c539b5/image/i85bfb1e309f93d40/version/1708864188/image.jpg" alt="フローティングバナー">
</a>

</body>
</html>

応用編　スマホの時だけサイズを半分

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローティングバナー</title>
<style>
  /* フローティングバナーのスタイリング */
  #floatingBanner   {
    position: fixed; /* 画面に固定 */
    bottom: 20px; /* 下から20pxの位置に配置 */
    right: 20px; /* 右から20pxの位置に配置 */
    z-index: 1000; /* 他の要素よりも前面に表示 */
  }

  /* スマートフォン用のスタイル調整 */
  @media (max-width: 768px) {
    #floatingBanner  img {
      width: 50%; /* 画像の幅を50%に設定 */
      height: auto; /* 高さは自動調整 */
    }
  }
</style>
</head>
<body>

<!-- フローティングバナー -->
<a href="https://tobutoptours.ai/masaru35" id="floatingBanner">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=436x10000:format=jpg/path/s895e204866c539b5/image/i85bfb1e309f93d40/version/1708864188/image.jpg" alt="フローティングバナー">
</a>

</body>
</html>


ありがとうございます。 よろしくお願いします。