【メモ】VK Blocks の画面サイズ毎の改行指定について

公式情報

• VK Blocks・VK Blocks Pro | 株式会社ベクトル
• VK Blocks で画面サイズ毎の改行指定ができるようになりました | 株式会社ベクトル

機能の内容

プラグイン「VK Blocks」には、画面幅ごとに改行するかしないかを指定することができる機能がございます。

例えば、段落中にxsとsmのコードを挿入すれば、「xs」と「sm」対象の画面幅では改行され、それ以外の環境では改行されないという見た目となります。

使用例

以下ブロックとスクリーンショット画像を、是非とも見比べてみてください。

各コードと実際に出力されるHTMLの対応関係

実際には、br-xs br-sm等のショートコード風の記載がそれぞれ相当のHTMLに変換されているのみとなっております。そのため、例えばショートコード内やブロックパターン等に該当HTMLを記載するなどの応用が可能です。

xs： 画面幅 ～576px

<br class="vk_responsive-br vk_responsive-br-xs"/>Code language: HTML, XML (xml)

sm： 画面幅 576 ～ 768px

<br class="vk_responsive-br vk_responsive-br-sm"/>Code language: HTML, XML (xml)

md： 画面幅 768 ～ 992px

<br class="vk_responsive-br vk_responsive-br-md"/>Code language: HTML, XML (xml)

lg： 画面幅 992 ～ 1200px

<br class="vk_responsive-br vk_responsive-br-lg"/>Code language: HTML, XML (xml)

xl： 画面幅 1,200 ～ 1,400px

<br class="vk_responsive-br vk_responsive-br-xl"/>Code language: HTML, XML (xml)

xxl： 画面幅 1,400px ～

<br class="vk_responsive-br vk_responsive-br-xxl"/>Code language: HTML, XML (xml)