アクセスから一定期間で消えるボックスを設置する手順
手順と言っても簡単で、以下の3つのコードをコピペするだけで設置できます。
ボックスの中身や装飾はお好きに変更なさってください。
HTMLコード
<div id="time_out">
ここにお好きな内容を記述してください。
</div>
上記のコードをボックスを表示させたい箇所にコピペしてください。
jQueryコード
$(document).ready(function() {
$("#timeout").fadeIn().queue(function() {
setTimeout(function(){$("#timeout").dequeue();
}, 3000);
});
$("#timeout").fadeOut();
});
上記のコードをワードプレスサイトであれば、header.phpかfooter.phpにコピペしましょう。
上記コードの中の【3000】はボックスが消えるまでの時間を定義しています。
この場合は【3秒】を意味します。
この部分はお好きな秒数を指定してください。
CSSコード
#time_out{
position:absolute;
top:30px;
left:50px;
padding:20px;
border:1px solid #ddd;
background:#eee;
}
CSSに上記をコピペしましょう。
装飾は自由に変更してください。
position~leftは変更してはいけません。
これらのコードは【時間が経つと非表示になるボックスを作る】のコードをご紹介しました。
これら3つのコードを設置すれば、指定した時間が経過すると消えるボックスが設置できます。
まとめ
アクセスから一定期間で消えるボックスを設置する方法をご紹介しました。
3つのコードをコピペするだけで設置できますので、サクッと設置していただけます。
重要な情報の提示などで使用してください。
コメントを残す