テストサーバーで、サイトのトップメニューやトップの背景画などから、選んだテーマ「Bard」で、カスタマイズを加え、トップページだけ１カラム、全幅ページにしてみました。先輩サイトの情報を得て、追加CSSを使ってカスタマイズして見ました。
目次
2カラムを1カラムに変更
追加CSSに追記した内容です
.page-id-128 .sidebar-right, .page-id-128 #header, .page-id-128 #gMenu { display: none; } .page-id-128 .page-content .main-container { margin: 0 auto; float: none; width: auto; text-align: center; }
2カラムの時のトップページの動作
下の動画は、Bardの初期状態の固定ページです。2カラムで、ページ幅も選択出来ません！
１カラムにした時の画面の状態です
下の動画は、１カラムのデフォルトのページ幅にした時の状態です。２カラムを1カラムにすると・・
１カラムにした後、全幅ページにするためCSSを追記
下記の内容を追加CSSに追記し、全幅のページに変更します。
.page-id-128 .page-content .main-container {
float: none;
width: 100vw!important;
text-align: center;
margin-left:calc(50% – 50vw)!important;
margin-right:calc(50% – 50vw)!important;
}
1カラム・全幅にした時の動画を示します
以上、特定のページのみ、テーマには無い、1カラムページとし、そのページを全幅ページにする方法について記録しました。このサイトはテストサイトでの動作確認テストですので、サイト自体はまだ公開していません。なお、テーマはBardです。