会員サイトをリニューアルしました! 新サイトはこちら

ブロックの改行(2段以上) < SWELLに関する質問

フォーラムをリニューアルしました!
今後は、新フォーラムをご利用ください。

ブロックの改行(2段以上)
 
通知
すべてクリア

ブロックの改行(2段以上)

9 投稿
5 ユーザー
8 Likes
1,615 表示
Hiro
 Hiro
(@hirokino)
Eminent Member
Topic starter
 

ブロックの改行について質問があります。

画像のとおりですが、このように改行をした際に、詰まって表示されてしまいます。

JINをクラシックエディターで使っていた際には発生しなかった不具合です。

一応「スペーサー」というブロックで調整できるようですが、スペーサの幅が大きすぎることや、文章の余白を作るにあたって、おそらく最も使う機能なので、毎回ブロックを呼び出して執筆を行うのは現実的ではありません。

ブロックの改行(2段以上)はどのようにしたら良いでしょうか?

お手数をおかけしますが、ご回答お願い致します。

 
投稿済 : 01/05/2021 10:04 am
かんた
(@swell-mania)
Reputable Member
 

不具合ではなく、グーテンベルグの標準仕様です。

デフォルトテーマ有効時でも同じ挙動になりませんか?

JINだと段落ブロックがカラの場合「<p></p>」を出力しますよね?カラのPタグは改行スペースタグではないので、本来こういったマークアップはのぞましくありません。

SWELL固有の機能として「ブロック下の余白量」というオプションがあり0~6emで余白を調整できます。

SWELLマニアというサイトを運営しています!

 
投稿済 : 01/05/2021 11:37 am
Hiro and しらこ reacted
しらこ
(@96ssbike)
Prominent Member
 

かんたさん、ありがとうございます。同様のことを私も準備していました。

「ブロック下の余白量」をよく使っています。そして、投稿者さんが仰っている「スペーサー」も特に困ったことはありません。スマホ表示で、たとえば画面幅よりも飛び出してしまうなどの不具合もないですし。

また、もしもですが質問者さんが不具合だとするならば、すでに多くの人が不具合と報告を上げていることでしょう。これは「仕様」です。
今までにこうした意見がないのも、ひとつ気づいていただけると参考材料になるかもしれませんね。

もしどうしてもこのような表現方法を使いたい場合は、SWELLでもClassic Editorプラグインをインストールして有効化して記事を書くようにしてみてください。望ましくない方法ですが、そのようにしていただければ質問者さんのやりたいことは「SWELLでも可能」です。ただし、SWELLならではの機能は制限された状態になります。Classic Editor使用時に、何かの機能が使えないとなっても保証は致しかねます。

This post was modified 3年前 2回 by しらこ

にゃーん .

 
投稿済 : 01/05/2021 1:00 pm
Hiro and かんた reacted
Hiro
 Hiro
(@hirokino)
Eminent Member
Topic starter
 

@swell-mania カンタさんありがとうございます。

カンタさんのサイトもとっても見やすいですが、余白をつどつど、「スペーサー」や「ブロックしたの余白量」で調整されているんですね。

僕もそれでやってみようと思います。ありがとうございました。

 
投稿済 : 02/05/2021 6:04 am
Hiro
 Hiro
(@hirokino)
Eminent Member
Topic starter
 

@96ssbikeしらこさん

ブロックエディターに慣れたくてjinからswellに変えたので、ブロックエディターで出来る限りのことをやってみようと思います。

「ブロック下の余白量」を主に使って、余白調整していきます。ありがとうございました。

 
投稿済 : 02/05/2021 6:07 am
みさき@セブ島
(@misaki_cebu)
Estimable Member
 

@hirokino

「SWELL設定」→「機能停止」→「「空のpタグを自動削除する機能」を停止」にチェックを入れれば空の<p>が生成されるので、望んでいる改行が出来るかもしれません。試してみてくださいm(_ _)m

This post was modified 3年前 by みさき@セブ島
 
投稿済 : 02/05/2021 12:48 pm
かんた reacted
しらこ
(@96ssbike)
Prominent Member
 

@misaki_cebu ありがとうございます…!それは盲点でした。

念のため試してみましたが、実際の表示自体は有効or無効ともに何も変わらず(HTMLには含まれます)

いずれも、

空白行に何も入力しないor半角スペースを入れる→詰まる
全角スペース入れる→広がる

という動作になりました。

This post was modified 3年前 by しらこ

にゃーん .

 
投稿済 : 02/05/2021 12:56 pm
みさき@セブ島
(@misaki_cebu)
Estimable Member
 

@96ssbike

しらこさん、検証ありがとうございます!

なるほど…どちらでも変わりはないのであれば、やはりスペーサーかブロック下の余白量での調整ですね…m(_ _)m

 
投稿済 : 02/05/2021 2:11 pm
了(開発者)
(@ryo)
Illustrious Member Admin
 

皆さん、対応ありがとうございます!

前提として、段落ブロックでスペースを調節するのはHTML的に正しくない使い方なので推奨しません。
ということをまず述べた上で、一応もろもろの解説していきますね。

.

SWELLの「空のpタグを自動削除する機能」というのは、空タグ自体の出力を削除するものになります。(ブロックエディターでは予期せぬところに空のpタグが入ってしまいがちなので、それの対策用です。)

それをオフにしても空のpタグを使用した時にスペースが広がらないのは、「空要素が連続してもmarginは積み重ならない」というCSS的な仕様による挙動ですね。

これは、デフォルトテーマも同様でした。(JINでは余白をpaddingでとるという少し特殊な設計をしているため、空白が広がっていくと思います。)

.

ただし、WordPress5.7からは「p:empty にbefore擬似要素がぶちこまれるCSSが標準で適用される」という超謎の今更仕様変更がありまして、おそらく今のデフォルトテーマの最新版だと、空の段落を続ければスペースが広がっていくんじゃないかなと思います。

しかしこれまでスペースがなかったところに急にスペースができるのは変なので、SWELLではそのCSSを打ち消し、これまで通りの共同になるようにしています。

This post was modified 3年前 3回 by 了(開発者)
 
投稿済 : 02/05/2021 4:02 pm
共有: