VWSとは フォーラム Lightning [ 解決済 ] トップ画像の大きさの変更

[ 解決済 ] トップ画像の大きさの変更

  • このトピックには7件の返信、3人の参加者があり、最後にwptakaoにより4日、 11時間前に更新されました。
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #32782

    wptakao
    参加者

    お世話になります。
    Lightning Pro: 3.2.2
    VK Block Pro: 0.22.3
    Pale使用

    固定ページのトップ画像はデフォルトでは2000x494pxになっておりますが、この表示大きさの変更の方法を教えてください。

    #32784

    DRILL LANCER
    参加者

    ページヘッダーの画像はどの画像サイズのものを使っても縦横比を保ったまま拡大・縮小され、全幅で表示されるようになっています。

    なので、該当部分の画像サイズは特に気にする必要はありませんが、ある程度解像度が高めのものを指定すると良いでしょう。

    例えば、Lightning Skin Pale のデモサイトでは 1920 x 720 の画像が使われています。

    #32848

    wptakao
    参加者

    ご回答ありがとうございます。
    試してみましたが、トップページ以外の固有ページのページヘッダーの画像の大きさは現行のままで変更できません。

    #32850

    DRILL LANCER
    参加者

    検証し直してみたところ下記のようになっていました。
    画像の横幅は下記の CSS によって全幅で固定されています。

    .page-header {
    	background: url(略) no-repeat 50% center;
    	background-size: cover;
    }

    画像の縦幅は下記 CSS によって調整されています。

    .page-header_pageTitle,
    h1.page-header_pageTitle:first-child {
    	margin: 1.2em 0;
    	font-size: 1.75rem;
    	line-height: 1.1;
    }

    上記を参考に調整すれば OK だと思います。

    #32866

    Vektor,Inc
    キーマスター

    補足ですが、固定ページのタイトル名が出ているページヘッダー部分は、
    外観 > カスタマイズ > Lightning ページヘッダー設定 から文字の上下余白が変更可能なので、それに伴って縦横比も変動します。

    #32903

    wptakao
    参加者

    ご丁寧にご回答ありがとうございます。

    何の方法もオリジナルのデザインスキンでは変更できるのですが、Pale(Pale PlaeⅡとも)を適用すると変更ができません。
    デザインスキンの設定に問題があるのでしょうか。
    あるいはそもそもPaleを適用すると変更ができない仕様なのでしょうか。

    #32906

    DRILL LANCER
    参加者

    Pale II では下記の指定がありましたので、これを追加でいじれば画像の表示領域のサイズを変更可能と思われます。

    @media (max-width: 991px) {
    	.page-header {
    	    height: 100px;
    	}
    }
    
    @media (min-width: 992px) {
    	.page-header {
    	    height: 200px;
    	}
    }
    #32945

    wptakao
    参加者

    丁寧にご教示いただき感謝します。
    CSSに追記して変更できました。

8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。