フォーラムへの返信
-
es様
かえって気を使わせてしまったようですみません。
そしてありがとうございます！キタジマ様
お忙しい中、ご対応いただきありがとうございます。
いつも丁寧な対応、感謝します。それぞれのコードで、思っていた形状にすることができました。
コードを掲載いただいたおかげで、
どの部分のコードが不足していたのか、
勘違いをしていたのか理解が深まりました。また矢印の装飾に関わる部分までご教授いただきありがとうございます。
いつもこちらを頼りっきりになってしまっているので、
思うデザインが再現できるよう、もっと努力したいです。重ねてありがとうございます。
いいねをした人:esさん、こんにちは。
アドバイスありがとうございます。スライダーの入ったボックスをコンテナーやセクションに組み込み、それらのブロック設定でコンテンツの最大幅を指定することで任意の幅にしているのですが、
なるほど！ありがとうございます。
サムネなしで画像を小さめに表示させたい場合には、コンテナーを使ったこの方法でいけますね！
もう少しいじってみて厳しそうなら、こちらの方法でやってみようと思います。
ありがとうございます！※同様の悩みをお持ちの方もいるかもしれないので、もう少しトピック開けておきます。
いいねをした人:オレインさん、お忙しい期間中にも関わらずありがとうございます。
ご提示いただいたコードで、無事やりたいデザインが実現しました！＞恐らく特別なケースやニーズがあるのだと思うのですが、一般的に考えると「アイキャッチ画像に設定している画像を削除すれば良い」となるかなと思いまして、もしかしたら運用部分でカバーできるものなのかお聞かせいただければと思います。
昔ながらの「細めのヘッダー画像上にページタイトルが重なったデザイン」をクライアント様が希望されたことがベースにあります。
単純に考えると
・CSSで画像の高さを調節
・カスタマイザーで「ヘッダーの上にタイトル」
・デフォルトヘッダーに任意の画像を設定すれば、上記のデザインは可能です。
ただしそうすると、
・記事一覧でリッチメディアの画像が空白
・ogp画像がない状態になってしまいます。
上記を満たしたくてアイキャッチを設定すると、当然デフォルトページヘッダー画像で設定した画像はアイキャッチ画像に置き換わってしまい、頭を悩ませていた次第です。
うまく伝わりますでしょうか。
過去にトピックを立てられたかたも、おそらく同様のニーズに基づいて質問されたのだと思います。
カスタマイザーに「デフォルトページヘッダー画像」と「デフォルトアイキャッチ画像」の両方の設定が用意されているのは、逆になぜだろう？とかなり悩んでいました💦
添付画像はやりたかったデザインのイメージです。
テストサイトですが、おかげさまで実現しました。ご参考まで。
いいねをした人: 居ませんGONSYさま
フォーラムでは数々の回答、参考にさせていただいております。
また丁寧でわかりやすい回答、ありがとうございます。
ご提示いただきましたCSSで無事、思うような形になりました。
本当に助かりました！！ありがとうございます。
いいねをした人:オレインさん、ありがとうございます。
[aria-hidden="false"]を追加すれば、条件を分岐させることができるのですね。
ただすみません。
教わった方法では、意図するタイミングで文字色を変更することができませんでした。検証ツールを開いて上部固定のメニューが出てくる瞬間の .l-header__drop-nav というCSSクラスがついている要素を確認してみてください。＞aria-hidden が true と false で切り替わっていることが確認できるはずです。
こちら確認してみたのですが、「オーバーレイ（上部固定/スクロール時背景白）」の設定だと、教えていただいた箇所のクラスはfalseには切り替わらないようです。
ヘッダーの設定が「オーバーレイ」または「ノーマル」に設定した場合は、反映されることは確認できました。
できれば「オーバーレイ（上部固定/スクロール時背景白）」の見た目（左にロゴ、右にメニュー、スクロール時背景白）で設定できると嬉しいのですが…
ちなみに下記がスクロール前で
こちらがスクロール後です。
いっそ、元のCSSファイルで上記の
.l-header { background-color: var(--_background- color,transparent); color: var(--header-text-color,#333); overflow: hidden; z-index: 1000; }の
color: var(--header-text-color,#333);の部分を書き換えてしまおうかとも思ったのですが、
それでは根本的な解決にはならないですよね…。お手数ですが、もう少しお付き合いいただけると嬉しいです。
いいねをした人: 居ませんキタジマ様
早々のお返事、ありがとうございます。
＞１枚目のスクショ、消したいスペースの部分にある鉛筆マークをクリックするとウィジェットが選択できると思います。選択できたらそのウィジェットを消せばスペースも消えると思うのですがどうでしょうか？
ありがとうございます！無事、消せました！
なんとお恥ずかしいことに、私一生懸命二枚目の画像の四角い枠の部分を消そうとしてました。（当然ここは消えず…）
「ブロックを選択するには」の箇所を選択して削除をしたら、あっさりと消えました。
ありがとうございました！
いいねをした人:
