フルワイド対応

フルワイドなサイトが増えてきている。

現在のテーマは、コンテンツワイズを決めて、幅広、全幅ブロックは、マイナスマージンで広げているが、エディタ内でのワードプレス側の処理との違いが生じてきており、フロント側では、別のスタイル処理を行う結果になっている。

現在のテーマを修正するか、新しいテーマにすべきか。

現在、ページテンプレートは、「ワイドページ(サイドバー無し)」だけだが、最低限、フルワイド(全幅)テンプレートも必要、全幅でもサイドバーを使うかどうかも要検討。

サイドバーありの時の幅広、全幅コンテンツの処置についても再検討の余地。

現在、ボディクラスに「no-sidebar」を追加しているのは、

  • awa5minimum/template/wide.php
  • awa5minimum/single.php .. ワイドウィジェットカテゴリー指定時

「no-sidebar」指定時に、スタイルで処理しているのは

  • awa5minimum/parent-main.css
    • page-sidebar
    • viewport-wide-bg
  • awa5minimum-child/child-main.css, shi*/child-main.css
    • alignwide
    • alignfull

var(–content-width)の使用は

  • awa5minimum/parent-editor.cs 定義
  • awa5minimum/sc/page-top-img.php
  • awa5minimum/parent-main.css head-menu .menu, #foot-menu > .menu
  • awa5minimum/parent-main.css: max-width:var(–content-width) !important;}
  • awa5minimum-child/child-main.css:.alignfull .wp-block-group{max-width:var(–content-width);margin:0 auto;}
  • awa5minimum-child/functions.php://max content-width の除外が必要
  • awa5minimum-child/child-editor.css:body{–content-width:1000px;color:#333;}
  • awa5minimum-child/child-editor.css:.wp-block {max-width:calc(var(–content-width) + 2rem);}
  • awa5minimum-jet/child-main.css: max-width:var(–content-width);margin-left:auto;margin-right:auto;
  • nan*/child-main.css:html{–content-width:1000px;}
  • nan*/child-main.css:html{–content-width:940px;}
  • nan*i/child-main.css:html{–content-width:940px;}
  • shi*/child-main.css:.alignfull .wp-block-group{max-width:var(–content-width);margin:0 auto;}
  • shi*/child-editor.css:html{–content-width:1000px;color:#333;font-size:16px;}
  • shi*/child-editor.css:.wp-block {max-width:calc(var(–content-width) + 2rem);}
  • sug*/child-main.css: max-width:var(–content-width);
  • sug*/child-main.css: max-width:calc(var(–content-width) / 2);
  • sug*/child-main.css:.viewport-bg .post-entries{max-width:var(–content-width);
  • sug*/category-entries.html:.viewport-bg > *{max-width:var(–content-width);margin:0 auto;padding:0 1em;}
  • sug*/child-editor.css:.pdf-wrapper{max-width:var(–content-width);margin-bottom:1em;}
  • wat*/child-main.css:.viewport-bg > *{max-width:var(–content-width);margin:0 auto;padding:0 1em;}

掲載日時: 2023年6月15日(木) 10:31