この記事では「VK Blocks」のアラートブロックをアレンジしたものを掲載しています。各ブロックともコピーしてお使いいただけます。
こちらの記事に掲載しているものについて、制作にお役立ていただけますと幸いです。
プラグイン「VK Blocks」とは
以下の記事で説明しています。よろしければご覧いただけますと幸いです。
「アラート」ブロックとは
こちらのように、背景色付きのメッセージを出すのに適したブロックとなります。
また、右枠の4つのアイコンを押下するか、もしくは「アイコンを選択」欄から直接選択すると、アイコン付きのメッセージとなります。
公式の解説・アレンジ集
アイコン変更の例
アイコンはFont Awesome 7（Free）の中からお選びいただけます（2026/06/28現在）。
アイコンを変更するだけでも、割と幅広い用途で使えることが分かるかと思います。
Success
使用アイコン：fa-regular fa-circle-check
Info
使用アイコン：fa-solid fa-square-check
Warning
使用アイコン：fa-solid fa-hand-point-right
Danger
使用アイコン：fa-solid fa-skull-crossbones
カスタムCSS適用例（VK Blocks Pro）
注意点
以下は「VK Blocks Pro」をご利用の方限定の「カスタムCSS」機能を使ったものになります。
無料版をご利用の方は使っても意図通りには反映されません。
カスタムCSS適用例①
使用アイコン：fa-solid fa-file-pen
selector {
background-color: #eee;
color: #060606;
border: 1px #bbb solid !important;
}
selector .vk_alert_content {
border-left: 2px #999 dashed !important;
}Code language: CSS (css)カスタムCSS適用例②
使用アイコン：fa-solid fa-person-digging
selector {
background-color: #eee;
color: #060606;
border: 1px #999 solid !important;
}
selector .vk_alert_icon {
color: #0000BB;
}
selector .vk_alert_content {
border-left: 1px #999 dotted !important;
}Code language: CSS (css)カスタムCSS適用例③
使用アイコン：fa-solid fa-pen-to-square
selector {
background-color: transparent;
color: #060606;
border: 3px #bbb dotted !important;
border-radius: 6px !important;
}
selector .vk_alert_icon_icon {
color: #AA0000;
}
selector .vk_alert_icon_text {
color: #dd0000;
}
selector .vk_alert_content {
border-left: 5px #933 solid !important;
padding: 0.5em 0.8em;
}Code language: CSS (css)カスタムCSS適用例④
使用アイコン：fa-solid fa-phone-flip
selector {
background-color: #fff;
color: #060606;
border: 2px #333 solid !important;
border-radius: 6px !important;
padding: 0 !important;
}
selector .vk_alert_icon {
background-color: #555 !important;
padding: 0.5em 1em;
color: #f0f0f0;
width: 110px;
}
selector .vk_alert_content {
border-left: 0px !important;
}Code language: CSS (css)