ヒーローエリアの表示
ヒーローエリアの表示
- このトピックには5件の返信、2人の参加者があり、最後に
により38秒前に更新されました。
-
投稿
-
■ WordPress のバージョン
WordPress 6.8.1■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 )■ テーマのバージョン
Lightning G3 Pro Unit■ スキンの種類
Origin III■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
Lightning G3 Pro Unit
VK All in One Expansion Unit
VK Block Patterns
VK Blocks Proなお、VKブロックパターンのフリースクールを使用。
■ 期待する動作
モバイルの表示のヒーローエリアの表示。パソコンと同じように、子どもたちの画像がしっかりと見えて、その前面でのセリフ領域（「子どもがピアノをあきらめない社会を」と「一人ひとりの明日に、希望を照らす光を」）が適切な大きさであること。また、セリフをゴシックからオリジナルの明朝体に戻したい。■ 自分で試した事
1.オリジナルのセリフを変更
2.セリフを左揃えに
3.オリジナルから変更して「見出し設定（H2)」にしていたが「見出し」設定をやめた。1の変更をかけたところ、モバイルの表示が変になった。
■ 症状が発生するブラウザ
safariのモバイル■ 実際の症状
モバイルの表示のヒーローエリア。セリフ部分が裏にある画像を覆ってしまっている。
＊セリフとは、（「子どもがピアノをあきらめない社会を」と「一人ひとりの明日に、希望を照らす光を」）の２種類を示す。該当URL : https://*********※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます
モバイルの表示のヒーローエリアの表示。パソコンと同じように、子どもたちの画像がしっかりと見えて、その前面でのセリフ領域（「子どもがピアノをあきらめない社会を」と「一人ひとりの明日に、希望を照らす光を」）が適切な大きさであること。
⇒ 文字の大きさを調整されてはいかがでしょうか。文字を小さくすると、それに追従するように背景の白の左余白が大きくなります。
⇒ あるいは、「セリフ」とおっしゃっているテキストが載っている「横並びブロック」の背景を少し透過させるなどしてみてはどうでしょうか。子どもたちの画像がうっすらテキストの背面に見えるようになりますよ。(添付画像)
セリフをゴシックからオリジナルの明朝体に戻したい。
オリジナルから変更して「見出し設定（H2)」にしていたが「見出し」設定をやめた。
⇒ H2 に戻すと明朝に戻ります。
もう１つ方法があるとしたら、字間を狭めることでしょうか。
モバイルの表示のヒーローエリアの表示。パソコンと同じように、子どもたちの画像がしっかりと見えて、その前面でのセリフ領域（「子どもがピアノをあきらめない社会を」と「一人ひとりの明日に、希望を照らす光を」）が適切な大きさであること。
添付画像
⇒ 下側のテキストと背景はブロックパターンそのまま。
⇒ 上側は背景色を #ffffffad にし、字間を以下のコードで少し狭めています。selector { letter-spacing: -2px; }※ すみません、補足です。Safari ではなく Chrome で作業しています。Safari では確認しておりません。
五月雨式にすみません。
添付いただいている画像を拝見して気になったことがあります。スクショのタイミングで、このブロックパターンを利用されたページを「１カラム」にされていましたか？
添付画像には両端に余白があるようなので、「２カラム」になっていたのではないかなと思ったのです。２カラムになっていると、テキストと背景画像のバランスが見本 ( https://patterns.vektor-inc.co.jp/vk-patterns/14482/ ) どおりに行かないかもしれません。
(いま拝見したところ、１カラムになっていることが確認できました。)
瀬戸内様
ありがとうございます！！フォント書体に関しては、明朝体に戻せました。コピーしてあったオリジナルの該当ブロックをみたところ、カスタムcssで明朝体に指定してあったので、本番用のそれにコピペして解決しました。
フォントサイズに関しては、H2に指定して変わったのではありませんでした。いくつか試したところ、ブログの文字が小さく感じたので、外観>カスタマイズ＞Lightningデザイン設定>から、Bodyのフォントサイズを16pxから、19pxに変えたのが原因でした。16pxに戻すと、当該ブロック領域の大きさ・文字の大きさも元に戻りました。
さて、やはりブログの文字は小さくBodyのフォントサイズは19pxにしたいです。この当該領域だけ、元のオリジナルのサイズに変更することはできますか？
このブロックのHTML記述は以下のとおりです。私の素人に毛が生えた程度では太刀打ちできません。
<h2 class=”wp-block-heading has-text-align-right is-style-vk-heading-plain vk_block-margin-0–margin-bottom vk_block-margin-0–margin-top vk_custom_css has-text-color has-link-color” style=”color:#222222;font-size:2rem”>子供たちがピアノを、<br>あきらめない社会を。</h2>
- このトピックに返信するにはログインが必要です。
