【STINGER8】サイトを1カラムにしたい。サイズは960pxに!

【STINGER8】はデフォルトの状態だと2カラムになっています。これを1カラムにする方法を書きたいと思います。ついでに1カラムだと横幅がもう少しせまい方がというのもあると思うので、幅を960pxにしたいと思います。

スポンサーリンク

サイドバーをいったんすべて削除する

デフォルトの状態だと、左に投稿一覧があり、右にウィジェット用のサイドバーが存在します。

【STINGER8】では

<?php get_sidebar(); ?>

の命令でsidebar.phpを呼び出しています。

サイドバーの呼び出しについては、
関数リファレンス/get sidebar – WordPress Codex 日本語版
に書いてあります。
【STINGER8】に限らず、<?php get_sidebar(); ?>の命令はほかのテンプレートでも使われていることが多いと思いますので、覚えておくのもよいかと思います。

まずは【STINGER8】にある<?php get_sidebar(); ?>を削除します。
ちなみに、1カラムになった場合、記事の下にウィジェットを置きたいということもあると思います。
その場合は、この<?php get_sidebar(); ?>を下に持ってくることになると思いますので、一度sidebar.phpの中身を確認したりするとよいと思います。

【STINGER8】ではhome.php、index.php、page.php、search.php、single.php、archive.php、404.phpに<?php get_sidebar(); ?>があります。すべて削除します。

home.phpでは18行目あたり
index.phpでは157行目あたり
page.phpでは97行目あたり
search.phpでは16行目あたり
single.phpでは157行目あたり
archive.phpでは120行目あたり
404.phpでは19行目あたり

まずはバッサリ削除します。もちろんコメントアウトでもよいですが、基本的に子テーマの使用をおすすめしますので、戻したい場合は、親テーマを見ればよいと思います。サイドバーを下に持っていきたい場合は、下にある「サイドバーをコンテンツの下に入れたい」を見てください。

子テーマの使用方法は、下記をご覧ください。

【STINGER8】のカスタマイズ、子テーマの使い方!
【STINGER8】で子テーマの使い方を書きたいと思います。 子テーマをダウンロードする 【STINGER8】では親テーマと共に子テーマもあらかじめ用意されていますので、とても簡単です。 「STINGER8」のダウ...

home.php、index.php、page.php、search.php、single.php、archive.php、404.phpを修正したら、子テーマのフォルダに入れてアップします。

右側が空っぽになりました。

CSSで左側の投稿一覧、コンテンツ部分を横幅いっぱいにします

現在、右のサイドバーの中身がなくなり、空っぽの状態です。
左側のコンテンツ部分を横幅いっぱいにすれば1カラムになりますよね。
こちらはCSSで修正します。3016行目の.st-main部分です。

/*--------------------------------
	PCのレイアウト(右サイドバー)
	---------------------------------*/

	#contentInner {
		float: left;
		width: 100%;
		margin-right: -300px;
	}

	.st-main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		padding: 30px 50px 30px;
	}

margin-right: 320px;となっているので、右に320px空けているわけです。これを0に修正します。
子テーマをお勧めしているので、子テーマに最初から存在している下記の位置に入れます。26行目あたりです。
ちなみに【STINGER8】では子テーマが最初から用意されていますので、それを使いましょう。親テーマをダウンロードするときに子テーマもダウンロードすればよい話なので、簡単だと思います。

【STINGER8】のカスタマイズ、子テーマの使い方!
【STINGER8】で子テーマの使い方を書きたいと思います。 子テーマをダウンロードする 【STINGER8】では親テーマと共に子テーマもあらかじめ用意されていますので、とても簡単です。 「STINGER8」のダウ...
/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
/*-- ここまで --*/
}

これをアップすれば、横幅いっぱいになり、OKです。

幅を960pxにしたい

現在の幅は1060pxになっています。1カラムになると、ちょっと幅が広いかなと感じる方もいると思います。
なので、例として960pxにする方法を書いておきたいと思います。

上から順番に修正していきます。

ヘッダー部分

style.cssの2643行目あたり

#headbox {
		padding: 10px;
		margin:0 auto;
		text-align:left;
		max-width:1040px;
	}

max-width:1040px;をmax-width:940px;にします。960pxにしない理由は、paddingが10pxづつあるからです。
現状の幅が1060pxなのに、命令は1040pxになっています。それと同じです。

こちらは子テーマの下記部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。

ちょっとですが、右にずれたと思います。

ヘッダーメニュー

style.cssの2544行目あたり

#st-menuwide {
		padding: 0px;
		margin:0 auto;
		max-width:1060px;
	}
nav.smanone {
		max-width:1060px;
		margin:0 auto;
	}

nav.st5 {
		max-width:1060px;
		margin:0 auto;
	}

2959行目あたり

/*--------------------------------
	メニュー未設定
	---------------------------------*/

	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:1060px;
		margin:0 auto;
		padding:5px;
		display:block;
	}

