はじめに
「段落」ブロックでShift＋Enterを押すと、改行コード<br>が挿入されます。
SWELLでは、独自のショートコードを使うことで、改行位置をPCとモバイルで切り替え表示できます。
そこで、Cocoonでも同様に、ショートコードを追加してPCとモバイルで改行位置を切り替え表示できるようにします。
この記事では、この方法について説明します。
完成イメージ
このコードは通常ではここで改行します。↓
しかし480px以下ではここで改行します。↓
使用方法
以下にショートコードを示します。
「段落」ブロックの途中に入力することで、PCでは改行されます。
[my_pcbr]「段落」ブロックの途中に入力することで、モバイルでは改行されます。
[my_spbr]実装手順
以下の手順で実装します。
- ラベルPHPを追加
以下のコードをfunctions.phpに追加します。
add_shortcode('my_pcbr', function () { return '<br class="pcbr">'; }); add_shortcode('my_spbr', function () { return '<br class="spbr">'; }); - ラベルCSSを追加
以下のコードをstyle.cssに追加します。
.pcbr, .spbr { display: block; } @media (width <= 834px) { .spbr { display: block; } .pcbr { display: none; } }
参考：VK Blocksの画面サイズ毎の改行
VK Blocksには、見出しや段落ブロックなどで、画面サイズ毎に改行位置を指定できる機能があります。
編集画面から改行したい箇所に、改行タグ用のコードを挿入することで、xs～xxlの各サイズに応じて改行位置を切り替えられます。
使用方法
以下にショートコードを示します。
[my_br_表示サイズ]| 表示サイズ | 範囲 |
|---|---|
| xs | 表示幅 ≦ 576px |
| sm | 576px < 表示幅 ≦ 768px |
| md | 768px < 表示幅 ≦ 992px |
| lg | 992px < 表示幅 ≦ 1200px |
| xl | 1200px < 表示幅 ≦ 1400px |
| xxl | 1400px < 画面幅 |
実装手順
以下のコードをfunctions.phpに追加します。
add_action('init', function () {
$sizes = [
'xs' => 'width <= 576px',
'sm' => '576px < width <= 768px',
'md' => '768px < width <= 992px',
'lg' => '992px < width <= 1200px',
'xl' => '1200px < width <= 1400px',
'xxl' => '1400px < width',
];
$css = '';
foreach ($sizes as $size => $condition) {
add_shortcode("my_br_{$size}", function () use ($size) {
return "<br class=\"my-br-{$size}\">";
});
$css .= ".my-br-{$size}{display:none;}";
$css .= "@media ({$condition}){";
$css .= ".my-br-{$size}{display:block;}";
$css .= "}";
}
$handle = 'responsive-br';
wp_register_style($handle, false);
wp_enqueue_style($handle);
wp_add_inline_style($handle, $css);
});さいごに
今回紹介した方法を使えば、SWELLのように、PC とモバイルで異なる位置に改行を入れることが可能になります。
レスポンシブ対応が必要な記事レイアウトや、読みやすさを意識したデザインを実現するのに便利です。
