注意をユーザーに喚起する場合、ページ内のどこかに設置する必要がありますが、常時その場所に表示されていてもあまり意味がなく、ユーザーにストレスを与えてしまいます。
この注意喚起表記のUIは、通常ユーザーの目につきやすい位置に設置し、見た後はユーザーが消去できるような仕組みのものを多く見かけます。
必ず見せたい場合は「モーダル」など、注意を引きたい度合いによって使い分けされています。
今回の記事のUIは強制的に見せるのものではなく、ユーザーが任意で非表示にもできるUIで、コピペしてカスタマイズも結構簡単にできるので、使ってみてください。
注意喚起表示のサンプル
早速サンプルですが、以下のように個数は特に上限はなく表示することができ、中の文言もHTMLで簡単に変更可能です。
表示を消す場合、一個一個のブロックの右端にある「✖️」を選択することで、ほんわりと消えてくような仕様です。
一旦消したものは、ページの再読み込みで復活します。
flexboxでのサンプル
これはコピペ用コードには記載していないですが、注意喚起BOXの並びはflexboxでももちろん表示可能です。
- × これは注意内容を表示する赤色のBOXです。
- × これは注意内容を表示する赤色のBOXです。
- × これは注意内容を表示する赤色のBOXです。
- × これは注意内容を表示する赤色のBOXです。
注意喚起に限定せず、応用すれば色々とインタラクティブなものが作れます。
コピペの手順
注意喚起表示のスニペットはそれぞれ以下の手順で実装可能です。
簡単な3つのSTEPで完了です。
以下のHTMLを、表示したい場所にコピペします。
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<i class="fas fa-exclamation-circle"></i> これは注意内容を表示する赤色のBOXです。
</div>複数のアラートを表示させたい場合は、その個数分コピペすればOKです。
次にCSSをコピペします。WordPressの場合は、管理画面メニューの「外観」→「カスタマイズ」の追加CSSか、使用しているテーマのCSSファイルに記述します。
/* アラート */
.alert {
padding: 20px;
background-color: #FF0000;
color: white;
margin-bottom: 15px;
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 25px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}JavaScriptのコードを、コピペしたHTMLの記述のある body のクロージングタグの前に記述します。
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick = function(){
// Get the parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to 0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}JavaScriptのコードは、外部ファイルを使わずに記述する場合は、<script>〜〜〜〜</script> の中に記述すればOKです。
コピペ用コード一式
注意喚起表示のHTML・CSS・JavaScriptのコピペ用コード一式です。
CSSのコードは必要最低限しか書いていません。その為、複数のBOXを設置する場合、HTMLのalert のclassに、違うクラスを追加で付与するなどして利用ください。
コードを表示する
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<i class="fas fa-exclamation-circle"></i> これは注意内容を表示する赤色のBOXです。
</div>/* アラート */
.alert {
padding: 20px;
background-color: #FF0000;
color: white;
margin-bottom: 15px;
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 25px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick = function(){
// Get the parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to 0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
