【Xeory Base】投稿ページのデフォルトを1カラムにしたい!

【Xeory Base】ではカラムのパターンが左サイドカラム・右サイドカラム・ワンカラムと3つ用意されていて、簡単に1カラムにすることができます。1カラムでブログを作りたい人にはありがたい機能かなと思います。ここでは1カラムのレイアウトにする方法を書きたいと思います。

スポンサーリンク

【Xeory Base】とは

【Xeory Base】は、バズ部様が提供するコンテンツマーケティングに特化した無料のWordPressテーマとなります。国産なので安心感があると思います。また商用利用も可能で、企業のメディアでも使われていたりします。

トップも投稿も1カラムにしたい

最近1カラムのサイトも多いと思います。【Xeory Base】ではパターン選択から簡単に1カラムにすることができます。

[管理画面]→[初期設定]を開きます。

下のほうまでずっとスクロールしていくと、「レイアウト設定」というのがあると思います。

デフォルトでは一番左が選択されているかと思います。右サイドカラムです。
実際の画面はこんな感じですよね?

「レイアウト設定」の一番右、1カラムを選択します。アイコンの上をマウスで押せば、色が変わると思います。

一番下にある「変更を保存」ボタンを押します。

これでサイトを確認してみますと、1カラムになっていると思います。

投稿ページも見てみると、1カラムになっていると思います。

投稿が2カラムになっている場合

本来なら上の形で終了かと思いますが、投稿が2カラムになっている場合がありました。

管理画面から投稿ページを開き、下のほうを見ると、ここにも「レイアウト設定」があります。
デフォルトで一番左側が選択されている状態でした。右サイドカラムです。

一番右を選択して、1カラムにします。

ページの一番上まで戻り、右にある更新ボタンを押します。

これで確認すると1カラムになっていると思います。

でも試しに新規で投稿をしてみますと、また2カラムです・・・。

この状況を踏まえて考えますと、

  1. 「初期設定」で1カラムを選べば投稿も1カラムがデフォルトで選択される
  2. 「初期設定」で1カラムを選んでも、投稿は毎回1カラムを選ばなければデフォルトの右サイドカラムになる

正解はバズ部様に聞かないとわかりませんが、自分の場合は、投稿するたびに1カラムを選び忘れると、2カラムになってしまいました。
たいがい選び忘れたりしますから、う~んです。

でも投稿によって1カラムにしたり2カラムにしたりできますから、よいこともあると思います。
ただ2カラムにすることは絶対ないという場合は、何もしなくてもいつも1カラムにしておいてほしいと思いますよね。
なので、これからその対処方法を書きたいと思います。

functions.phpでできそうな気もしますが、単純に2カラムのCSSを1カラムと一緒にすれば1カラムになりますので、その作戦を紹介します。

2カラムのCSSを1カラムにする

そもそも、1カラム、2カラムはどのようにして変更されているか見てみますと、bodyに書かれています。

右サイドカラムの場合は下記をみるとleft-contentが入っています。

<body id="#top" class="post-template-default single single-post postid-29 single-format-standard logged-in admin-bar no-customize-support left-content default" itemschope="itemscope" itemtype="http://schema.org/WebPage">

1カラムの場合は下記をみるとleft-contentがone-columnに切り替わっています。

<body id="#top" class="post-template-default single single-post postid-1 single-format-standard logged-in admin-bar no-customize-support one-column default" itemschope="itemscope" itemtype="http://schema.org/WebPage">

1カラム:one-column
右サイドカラム:left-content

ということでstyle.cssを見ていきます。さっそく最初のほうの42行目あたりから登場します。
レスポンシブの記述もありますので、それを見ながらとりあえず下記のように修正しアップしてみます。
できたら子テーマにして、このCSSだけを子テーマのstyle.cssに書くようにした方がよいと思います。

.left-content #main {
  width: 100%;
  float: none;
}
.left-content .main-inner {
  margin-right: 0;
  margin-left: 0;
}

.left-content #side {
  width: 290px;
  float: left;
  margin-left: -290px;
  display:none;
}


.left-content #content .wrap {
  width: 1000px;
}

@media screen and (max-width: 1200px) {
  /* laptop */
  .wrap,
  .left-content #content .wrap {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
  }


  /* laptop end */
}

@media screen and (max-width: 991px) {
  /* tablet */
  .wrap,
  .left-content #content .wrap {
    margin-left: 20px;
    margin-right: 20px;
  }



  /* tablet end */
}

@media screen and (max-width: 767px) {
  /* phone */
  .wrap,
  .left-content #content .wrap {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* phone end */
}

style.cssをアップして確認してみます。1カラムになっていると思います。

ちなみに右カラムにあったウィジェットは、display:none;で非表示という形にしています。

.left-content #side {
  width: 290px;
  float: left;
  margin-left: -290px;
  display:none;
}

なので、実際にはソースに存在します。1カラムの時も同様に非表示になっているだけで存在しています。
ウィジェットを使わないからソースにも表示させたくない場合は、
index.phpの90行目

<?php get_sidebar(); ?>

を削除

archive.phpの85行目

<?php get_sidebar(); ?>

を削除

page.phpの60行目

<?php get_sidebar(); ?>

を削除

404.phpの29行目

<?php get_sidebar(); ?>

を削除

single-cta.phpの96行目

<?php get_sidebar(); ?>

を削除

single.phpの127行目

<?php get_sidebar(); ?>

を削除

これでサイドバーのソース自体が無くなると思います。

404ページを修正する

これですべて1カラムかと思いきや、404を表示させたら2カラムです。

さらにさきほどの

<?php get_sidebar(); ?>

を削除していたら、右が空っぽです・・・。

404ページを見るとbodyに
右サイドカラム:left-content
はないようです。
bodyにerror404というクラスがあるので、これを使ってみます。
下記をstyle.cssに追加してアップします。

.main-inner {
  margin-right: 0;
}


.error404 #content .wrap {
  width: 1000px;
}
.error404 #content .wrap #main {
  width: 100%;
  float: none;
}
.error404 #content .wrap #main .main-inner {
  width: 100%;
  margin: 0;
}
.error404 #content .wrap #side {
  display: none;
}


@media screen and (max-width: 1200px) {
  /* laptop */
  .wrap,
  .error404 #content .wrap {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
  }

  .main-inner {
    margin-right: 0;
  }

  /* laptop end */
}
@media screen and (max-width: 991px) {
  /* tablet */
  .wrap,
  .error404 #content .wrap {
    margin-left: 20px;
    margin-right: 20px;
  }

 

  /* tablet end */
}
@media screen and (max-width: 767px) {
  /* phone */
  .wrap,
  .error404 #content .wrap {
    margin-left: 10px;
    margin-right: 10px;
  }

  /* phone end */
}

サイトを確認してみると、大丈夫なようです。

最初に修正したCSSと合わせます。

.main-inner {
  margin-right: 0;
}

.left-content #main {
  width: 100%;
  float: none;
}
.left-content .main-inner {
  margin-right: 0;
  margin-left: 0;
}

.left-content #side {
  width: 290px;
  float: left;
  margin-left: -290px;
  display:none;
}

.left-content #content .wrap {
  width: 1000px;
}

.error404 #content .wrap {
  width: 1000px;
}
.error404 #content .wrap #main {
  width: 100%;
  float: none;
}
.error404 #content .wrap #main .main-inner {
  width: 100%;
  margin: 0;
}
.error404 #content .wrap #side {
  display: none;
}

@media screen and (max-width: 1200px) {
  /* laptop */
  .wrap,
  .left-content #content .wrap {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
  }
  .wrap,
  .error404 #content .wrap {
    margin-left: 30px;
    margin-right: 30px;
    width: auto;
  }

  .main-inner {
    margin-right: 0;
  }

  /* laptop end */
}

@media screen and (max-width: 991px) {
  /* tablet */
  .wrap,
  .left-content #content .wrap {
    margin-left: 20px;
    margin-right: 20px;
  }
 .wrap,
  .error404 #content .wrap {
    margin-left: 20px;
    margin-right: 20px;
  }

  /* tablet end */
}

@media screen and (max-width: 767px) {
  /* phone */
  .wrap,
  .left-content #content .wrap {
    margin-left: 10px;
    margin-right: 10px;
  }
 .wrap,
  .error404 #content .wrap {
    margin-left: 10px;
    margin-right: 10px;
  }
  /* phone end */
}

こうしてみると、結構これはこれでめんどくさいですね。
普通に投稿時に「レイアウト設定」を忘れずにすればよいという気もしますw
でもまあこんな方法もあるということで。

コメントをどうぞ