VWSとは フォーラム Lightning 固定ページ一部の、ヘッダーの高さを変更したい

固定ページ一部の、ヘッダーの高さを変更したい

このトピックには4件の返信が含まれ、2人の参加者がいます。3 ヶ月、 2 週間前 kurudrive さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #17694

    yunahana
    参加者

    いつも大変お世話になっております。

    Lightning proのテーマはCharmを使っています。
    固定ページ一部のヘッダー画像を変更して使っていますが、その一部のヘッダーの高さを変更したいのです。
    全体的な高さの変更は、外観⇒カスタマイズ⇒ページヘッダー設定⇒テキスト余白 で変更できるのですが、一部のヘッダーのみの高さを変更する方法が、ブラウザの「検証」で見てみましたが、分かりませんでした‥

    方法がありましたら、ご教授お願いいたします。

    #17695

    yunahana
    参加者

    お世話になっております。

    何だか分からないなりに下記ソースをカスタムCSSに記述してみました。

    
    @media (min-width: 1200px){
    .page-header {
        height: 150px;
    }
    }
    
    @media (min-width: 480px){
    .page-header {
        height: 250px;
    }
    }
    
    .page-header_pageTitle, h1.page-header_pageTitle:first-child {
        margin: 90px 0 55px;
    

    パソコン、スマホで思い通りの高さになりましたが、タイトルがセンターから上の方にずれてしまったので、下記ソースを追加しました。

    .page-header_pageTitle, h1.page-header_pageTitle:first-child {
        margin: 90px 0 55px;
    

    タイトルはパソコンではセンター近くなり良かったのですが、スマホでは下に下がりすぎてしまいました。
    下記ソースを色々変更して試していると、高さ自体の変更も元に戻ってしまったりと上手くいきませんでした‥

    .page-header_pageTitle, h1.page-header_pageTitle:first-child {
        margin: 90px 0 55px;
    

    ソースの記述が素人考えで間違えていると思います‥
    ご教授いただけますと助かります。
    よろしくお願いいたします。

    • この返信は3 ヶ月、 3 週間前に  yunahana さんが編集しました。
    • この返信は3 ヶ月、 3 週間前に  yunahana さんが編集しました。
    #17781

    kurudrive
    キーマスター

    一部のヘッダーのみの高さ

    これはどういう意味ですか?
    特定のページだけという事でしょうか?

    #17783

    yunahana
    参加者

    お返事ありがとうございます!

    はい!
    特定のページをと言う意味です。
    3ページのみ、ヘッダーの高さを大きくしたいと思っています。

    よろしくお願いいたします。

    • この返信は3 ヶ月、 2 週間前に  yunahana さんが編集しました。
    #17798

    kurudrive
    キーマスター

    イマイチやりたい事が把握できていないので見当違いな回答かもしれませんがこういう事でしょうか?

    .page-header_pageTitle,
    h1.page-header_pageTitle:first-child {
        margin: 50px 0 30px;
    }
    @media (min-width: 480px){
    	.page-header_pageTitle,
    	h1.page-header_pageTitle:first-child {
    	    margin: 70px 0 40px;
    	}
    }
    @media (min-width: 1200px){
    	.page-header_pageTitle,
    	h1.page-header_pageTitle:first-child {
    	    margin: 90px 0 55px;
    	}
    }

    ページの指定は各記事の編集画面にあるCSSカスタマイズ入力欄(ExUnitの機能)か、bodyタグのclassにある投稿idをもとに指定すればいけます。

    とりあえず書いてあったコードで気になったのは

    1. 同じ指定の重さなら後に書いた方が優先される

    min-width: 1200px より後に min-width: 480px が書いてあると、例えば1300pxでも min-width: 480px の条件に合致するので min-width: 480px に書いた指定が効いてしまう

    2. 最後 } がない気がします

    の2点です。

5件の投稿を表示中 - 1 - 5件目 (全5件中)

このトピックに返信するにはログインが必要です。