スマホだけ改行したい時とパソコンだけ改行したい時

無料会員向け

レスポンシブでホームページを作っているとスマホで見た時に「ここで改行はイヤだな」と思う時があると思います。「見出しなどで最後に1文字だけが改行するより、言葉の区切りでちょうどいい所で改行したい。」のようなケースです。

BiNDのブロックエディタで文章を入力している時はパソコンでの見え方を見ながら作成している状況に近いため、スマホでの見え方を確認した時に改行の位置が納得いかないということはよくあると思います。

改行位置を調整するために見出し設定を変更するのは間違えです!

スマホで見た時に改行しないように文字サイズを調整するという発想をすることもありますが、文字サイズを調整する目的で見出しの設定を変更するべきではありません。
BiNDでは、タイトル、大見出し、小見出しという設定をページ内で使うことになると思いますが、これらは大きさを設定するものでありません。見出しとしてのHタグ(エイチタグ)を設定するためのものになります。

https://youtu.be/qazoZJ_VQFI
※解説音声がありますので、再生時は音量にご注意ください。

改行をコントロールするカスタムタグ

ブロックエディタで改行をした文字はパソコンでもスマホでも改行されます。パソコンで表示する時だけ改行する。またはその逆でスマホで表示する時だけ改行する。これはバインドの標準機能(パーツなど)だけではできないため、カスタムタグでコントロールできるようにCSSを作って読み込ませるようにしています。

BiNDismで作成させていただく時、改行の調整が必要なときにはこのカスタムタグを使って作成しますが、ただ文章を打っているブロックと比較すると当然更新などはわかりにくくなります。
更新しやすい作り方を重要視しているBiNDismですが、そればかりでは見栄え的な調整が何もできなくなってしまうため、MasterNoteで説明をご覧いただけるようにしました。


この続き(動画 約9分)をご覧いただくためには無料会員登録が必要になります。また、改行をコントロールする実際のカスタムタグについては「BiNDism BlockDesignベースデータ_CSSの説明 続編(有料会員向け)」でご覧いただけます。


You need to be logged in to view the rest of the content. お願い . あなたは会員ですか ? 会員について