2カラム・ページ設定の変更

Theme

テストサーバーで、サイトのトップメニューやトップの背景画などから、選んだテーマ「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です。

タイトルとURLをコピーしました