max-width:1060px;をそれぞれ両方ともmax-width:960px;にします。こちらは子テーマの下記部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
#st-menuwide {
		max-width:960px;
	}
nav.smanone {
		max-width:960px;
	}

nav.st5 {
		max-width:960px;
	}

	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:960px;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。
960pxになったと思います。

ヘッダー画像

ヘッダー画像は、管理画面→[カスタマイズ]→[ヘッダー画像]からアップロードできるようになっています。

新規画像を追加をクリックした後に、好きなように画像を切り取ることができますが、お使いのテーマはヘッダーのサイズとして 1060 × 300 ピクセルを推奨しています。

と書いてあります。こちらを修正する必要があります。
修正場所はfunctions.phpの88行目あたり

// カスタムヘッダー
$custom_header = array(
	'random-default' => false,
	'width' => 1060,
	'height' => 300,
	'flex-height' => true,
	'flex-width' => false,
	'default-text-color' => '',
	'header-text' => false,
	'uploads' => true,
	'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

の1060を960にします。子テーマのfunctions.phpに下記を追加します。

<?php
if ( !defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
// カスタムヘッダー
$custom_header = array(
	'random-default' => false,
	'width' => 960,
	'height' => 300,
	'flex-height' => true,
	'flex-width' => false,
	'default-text-color' => '',
	'header-text' => false,
	'uploads' => true,
	'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

次にstyle.cssの2850行目あたり

#st-header {
		max-width:1060px;
		margin:0 auto 10px;
	}

max-width:1060px;をmax-width:960px;にします。こちらは子テーマの下記部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
#st-menuwide {
		max-width:960px;
	}
nav.smanone {
		max-width:960px;
	}

nav.st5 {
		max-width:960px;
	}
	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:960px;
	}
#st-header {
		max-width:960px;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。
960pxになったと思います。

コンテンツ部分

style.cssの2855行目あたり、さきほどの#st-headerの下ですね。

#content {
		max-width:1060px;
		margin:0 auto;
	}

max-width:1060px;をmax-width:960px;にします。こちらは子テーマの下記部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
#st-menuwide {
		max-width:960px;
	}
nav.smanone {
		max-width:960px;
	}

nav.st5 {
		max-width:960px;
	}
	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:960px;
	}
#st-header {
		max-width:960px;
	}
#content {
		max-width:960px;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。
960pxになったと思います。

フッタ部分

やっとフッタです。あと一息です。

style.cssの2868行目あたり、

#footer-in {
		max-width:1060px;
		margin:0 auto;
	}

max-width:1060px;をmax-width:960px;にします。こちらは子テーマの下記部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
#st-menuwide {
		max-width:960px;
	}
nav.smanone {
		max-width:960px;
	}

nav.st5 {
		max-width:960px;
	}
	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:960px;
	}
#st-header {
		max-width:960px;
	}
#content {
		max-width:960px;
	}
#footer-in {
		max-width:960px;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。
960pxになったと思います。

これでたぶん全部960pxの幅になったと思います。

サイドバーをコンテンツの下に入れたい

最初にサイドバーをすべて削除して表示させないようにしました。
でも1カラムにはしたいけれど、サイドバーの情報はコンテンツの下に置きたいという場合が多いと思います。
サイドではなく、下にということですね。

最初に<?php get_sidebar(); ?>を消しましたが、使いたい場合は消さずにそのままにします。
もしくは消しちゃったよという方は、復活させる必要はありません。子テーマのphpを削除します。
home.php、index.php、page.php、search.php、single.php、archive.php、404.phpを子テーマから削除します。
そうすれば、親テーマのphpを読むので<?php get_sidebar(); ?>が入ったままです。

現状960pxにしましたので、そのままの状態で進めます。
さて<?php get_sidebar(); ?>を復活させた状態で、サイトを見ると、下記のようになっています。

コンテンツに重なっています。

style.cssの3026行目あたり、

#side .st-aside {
		float: right;
		width: 300px;
		padding: 0px;
	}

を下記のようにします。

#side .st-aside {
		float: none;
		width: 100%;
		clear:both;
	}

上記を子テーマのいままで修正した下記の一番下部分に追加します。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	.st-main {
		margin-right: 0;
	
	}
#headbox {
		max-width:940px;
	}
#st-menuwide {
		max-width:960px;
	}
nav.smanone {
		max-width:960px;
	}

nav.st5 {
		max-width:960px;
	}
	#st-menuwide div.menu,
	#st-menuwide nav.menu {
		max-width:960px;
	}
#st-header {
		max-width:960px;
	}
#content {
		max-width:960px;
	}
#footer-in {
		max-width:960px;
	}
#side .st-aside {
		float: none;
		width: 100%;
		clear:both;
	}
/*-- ここまで --*/
}

追加したstyle.cssをアップします。
これでサイドバーが下に移動したと思います。

コメントをどうぞ