wordpress(オリジナルテーマ)の固定ページで、画像を全幅にする方法を教えてください。

実現したいこと

オリジナルテーマで、カフェのサイトを作成しています。
html、css、JavaScriptで問題なく完成したサイトをwordpress化したいです。

前提

固定ページのメインビジュアルはcssで全幅(100vw)に設定しています。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

function cafedelune_block_setup() {
add_theme_support('wp-block-styles');
add_theme_support('responsive-embeds');
add_theme_support('align-wide');
}

add_action('after_setup_theme', 'cafedelune_block_setup');

試したこと

①配置>全幅

上記の様にfunctions.phpで、「align-wide」の指定をし、固定ページを編集する際にブロックの「配置」から「全幅」を選びました。エディター画面では全幅に見えるようになりましたが、プレビューで見ると、wrapper: 1100pxが効いているかのように、左右に余白がある表示となってしまいました。

②カスタムhtmlで直接指定

今度はカスタムhtmで直接style= "width:100%"を指定してみましたが、同じ様に左右に余白ができてしまう結果となりました。

③ カスタムhtml で詳細まで指定

カスタムhtmlの指定をstyle= "width: 100vw"としました。全幅のように幅広い画像となりましたが、右側に大きくずれてしまう結果となりました。そこで、marginやpaddingをゼロに設定したり、margin: 0 auto;にしたり、max-width: 100%と指定してみましたが、やはり全幅で中央配置することができませんでした。

補足情報(FW/ツールのバージョンなど)

昨夜から「固定ページ 全幅」で調べていて、こちらのテラテイルさんだけでなく、色々な方が提案してくださっている方法を試しているのですが、全くうまく行きません。。。

お忙しい中恐縮ですが、どなたかご教示いただけますと幸甚です。

どうぞ、宜しくお願いいたします。

コメントを投稿

0 コメント