<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<TITLE>桃の独語</TITLE>
<style type="text/css">
<!--
a:hover {
    color: #ffffff;
    border-style: groove;
    background-color: #33ccff;
}
body {
    scrollbar-3dlight-color:#000000;
    scrollbar-arrow-color:#ffffff;
    scrollbar-base-color:#ffffff;
    scrollbar-darkshadow-color:#000000;
    scrollbar-face-color:#ffffff;
    scrollbar-highlight-color:#cccccc;
    scrollbar-shadow-color:#ffffff;

    margin: 0; padding: 0; height: 100%;
    /* 背景画像は透過度オーバーレイで制御 */
}
-->
</style>
<STYLE type=text/css>
<!--
body {
    scrollbars: auto;
}
-->
</STYLE>
<style>
  /* 透過度オーバーレイ用 */
  body:before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('tkimage00.jpg') no-repeat center center fixed;
    background-size: 100% 100%;
    opacity: var(--bg-opacity, 1); /* デフォルト透過度 */
    z-index: -1;
    pointer-events: none;
  }

  /* 追加のスタイル */
  #twitterFrameWrapper {
    position: absolute;
    top: 150px;
    left: 40px;
    width: 670px;
    height: 740px;
    background-color: transparent;
    border: 1px solid #ccc;
    overflow: hidden;
  }

  #twitterFrameWrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
  }

  /* スライダーUI */
  .opacityControl {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 10;
    background: rgba(255,255,255,0.7);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
  }
</style>
</HEAD>
<BODY bgcolor="#f7f7f7" text="#000000" link="#000000" vlink="#000000" alink="#000000">

<DIV STYLE="position:absolute;top:8px;left:40px;">
<IMG src="manyou09.jpg" width="680" height="130" alt="">
</DIV>

<DIV STYLE="position:absolute;top:8px;left:10px;">
<FONT FACE="ＭＳ 明朝" SIZE=-1 COLOR=#000000><A href="index.htm" target="_top">home</A></FONT>
</DIV>

<DIV STYLE="position:absolute;top:8px;left:60px;">
<A href="https://x.com/momoNo1" target="_top">twitter</A>
</DIV>

<DIV STYLE="position:absolute;top:8px;left:120px;">
<A href="https://www.facebook.com/" target="facebook">facebook</A>
</DIV>

<div id="twitterFrameWrapper">
  <iframe src="twitter1.htm" name="imomo" scrolling="auto" marginwidth="1" marginheight="1"></iframe>
</div>

<!-- スライダーUI -->
<div id="opacityControl" class="opacityControl">
  <label for="opacityRange">透過度:</label>
  <input type="range" id="opacityRange" min="0" max="100" value="100">
  <span id="opacityValue">100%</span>
</div>

<script>
  const opacityRange = document.getElementById('opacityRange');
  const opacityValue = document.getElementById('opacityValue');
  const body = document.body;

  // 初期透過度の設定
  const initialOpacity = opacityRange.value / 100;
  body.style.setProperty('--bg-opacity', initialOpacity);
  opacityValue.textContent = opacityRange.value + '%';

  // スライダー操作で透過度変更
  opacityRange.addEventListener('input', () => {
    const opacity = opacityRange.value / 100;
    body.style.setProperty('--bg-opacity', opacity);
    opacityValue.textContent = opacityRange.value + '%';
  });
</script>

<BR>
</BODY>
</HTML>