【Xeory Base】ではカラムのパターンが左サイドカラム・右サイドカラム・ワンカラムと３つ用意されていて、簡単に1カラムにすることができます。1カラムでブログを作りたい人にはありがたい機能かなと思います。ここでは1カラムのレイアウトにする方法を書きたいと思います。
【Xeory Base】とは
【Xeory Base】は、バズ部様が提供するコンテンツマーケティングに特化した無料のWordPressテーマとなります。国産なので安心感があると思います。また商用利用も可能で、企業のメディアでも使われていたりします。
トップも投稿も1カラムにしたい
最近1カラムのサイトも多いと思います。【Xeory Base】ではパターン選択から簡単に1カラムにすることができます。
［管理画面］→［初期設定］を開きます。
下のほうまでずっとスクロールしていくと、「レイアウト設定」というのがあると思います。
デフォルトでは一番左が選択されているかと思います。右サイドカラムです。
実際の画面はこんな感じですよね？
「レイアウト設定」の一番右、1カラムを選択します。アイコンの上をマウスで押せば、色が変わると思います。
一番下にある「変更を保存」ボタンを押します。
これでサイトを確認してみますと、1カラムになっていると思います。
投稿ページも見てみると、1カラムになっていると思います。
投稿が2カラムになっている場合
本来なら上の形で終了かと思いますが、投稿が2カラムになっている場合がありました。
管理画面から投稿ページを開き、下のほうを見ると、ここにも「レイアウト設定」があります。
デフォルトで一番左側が選択されている状態でした。右サイドカラムです。
一番右を選択して、1カラムにします。
ページの一番上まで戻り、右にある更新ボタンを押します。
これで確認すると1カラムになっていると思います。
でも試しに新規で投稿をしてみますと、また2カラムです・・・。
この状況を踏まえて考えますと、
- 「初期設定」で1カラムを選べば投稿も1カラムがデフォルトで選択される
- 「初期設定」で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 */
}
こうしてみると、結構これはこれでめんどくさいですね。
普通に投稿時に「レイアウト設定」を忘れずにすればよいという気もしますｗ
でもまあこんな方法もあるということで。
コメントをどうぞ