• 締切済み

AFFINGER6のヘッダーエリアの高さCSS

環境 Wordpress 6.0.2 AFFINGER6 AFFINGER6のレイアウトのブラウザ上端から94pxの高さの画像(写真)をいれたいのですが、図の青いバーを越えて、投稿(本文/記事)近に画像の下端が来ていました。 そこでヘッダーに使用されている領域に色をつけてみたところ、図のように緑色の範囲が存在していることがわかりました。 【質問】 このうち、赤い枠で囲った範囲は不要で、上端から94pxの高さにピッタリと画像をいれたいと考えました。 【やったこと】 設定項目で探して設定したものは、図の下半分にあるように |Wordpress |外観>ヘッダー>・各メニュー設定>ヘッダー画像 |「ヘッダー画像エリア」 |AFFINGER管理>ヘッダー>ヘッダーエリア |「PCのみ」 をみつけ、そこに高さの数値(94)を入力しましたが、赤い枠のエリアは消えません。 外観>テーマファイルエディターから、 CSS(style.css) を開き「/** ヘッダー画像」と書かれている項目もみてみましたが、CSSを書き換える箇所がみつけられません。 AFFINGER6を購入してまだ日が浅いのでわかっていない箇所も多いのですが、どこ/どの設定を編集したら、図の赤いエリアは消える(ヘッダー画像は上から94pxのみに設定)できるでしょうか? (スマホ表示も同様にしたいのですが、とりあえず今はPCブラウザーでの表示設定について質問させていただきます)

この投稿のマルチメディアは削除されているためご覧いただけません。

みんなの回答

  • 4017B
  • ベストアンサー率73% (1336/1814)
回答No.1

この手のCSSデザインの質問には、実際のHTMLコードとCSSファイルの記述を見れないと、第三者側からはほとんど有用なアドバイスは何も出来ないので。またさらにこういった有料版商用テーマは、WP公式で配布されているテーマと違って、とりあえずDLして試して中身を見る事も難しいので。ズバリこれだ!~的な回答は難しいですね。 …という大前提を踏まえた上で。とりあえず管理画面からの設定値を "94px" では無くて "0px" に設定してみて、それで実際の表示がどうなるのか実験してみてください。もしかしたら height では無くて padding や margin の方の設定値を書き換える様な仕様なのかもしれないので。それで手応えが得られなかったら、後はブラウザのデバッグモードで実際のHTML構造とCSS記述がどうなっているのか、当事者の質問者自身が実際に目で見て1つ1つ確認しながら、影響を与えているCSS記述箇所をあぶり出すしか方策は無いですね。 P.S. 自分でテーマを自作したりしたり、functions.php に自作関数を追記したり出来るレベルの技術と知識が無いのであれば。この手の商用テーマを使う場合、基本的には何も手を加えずにそのままDefaultの状態で使うべきであり。自分の感性や好みにテーマを改造するのでは無く、導入したテーマで表現出来る範囲内で収まる様に妥協するしかないですね。 仮に良く知りもしないのに、勝手にイジってサイトが上手く表示されなくなったり、最悪セキュリティホールが生じてハッカーに攻撃されてしまった場合。完全にサポート対象外となりますし、自己解決も出来ないままに事態はどんどん悪くなって行くだけの負のスパイラルに突入してしまいますので。 一応、web検索で出て来る範囲内でのデモサイトらしき所のソースコード等を見た感じだと、この "AFFINGER" というテーマでは該当部分のヘッダー画像は backgroud-image による「背景画像」として表示させてるみたいなので。前述した様に、もうそういうモンだと割り切って、画像にCSS記述を合わせるのでは無く、管理画面で設定可能な範囲内で表示可能な画面デザインにピッタリと合致する様に「画像の方を合わせる」感じで対処した方が簡単確実だと思います。