VWSとは フォーラム Lightning 画像の全幅表示

画像の全幅表示

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

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

    r-miura
    参加者

    下記のページを参考にfunctions.phpと追加CSSに下記を追加して、
    固定ページに入れた画像ブロックを全幅に指定して、画像ブロックの高度な設定の追加 CSS クラスに
    alignfullを指定したのですが、画像の表示は全幅になりません。
    デベロッパーツールで確認すると画像が入っている divタグは `<div class=”container”>
    の中に入っているため、containerで指定されているマージンが適用されているようです。
    containerの指定にかかわらず、画像を全幅で表示する方法はあるでしょうか?

    <a href=”https://techmemo.biz/wordpress/align-wide-support/”>参考ページ</a>

    functions.phpに追加した内容

    function gutenberg_support_setup() {
     
        //Gutenberg用スタイルの読み込み
        add_theme_support( 'wp-block-styles' );
       
        //「幅広」と「全幅」に対応
        add_theme_support( 'align-wide' );
       
      }
      add_action( 'after_setup_theme', 'gutenberg_support_setup' );
    
    追加CSSに追加した内容
    

    .wp-block-image.alignfull img,.wp-block-image.alignwide img{width:100%}
    .entry .entry-content > *.alignwide,
    .entry .entry-summary > *.alignwide {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    }
    .entry .entry-content > *.alignfull,
    .entry .entry-summary > *.alignfull {
    padding-left: calc(10% + 58px + (2 * 1rem));
    padding-right: calc(10% + 58px + (2 * 1rem));
    margin-top: calc(2 * 1rem);
    margin-bottom: calc(2 * 1rem);
    left: calc( -12.5% – 75px);
    width: calc( 125% + 150px);
    max-width: calc( 125% + 150px);
    }
    .entry .entry-content .wp-block-image.alignfull img {
    max-width: calc( 125% + 150px);
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    }

    #16957

    unako
    参加者

    こんにちは!
    いろいろ実験してみました笑
    テーマによって違うので難しいですね(;”∀”)
    画像は全幅指定にしていただき
    この記事のCSSはいったん無視して、以下のCSSを追加でどうでしょうか??

    .entry-body .alignfull {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background: #8FC1F0;
        max-width: 100vw;
    }
    • この返信は4 ヶ月前に  unako さんが編集しました。
    #16963

    r-miura
    参加者

    una様
    たびたびありがとうございました。
    うまく全幅で表示できました。
    大変助かりました。

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

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