たつをの ChangeLog : 2018-03-07

自分用メモ。
領域を表示したり見えなくしたり入れ替えたりをトグルボタンで切り替え。
定期的に同じようなの書いてるけど現状版として。

show_hide




<script>
function show_hide(id) {
  if (!document.getElementById) return;
  if (!document.getElementById(id)) return;
  if (document.getElementById(id).style.display != "block")
    document.getElementById(id).style.display = "block";
  else
    document.getElementById(id).style.display = "none";
}
function show_hide_class(cn) {
  var es = document.getElementsByClassName(cn);
  for (var i = 0; i < es.length; i++) {
    if (es[i].style.display != "block")
      es[i].style.display = "block";
    else
      es[i].style.display = "none";
  }
}
</script>

<body onload="document.getElementById('b<TMPL_VAR name=ymd>').click()">

<div style="margin:1em">
<button id="b<TMPL_VAR name=ymd>" type="button" onclick="show_hide('c<TMPL_VAR name=ymd>');show_hide_class('s<TMPL_VAR name=ymd>')">
<span class="s<TMPL_VAR name=ymd>" style="display:block">見る</span>
<span class="s<TMPL_VAR name=ymd>" style="display:none">隠す</span>
</button>
</div>

<div id="c<TMPL_VAR name=ymd>" style="display:none">
[領域]
</div>

switch


[AAAAAA]


<div style="margin:1em">
<button id="b20180306" type="button" onclick="show_hide_class('s20180306')">
<span class="s20180306" style="display:block">領域A</span>
<span class="s20180306" style="display:none">領域B</span>
</button>
</div>
<div class="s20180306" style="display:block">[AAAAAA]</div>
<div class="s20180306" style="display:none">[BBBBBB]</div>

関連記事


Amazonアソシエイトプログラム(アフィリエイト)のサイト、スマホ対応されてますね。

Amazonアソシエイトプログラムのサイトがスマホ対応!

文字サイズがスマホ基準だし、ログインも簡単だし、いろいろスッキリ。ただ、見られる情報がかなり減ってるんですよね。商品名が先頭何文字かで省略されてるのも辛い(特に私はiPhone SEなので幅が……)。

でも、サクッと確認するだけならばこれでいいのかなあ。スマホブラウザ版では表示されない情報を確認したくなったら、「デスクトップ用サイトを表示」で切り替えて、今まで通りのデザインで使います(iPhone)。こっちは拡大しないと読めないんですが仕方なし。

たつをの ChangeLog
Powered by chalow