[ 解決済 ] ヒーローエリアの表示
[ 解決済 ] ヒーローエリアの表示
- このトピックには8件の返信、2人の参加者があり、最後に
により2週、 5日前に更新されました。
-
投稿
-
■ 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>
フォントサイズに関しては、H2に指定して変わったのではありませんでした。
失礼いたしました💦
私の試した環境でタイトル：明朝を選択しておりました。この当該領域だけ、元のオリジナルのサイズに変更することはできますか？
☝️ H2 のテキストサイズを変更したいという理解で合っていますか？
であれば、CSS を書かずとも、右サイドバーの「スタイル」→「タイポグラフィ」でサイズ調整できますよ。
👇️
こちら (#110310)ご覧いただいているでしょうか？文字の大きさを調整されてはいかがでしょうか。文字を小さくすると、それに追従するように背景の白の左余白が大きくなります。
瀬戸内様
お世話になってます。ご回答ありがとうございます。
問題は解決されました。色々とお手数おかけして恐縮です。
改めて感謝申し上げます。フォーラムをご覧の皆様、
「自己解決」しました。
以下、フォーラムの趣旨に従い、「どうやって解決したのか」フィードバックいたします。
ご査収願います。前提：
・私はwebに関する知識はほぼなく、しかし、webサイトを自作する必要があったので、VKパターンブロックを活用した。
・この数日間、当該サイトのアクセス数を伸ばしたい目的で、チューニングし始めた。
・基本的に、ジェミニにガイドしてもらっていたが、VKパターンブロックにおける、Lightningの共通要素と、ブロック毎のカスタム要素の関係性が私自身よくわからず（←素人なので）、したがってジェミニに（恐らくは）誤ったブロンプトを与え迷走した末、VKパスポートを再度課金してフォーラムを利用した次第。わかったこと：
・今回の当該領域のブロックには、フォントサイズを指定するボタンはない。領域の右上に「カスタムCSS」の表記あり。
・HTML記述を見ると、Lightningの共通デザインとして規定するフォントサイズの2倍という指定になっていた。
・Lightningの共通デザインでは書体はゴシック体。これを上書きするために、当該ブロックのHTMLの中ではなく、右側のメニューにあるカスタムCSSの領域で明朝体を規定している。やったこと：
上記カスタムCSSの領域の明朝体の下に、Lightningの共通デザインとして規定するフォントサイズ＝16pxの2倍、32pxで上書きするように記述した。→成功。以上
解決してよかったですー。
ブロックパターンそのままお使いになっているものと思い、手元で再現して(該当ページのコードを読まずに) 回答していたため、参考にならなかったと思います。お力になれず残念。
最初に手札をすべて出していただくと (記入されたコードをすべてご共有いただくと) 解決が早いかもしれません。
おつかれさまでした。
- このトピックに返信するにはログインが必要です。
