実装例
・デフォルトの「PCだけ改行」：
960px以上で改行。
・デフォルトの「スマホだけ改行」：
959px以下で改行。（正確には、タブレットとスマホだけ改行。）
・このアドオン「本当のスマホだけ改行」：
599px以下で改行。（タブレットでは改行しません。）
| ショートコード | PCで改行するか | タブレットで改行するか | スマホで改行するか |
|---|---|---|---|
| PCだけ改行：[pcbr] | する | しない | しない |
| スマホだけ改行：[spbr] | しない | する | する |
| 本当のスマホだけ改行：[mbbr] | しない | しない | する |
タブレット幅では改行しない、「本当のスマホだけ改行」を使用可能にします。
タブレットでのレスポンシブ対応、なんだか余白が多くてスカスカになる気がする…
「スマホだけ改行」はあるけど、タブレットでも改行してしまう！なんで！？
なんて思うこと、ありませんか？（私はありました。）
「スマホだけ改行」は、正確には「タブレットとスマホだけ改行」である問題
ツールバーから選べる「PCだけ改行」「スマホだけ改行」。非常に直感的で使えてうれしいのですが、
これ、実は960pxを境に改行する・しないを切り分けているだけなんです。
つまり、「スマホだけ改行」は、正確には「タブレットとスマホだけ改行」なんです。
たまに、「タブレットでは改行してほしくない」「本当にスマートフォンのときだけ改行してほしい」という要望を叶えるのが、このアドオンです。
実装方法
コードスニペットを導入する
こちらのボタンをクリックしてスニペットをダウンロードします。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
コードスニペットをオンにします。
アドオン機能導入方法
管理画面「プラグイン」から、「プラグインを追加」を選択。
「プラグインの検索」欄に、Code Snippetsと入力。
このプラグインを「今すぐインストール」・「有効化」します。
該当ページから、コードスニペットをダウンロードします。
コピペではなく、ダウンロード形式で使用するものは上画像のような黄色いボタンで統一しています。
インポート/エクスポートが容易な、コード管理プラットフォームです。
「ひとつの機能としてパッケージングされたコード群」を、利用者はコードを触ることなくスイッチ（トグル）のオンオフで導入できる神ツールです。
管理画面「スニペット」「インポート」から、先ほどダウンロードしたコードスニペットをインストールします。
重複インストールを防ぐために下段にチェックを入れ、
Choose Filesエリアに先ほどダウンロードしたファイルをドラッグ&ドロップします。
インストールするファイルにチェックを入れ、「Import Selected」を押します。
管理画面「スニペット」「すべてのスニペット」から、先ほどインポートしたスニペットの左端にあるスイッチ（トグル）をオンにします。
目当ての機能が有効化されているか確認します。
驚くほど簡単な使い方
使い方は至ってシンプル。
テキスト中の “スマホでのみ改行したい箇所” に、[mbbr]と記載するだけです。
かゆいところに手が届く「本当のスマホだけ改行」、スマホ以外では改行してほしくない場合にご活用ください！
ちなみに…
テキストのレスポンシブについてですが、シームレスに全ての幅で綺麗に対応するのは非常に難しいですね。
とんでもない数のメディアクエリ（画面幅ごとの指定）の記載や単語区切りの手動指定をする必要が生じます。
そこで、こんなCSSプロパティがあります。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
- 設定が反映されません。
-
コードスニペットのトグルがオンになっているか確認してください。
- ツールバーに、「本当のスマホだけ改行」ボタンが見つかりません。
-
ツールバーにボタンは追加されません。
自分で必要箇所に[mbbr]と記載してください。
