テストサーバーで、サイトのトップメニューやトップの背景画などから、選んだテーマ「Bard」で、カスタマイズを加え、トップページだけ1カラム、全幅ページにしてみました。先輩サイトの情報を得て、追加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カラムにした時の画面の状態です
下の動画は、1カラムのデフォルトのページ幅にした時の状態です。2カラムを1カラムにすると・・
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です。