ストークカスタマイズマスターのぱる(@palulog)です。笑
別のブログでもこの有料のWordPressテーマ「STORK（ストーク）」
を使用しているので、1年以上使用しています。ストークについてのカスタマイズ記事もこれで13記事目となり、もはやマスターと呼んでもいいのではないかと思っております。
参考＞＞STORK（ストーク）カスタマイズ！コピペでできるものまとめ
そんなカスタマイズ大好きな私でしたが、今回パソコン表示を全て１カラムにして非常にシンプルな見た目に変更しました。
- サイドバーがあると本文の幅が狭く、ごちゃごちゃした感じがする
- そもそもスマホからのアクセスが大半なので、パソコンは好きなようにいじってもいいかな
このように感じたため、画面を大胆に使って記事に集中できるような１カラム表示にしました。
phpファイルを変更するため少し上級者向けですが、１カラムにしたい！という方はぜひ参考にしてみてください。
トップページ（固定ページ）を１カラムにする方法
「ぱるくらのトップページ」を固定ページにして1カラムにしました。内容はまたいつか詳しく書くとして、今回は1カラムにする方法だけご紹介いたします。
STEP1：「固定ページ属性」→「テンプレート」→「サイドバーなし（ワンカラム）」を選択
固定ページの投稿ページの左側（公開設定やタグの設定ができるところの下あたり）に「固定ページの属性」というカードがあると思います。
この中の「テンプレート」が初期設定では「デフォルトテンプレート」のままだと思うので「サイドバーなし（1カラム）」を選択してください。
これでひとまず固定ページが1カラムになりました。プレビューをして確認してみてくださいね。
STEP2：「外観」→「カスタマイズ」→「固定フロントページ」でさきほどの1カラムページをフロントページに設定する
「外観」→「カスタマイズ」で編集画面へいき、下の方にある「固定フロントページ」にいきます。
ここで①フロントページの表示を固定ページにチェックをすると、②フロントページが設定できるようになるので、さきほど作成したワンカラムのページを選択します。これで1カラムトップページの設定は完了です。
固定フロントページの設定欄が表示されない場合
フロントページを固定ページに設定するには「フロントページ用の固定ページ」と「投稿ページ用の固定ページ」の2つの固定ページが必要になります。そのため固定ページが1つしかない場合、固定フロントページの設定ができないこともあります。
なのでもう1つ固定ページを作成してください。投稿ページは記事一覧に使われるだけなので、中身は何も書かずにタイトルだけわかりやすいものに設定して公開すればOKです。
画像のように、投稿ページのところでさきほどのタイトルだけの固定ページを設定してください。
投稿ページ（記事一覧）を1カラムにする方法
ここからはphpファイルを編集していくため、万が一ページが真っ白になってもご自分で元に戻せる方のみでお願いします。
私は親テーマに直接編集しましたが、アップデートのたびに消えてしまうのが嫌な方は子テーマにコピーしてから編集してください。
home.phpを変更します。
ファイルをひらくと上から下記のようなコードが書かれていると思います。
home.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
…
この3行目に、下記の赤字を追加します。
home.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap page-full wide cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
…
これで1カラムになりました。
ただこのままだとサイドバーが元の横幅のままこの下に続いてしまっているので、横幅を揃えます。下記のコードをCSSに追加してください！
CSS
#sidebar1{
width: 100%;
}
カテゴリ一覧ページを1カラムにする方法
archive.phpを変更します。
ファイルをひらくと上から下記のようなコードが書かれていると思います。
archive.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
…
この3行目に、下記の赤字を追加します。
archive.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap page-full wide cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
…
これで1カラムになりました。
ただこのままだとサイドバーが元の横幅のままこの下に続いてしまっているので、横幅を揃えます。下記のコードをCSSに追加してください！（1つ前の作業で追加してある方は重複するため書かなくてOKです。）
CSS
#sidebar1{
width: 100%;
}
固定ページを1カラムにする方法
※トップページ（固定ページ）を１カラムにする方法でご紹介したように、投稿画面で1カラムに設定する方法もありますが、ここではphpファイルを変更して全部一気に1カラムにする方法をご紹介します。
page.phpを変更します。
ファイルをひらくと上から下記のようなコードが書かれていると思います。
page.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
<?php get_template_part( 'parts_add_top' ); ?>
…
この3行目に、下記の赤字を追加します。
page.php
<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap page-full wide cf">
<main id="main" class="m-all t-all d-5of7 cf" role="main">
<?php get_template_part( 'parts_add_top' ); ?>
…
これで1カラムになりました。
ただこのままだとサイドバーが元の横幅のままこの下に続いてしまっているので、横幅を揃えます。下記のコードをCSSに追加してください！（今までの作業で追加してある方は重複するため書かなくてOKです。）
CSS
#sidebar1{
width: 100%;
}
投稿ページを1カラムにする方法
※こちらも固定ページと同様に投稿画面に「記事レイアウト」という項目から1カラムに設定することが可能です。ただすでに記事が多い場合、ひとつずつ直していくのは大変なのでphpファイルから一気に変更する方法をご紹介します。
single.phpを変更します。
ファイルをひらくと12行目あたりに下記のようなコードが書かれていると思います。
single.php
…
<div id="inner-content" class="wrap cf">
…
ここに下記の赤字を追加します。
single.php
…
<div id="inner-content" class="wrap page-full wide cf">
…
これで1カラムになりました。
ただこのままだとサイドバーが元の横幅のままこの下に続いてしまっているので、横幅を揃えます。下記のコードをCSSに追加してください！（今までの作業で追加してある方は重複するため書かなくてOKです。）
CSS
#sidebar1{
width: 100%;
}
1カラムの横幅を変更する
ここまで1カラムに変更してみて「ちょっと横幅が広すぎるな……」って思いました？
私も書きながら思ってしまったので、横幅を変えるコードも載せておきます。
/* 1カラムの横幅 */
@media only screen and (min-width: 1166px) {
.single-post .wrap {
width: 850px;
}
}
ウインドウの幅が1166px以上のとき、本文の幅が850pxになります。
ここの数字はお好みで変更してください。
また、私はトップページの幅は広めが良かったので「.single-post 」と頭につけることで投稿ページのみの横幅を狭くしました。
トップページも含めて全体的に横幅を狭くしたい！という方は「.single-post 」を消してください。
おわりに：STORK(ストーク)を1カラムにしてコンテンツがスッキリした
1カラム自体は投稿画面でひとつひとつ設定することは可能です（記事一覧ページ以外なら）。ただ、記事数が多くなってくるとめんどくさいですよね。そんなとき、phpファイルにclassを追加するだけで一気に1カラムに変更できたのは非常に楽でした。
もし1カラムにしてみたいよーって人がいたら、ぜひ試してみてください♪
参考にさせていただいた記事＞＞STORK（ストーク）でカテゴリーページを1カラムにする方法｜【公務員辞めました】
一部コードを参考にさせていただきました。ありがとうございました。