画像の全幅表示

[r-miura]

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

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

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;
}

[うなこ]

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

.entry-body .alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #8FC1F0;
    max-width: 100vw;
}

• この返信は5年、 6ヶ月前にうなこが編集しました。

[r-miura]

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

[投稿者]

投稿