リストブロックのスタイルを変更したときに行間が狭まらないようにしたい
リストブロックのスタイルを変更したときに行間が狭まらないようにしたい
- このトピックには4件の返信、2人の参加者があり、最後に
により32分前に更新されました。
-
投稿
-
■ 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 の両方で起きている現象ということであれば、
現象が起きている理由とテーマは関係ない可能性があります。プラグインを無効化して試してみると、現象の理由に近づけるかもしれません。
- このトピックに返信するにはログインが必要です。
