[ 対応中 ] リストブロックのスタイルを変更したときに行間が狭まらないようにしたい
[ 対応中 ] リストブロックのスタイルを変更したときに行間が狭まらないようにしたい
- このトピックには8件の返信、4人の参加者があり、最後に
により1時間、 1分前に更新されました。
-
投稿
-
■ WordPress のバージョン
6.8.3■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
X-T9■ テーマのバージョン
1.35.1■ 期待する動作
ブロックのリストを挿入し、スタイルをデフォルト以外のアイコンなどに変更すると、
変更した時点で行間が狭まる動作を変更していただきたいです。また、スマートフォンで縦画面で見ていたところで、90度倒して横画面にして見た場合、
リストブロック以外のブロックやテキストは画面に合わせて文字が大きくなるのですが、
スタイルを変更したリストブロックは縦・横画面でも文字の大きさが変わらないのは
見にくいところがあるので、何か方法はないでしょうか？■ 自分で試した事
行間が狭まることに対しては、その都度、タイポグラフィで行間を直しています。スマホの横画面の文字が大きくならないことに対しては、em、remやvwなどの単位を変更しましたが、
いまいちで、他の表示されているテキストとは同じ大きさにならなかったです。■ 症状が発生するブラウザ
Microsoft Edge バージョン 141.0.3537.99■ 実際の症状
上段の「期待する動作」に記したもの同一です。■ その他特記事項
追加CSSは使用していません。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
VK Blocks の仕様で、リストブロックのスタイルを設定すると以下の CSS により行の高さが設定されるようになっています。
line-height: calc( 1rem * 1.65 );この仕様を変えると既存のサイトで行の高さが変わってしまうので、仕様変更は難しいと思います。
ということで、以下の CSS を追加してみてください。
リストブロックのスタイルを設定しても、行の高さが変わらなくなります。ul.wp-block-list[class*="is-style-vk-"] li { line-height: var(--wp--custom--typography--line-height--normal); }私の端末では、スマホの縦画面と横画面のフォントの変化は確認できませんでした。
対馬 俊彦 様
ありがとうございました、CSSを追加したら、行間が狭まるような事象はなくなりました。面倒な作業が減ってとても助かりました。
ただ、対馬さんのスマホの縦画面と横画面のフォントの変化は無かったんですか、簡単なサイトで調べてみたのですが、
この２つの内、テスト１サイトはリストボックスの下にテキストを置いたもので、この場合、スマホの横画面でもリストボックスの文字は大きく表示（サイト全体の文字がきれいに揃った状態で表示）され、良かったのですが、
下のテスト２サイトの方はリストボックスの下は何もブロックを挿入しないものでつくったのですが、この場合、リストボックスの文字は大きくなりませんでした。私のスマホはiPhone SE (第3世代)でディスプレイが1,334×750ピクセルで上記のような結果となったのですが、ipadの方は縦・横画面で見てもサイト全体の文字が揃った状態できれいに表示されていたので、これは機種や画面ごとに違いがでてくるかもしれませんね、引き続き打開策を研究したいと思います。
簡単なテキストの入力だけでも、スマホの横画面ではフォントの大きさが異なるということがわかりました。
ブロックが１つだけのテキストならフォントは大きく表示されず、ブロック２つのテキストならフォントが大きく表示されるという結果でした。
ただ残念なことに、主に利用させていただいているX-T9やLightningでは、上記のようなフォントサイズのばらつきが出る結果となりましたが、エックスサーバーのXWRITEはスマホの縦画面でも横画面でもフォントサイズにばらつきなく表示できている結果については少し希望が減りました。X-T9 と Lightning の両方で起きている現象ということであれば、
現象が起きている理由とテーマは関係ない可能性があります。プラグインを無効化して試してみると、現象の理由に近づけるかもしれません。
iPhone の Safari と Chrome のどちらでも同じ現象になるかもチェックすると、先に進める手がかりになるかもしれません。
対馬 俊彦 様
気に留めといていただいて感謝申し上げます。
ご助言により、プラグインはすべて削除し、iPhone SE の Safari と Chrome と Microsoft Edge の３つの
ブラウザで表示してみたのですが、結果は変わらず、
● ブロックが１つだけのテキストならフォントは小さいままで、ブロック２つのテキストならフォントが大きく表示される
● テキストの行間をタイポグラフィで変更すると、フォントは大きく表示されず、小さいまま
というような現象でした。※ この場合、フォントが大きく表示される方が、他のブロックと同一となり、統一感のあるサイト表示になります。
★ その為、フォントが小さいままであれば、大小のフォントが混ざり合ったようなサイトとなり、見にくくなります。お世話になります。株式会社ベクトルの石川と申します。
ご返信遅くなり恐れ入ります。
■ 行間について
まず行間については、アイコンになった時には行間を開けないと詰まって見えるため広げています。
対馬様が言及いただいている通り、既存のサイトで使われていますので、あまり変更はしない方がよいと考えています。しかしながら、ブロック側で行間指定をしても VK Blocks の CSS に負けて効かない不具合がありましたので、近日修正作業・リリースさせていただきます。
■ 文字サイズについて
手元の環境で再現しないのと、モバイルだと大きくなるような処理はしていませんので、テーマ依存ではないと思われます。プラグインが原因でないとなるとどこかに個別のCSSなどが書いてあるのではないかなという気がします。
記載いただいていたURLでは確認できなかったのですが、そのURLとは別の場合、そちらのURLを貼っていただけると原因が特定しやすいです。
よろしくお願いいたします。
SUGIさま
お世話になっております、株式会社ベクトルの久納と申します■ 文字サイズについて
文字の大きさについてですが、私の iPhone 実機（13 mini）でも、テスト1 の固定ページでフォントサイズが大きくなることを確認しました。
調べたところ、おそらく iOS の WebKit（Safariエンジン）の自動文字サイズ補正 が原因のようです。
画面幅が変わったときに「読みやすさのために文字サイズを自動で拡大する」挙動があり、特定のブロック構造でのみ反応してしまうことがあるようでした。サイト全体で防ぐ場合は、次のCSSを追加することで改善するのを確認しました。
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }テーマ側でこの指定が設定されていて、Safari、Chrome（iOS）での画面回転時にフォントサイズが変化しない状態が望ましい仕様だと思います。
テーマでの対応は今後検討したいと考えております。
- このトピックに返信するにはログインが必要です。
