「お隣のポスターを見る」ボタンを設置しました

f:id:Katharine_15:20211120235832p:plain

図書館総合展も後半戦に入り、残り10日を切りました。
「やわらか図書館学」はポスターセッションに出展していますが、他の出展者の方のポスターを見てみるとどれも力作揃い。
1人で勝手にやっている自分と違って、皆さんそれぞれの組織・団体の中でいろいろな調整等のご苦労をされて出展されていると思うので、（昨年のアクセス数を知っているだけに）なるべく多くの人に見ていただけるといいなぁと思い、微力ながら自分のポスターセッションの末尾に、ランダムで他のポスターへリンクするボタンを設置してみました。
リアルな会場でポスターを見るときのように、見終わったら隣のポスターに移動するようなイメージです。他のポスターをご覧になるきっかけになりましたら幸いです。

他のポスターセッション出展の方へ

もしポスターセッションに出展されている方で、同じくボタンを設置してみたいという方は、「ソース」の画面で、ボタンを置きたい場所に以下のコードを貼り付ければ設置できるかと思うので、よろしければお試しください。みんなが置けばどんどんお隣へ。

<script type="text/javascript"><!--

function myRndLink(){    
var min = 1 ;
var max = 65 ;
var random = Math.floor( Math.random() * (max + 1 - min) ) + min ;
     window.open(random);    
}
// --></script>

<button class="" onclick="myRndLink()" type="submit"><span>お隣のポスターを見る</span></button>

ボタンの文字等、自由に編集していただいて問題ございません。
もし自分が設置しているような装飾をされたい場合は、以下のコードを適当なところにコピペすれば、同じスタイルが適用されるはずです。（上記のコードの「class=""」を「class="btn"」と変更する必要があります。）

<style type="text/css">
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
button.btn-border{
  margin-bottom: 12px;
  padding: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 0;
  width:250px;
}

button.btn-border span{
  position: relative;
  display: block;
  padding: 1.25rem 3rem;
  color: #333;
  border: 2px solid #333;
  border-radius: 0.5rem;
  background: #fff;
}

button.btn-border:before{
  position: absolute;
  bottom: -8px;
  left: 0;
  display: block;
  width: 100%;
  height: 14px;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border: 2px solid #333;
  border-top: 1px solid #333;
  border-radius: 0 0 0.5rem 0.5rem;
  background-image: -webkit-repeating-linear-gradient(
    135deg,
    #333,
    #333 1px,
    transparent 2px,
    transparent 5px
  );  

background-image: repeating-linear-gradient(
    -45deg,
    #333,
    #333 1px,
    transparent 2px,
    transparent 5px
  );
background-size: 7px 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

button.btn-border:hover{
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
}

button.btn-border:hover:before{
  bottom: -5px;
}

button.btn-border:active{
  -webkit-transform: translate(0, 7px);
  transform: translate(0, 7px);
}

button.btn-border:active:before{
  bottom: -1px;
}
</style>

他のデザインにしてみたいという方は、以下のサイトが参考になるかと思います。上記のCSSも以下のサイトのものです。
（「a.」となってるところを「button.」とする必要があります。） jajaaan.co.jp

技術的な話

ポスターセッションのページは、全て同じパスに置かれており、（多分）1から65までの連番が振られているので、1から65からランダムな数字を振り出して、相対パスでリンクする、という感じで作りました（つもりです）。
参考にあげたサイト等を参考に作りましたが、私はJavaScriptをかじっては忘れ、かじっては忘れしている人間のため、もっとスマートな書き方やコードの問題点などあるかと思います。もしおわかりになる方はご教示いただけたら嬉しいです。
今わかっている問題点としては、1-65までの中でも非公開にしているページなどもあるので、あらかじめそこへのリンクを避けられるといいのかなとは思います。あと、微妙に枝番のようになっているページもありました。

お相手はやわらか図書館学でした。