Cocoonで1カラムに変更する方法と幅サイズを調整する手順【初心者向け】

ブログを1カラムにしてスッキリ見せたいのに、やり方や横幅の調整でつまずいていませんか。

私も最初にcocoonで1カラムレイアウトにしたとき、「急に横に広がりすぎた」「どこで幅をいじればいいの？」と同じように悩みました。

この記事では、cocoonで1カラムレイアウトに切り替える方法と、そのあとに幅を整えるやり方を、テーマ設定とCSSの両面からできるだけ分かりやすくまとめます。

先に結論を一言でまとめると、「cocoonの設定でできること」と「CSSでしかできないこと」を分けて考えれば、1カラムの変更も幅調整も、思ったより簡単にコントロールできます。

cocoonで1カラムに変更する前に知っておきたいこと

2カラムと1カラムの違いをざっくり整理

まずは「2カラム」と「1カラム」の違いを、よくある使い方ベースで比べてみます。

レイアウト	主な特徴	向いているサイト	デメリット
2カラム（メイン＋サイドバー）	情報を並べやすく、カテゴリーや人気記事などを常に表示できる	通常のブログ、情報量が多いサイト	スマホではサイドバーが下に回るため、あまり見られないこともある
1カラム（サイドバーなし）	文章や画像に集中させやすく、見た目がスッキリする	LP、プロフィール、サービス紹介、読み物中心の記事	サイドバーに置いていた情報を別の場所に工夫して配置しないと、回遊が減ることがある

私のまわりでも、「ブログ記事は2カラムのまま」「商品説明ページやプロフィールページだけ1カラム」という使い分けをしている人が多い印象です。

cocoonでよく出てくるカラム関連の用語

cocoonで1カラムにしたり幅を変えたりするとき、管理画面にいろいろな用語が出てきます。

よく見るものだけ先に押さえておきましょう。

• メインカラム
  記事本文が入る、ページのメインとなる領域です。
• サイドバー
  プロフィールや人気記事、広告などを入れる細めの列です。
• コンテンツ幅（コンテンツエリアの幅）
  メインカラム自体の横幅です。
• カラム間余白
  メインカラムとサイドバーの間のすき間で、2カラム時のレイアウトに関係します。

cocoonで1カラムの幅をどうするか考えるときは、「コンテンツ幅」「余白あたりをどう調整するか」という視点を持っておくと分かりやすいです。

cocoonで1カラムに変更する3つの方法

サイト全体を1カラム（サイドバーなし）にする

「ブログ全体を1カラムにしたい」「サイドバー自体をやめたい」という場合は、cocoonの設定から一括で切り替えできます。

細かい文言は環境によって多少違いますが、流れはだいたい次のようなイメージです。

• WordPress管理画面から「Cocoon設定」を開く
• 「全体」や「レイアウト」「カラム」といったタブを開く
• サイドバーの表示に関する項目で「サイドバーを表示しない」「全て1カラム」などに変更する
• 必要であれば、サイドバーに置いていたウィジェットの内容を本文下やフッターなどに移動する

この方法は、cocoonの機能だけで1カラムに切り替えられるので、CSSが苦手な人でも安心です。

その代わり、「一部のページだけ2カラムに戻したい」といった細かい調整はやりづらくなるので、全体のレイアウト方針を決めたうえで使うのがおすすめです。

投稿・固定ページだけ1カラムにする

「LPっぽい記事だけ1カラムにしたい」「固定ページのプロフィールだけ1カラムにしたい」という場合は、記事ごとにレイアウトを指定する方法が便利です。

こちらもテーマの機能を使うだけなので、基本的にはCSSは不要です。

流れは次のようなイメージです。

この方法なら、「普段のブログ記事は2カラムのまま」「特定のページだけ1カラムにする」といった柔軟な運用ができます。

トップページだけ1カラムにしてLP風に見せる

「ブログ一覧ではなく、LPのような1カラムのトップページにしたい」という人も多いと思います。

この場合は、トップページ用の固定ページを1つ用意して、それを1カラムにしたうえでサイトのフロントページに設定する方法がよく使われます。

ざっくりとした手順は次のとおりです。

• 固定ページで「トップページ用」のページを1つ作成する
• その固定ページのレイアウトを1カラムや本文のみといったタイプに設定する
• WordPressの「表示設定」で、フロントページとしてその固定ページを指定する
• トップページ用の固定ページで、ブロックエディタを使いヘッダー画像、サービス説明、料金、問い合わせボタンなどを配置する

こうすると、ブログ記事は2カラムのまま残しつつ、トップページだけcocoonの1カラムレイアウトで見せることができます。

サービス紹介サイトや個人事業主のホームページなどで、よく採用されているパターンです。

cocoon 1カラムの幅が広すぎる／狭すぎると感じる理由

読みやすさと1行の長さの関係

人は、横に長すぎる文章を読むと、行の先頭に目を戻したときに迷子になりやすくなります。

逆に極端に狭い幅だと、改行だらけになり、テンポが悪く感じられることが多いです。

ざっくりした目安として、次のように考えておくとよいと思います。

cocoonで1カラムの幅を決めるときも、「見た目がオシャレかどうか」だけでなく、「自分が読者として読みやすいかどうか」を基準にすると失敗しづらいです。

よくある悩みパターンと原因

cocoonの1カラムレイアウトにしたあとによく聞く悩みと、その裏側にある原因を表にまとめました。

悩みのパターン	よくある原因	対処の方向性
1カラムにしたら横幅が広すぎて目が疲れる	コンテンツ幅が広めのまま、PC表示のことをあまり意識していない	コンテンツ幅を少し狭くする、PCだけにmax-widthを指定する
1カラムにしたのに、逆になんだか狭く見える	サイドバーを消しただけで、コンテンツ幅の設定は変えていない	コンテンツ幅の上限を少し広げる、左右の余白を調整する
幅が変わらない・効いていないように見える	テーマやスキン側のCSSが優先されている	セレクタを見直し、優先度の高いCSSで上書きする
スマホで見たらレイアウトが崩れた	固定幅（px）の指定がそのままスマホにも効いている	PCだけに適用するメディアクエリを書く、%やvwなど相対的な指定を検討する

cocoon 1カラムの幅に関する悩みは、だいたいこの表のどこかに当てはまります。

自分のサイトがどのパターンに近いか、ざっくりイメージしながら読み進めてみてください。

cocoonの設定だけで1カラムの幅を調整する

cocoon設定で触れる主な項目

cocoonの管理画面には、1カラムの幅に関係してくる項目がいくつかあります。

実際の名称や場所はスキンやバージョンで多少違うことがありますが、役割としては次のようなものがあります。

• コンテンツ幅
• コンテンツの左右余白
• カラム間余白

それぞれのイメージを表にすると次のようになります。

項目名のイメージ	何に効くか	調整のポイント
コンテンツ幅	メインカラムの基本的な横幅	ブログ記事ならやや狭め、LPなら少し広めを目安にする
コンテンツ左右余白	文字とコンテンツの枠とのすき間	詰めすぎると窮屈、広げすぎると本文が細く感じられる
カラム間余白	主に2カラム時のすき間。デザイン全体のゆとりにも影響する	1カラムでも、ボックス配置や見え方に影響する場合がある

まずはcocoonの設定画面を少しずつ触りながら、「コンテンツ幅」「余白」を変えたときにどんな見た目になるか、プレビューで感覚をつかむのがおすすめです。

用途別のおすすめ幅イメージ

細かい数値はテーマやスキン、使っているフォントによって変わりますが、「このくらいの雰囲気を目指すと読みやすい」という目安を用途別にまとめてみます。

ここでは、主にPC表示のイメージで考えています。

用途	幅のイメージ	意識したいポイント
通常のブログ記事	画面中央に、やや狭めの1カラム	長文を読む前提なので、1行を長くしすぎないようにする
LP・セールスページ	ブログ記事より少し広めの1カラム	画像やボタンも多くなるので、窮屈に見えない幅にする
プロフィール・問い合わせページ	やや狭め〜標準くらいの幅	文章量が少ないので、広げすぎるとスカスカに見えやすい

「何ピクセルにすべきか」だけにこだわるよりも、実際に表示させてみて「1行の長さ」と「余白のバランス」を見るほうが、最終的には良い着地点を見つけやすいと感じています。

CSSでcocoon 1カラムの幅を細かく変更する

サイト全体の1カラム幅を変えるCSS例

「cocoonで1カラムになっているページは、全体的に同じ幅にそろえたい」という場合は、1カラム用のラッパーに対してmax-widthを指定する方法が分かりやすいです。

子テーマのstyle.cssや、cocoonのカスタムCSS欄に、次のようなイメージで書きます。

.no-sidebarはサイドバーなしのレイアウトにつくクラス、.wrapは全体を囲む要素のクラスであることが多いです。

テーマ側の構造によってクラス名が違うこともあるので、自分のサイトのHTMLをブラウザの検証ツールで一度確認してから使うのがおすすめです。

イメージコードは次のような形です。

.no-sidebar .wrap { max-width: 960px; margin: 0 auto; }

数値（ここでは960）を変えることで、1カラム時の最大幅を調整できます。

「ちょっと広いな」と感じるときは少し小さめに、「もう少し余裕が欲しい」と感じるときは少しずつ大きくしながら、プレビューで確認してみてください。

特定のページだけ1カラムの幅を変える

「全ページを同じ幅にするのではなく、このページだけ1カラムの幅を変えたい」ということもよくあります。

たとえば、サービス紹介ページだけ少し広くしたり、ストーリー重視の読み物ページだけ少し狭くしたり、といったケースです。

この場合は、次のような考え方でCSSを書くと分かりやすいです。

• 対象のページに、独自のクラスやIDを付ける（ブロックエディタの「追加CSSクラス」など）
• そのクラスに対して、max-widthなどの指定を行う

たとえば、固定ページに「lp-page」というCSSクラスを付けた場合のイメージは次のようになります。

.lp-page .no-sidebar .wrap { max-width: 1100px; }

こうしておくと、「クラスを付けた特定のページかつ1カラムのときだけ、幅を少し広めにする」といった細かい調整が可能になります。

PCだけ1カラム幅を変えるメディアクエリ

スマホ表示は、テーマが自動でいい感じに整えてくれることが多いですが、「PCだけ幅を変えたい」という場面もよくあります。

その場合は、メディアクエリを使って、一定以上の画面幅のときだけCSSを適用します。

イメージとしては、次のような書き方です。

@media (min-width: 1024px) { .no-sidebar .wrap { max-width: 900px; } }

まとめると、次のようなイメージになります。

やりたいこと	書く場所の例	意識したいポイント
1カラムのPC幅だけ変えたい	子テーマのstyle.cssやcocoonのカスタムCSS欄	min-widthの値を、自分のテーマのブレイクポイントに合わせる
スマホの幅はあまりいじりたくない	PC向けのメディアクエリ内だけに指定を書く	スマホ側の指定をむやみに固定pxにしない

cocoonの1カラムで幅をカスタマイズするときのよくある失敗は、「PCでもスマホでも同じCSSを効かせてしまい、スマホでレイアウトが崩れる」というパターンです。

PC向けとスマホ向けを分けて考えるだけでも、かなりトラブルを減らせます。

cocoon 1カラム変更でよくある失敗とチェックリスト

幅が変わらない・左寄りになるときのチェック

「CSSを書いたのに幅が変わらない」「中央に寄せたいのに、なぜか左側に寄ったまま」という相談は本当によく見かけます。

主な原因と確認ポイントは、次の表を参考にしてみてください。

症状	チェックするポイント
幅がまったく変わらない	指定しているクラスやタグが、実際のHTML構造とあっているか。テーマやスキンのCSSが優先されていないか。
1カラムなのに左に寄ったままに見える	margin: 0 auto;が効いているか。floatやflexの指定が邪魔していないか。
PCでは問題ないのにスマホで崩れる	メディアクエリの条件が正しいか。スマホ向けのCSSで意図せず上書きしていないか。

特に、スキンやプラグインが追加しているCSSが強い場合、そちらが優先されてしまうことがあります。

そのときは、セレクタをより具体的にしたり、どうしても必要なら!importantを使ったりして、上書きできるよう調整する必要が出てきます。

1カラムにしたらデザインが崩れたとき

cocoonで1カラムにしたあと、「アイキャッチのバランスがおかしい」「ボックスが画面いっぱいに広がりすぎてしまう」といった相談も多いです。

これは幅の問題だけでなく、画像サイズや余白の設定など、いくつかの要素が重なって起きていることがほとんどです。

症状	原因のイメージ	対処の方向性
画像がやたら大きく表示される	1カラムでコンテンツ幅が広がり、元画像のサイズがそのまま出ている	画像サイズを調整するか、画像に対してmax-widthを指定する
ボックスや吹き出しが画面いっぱいに広がる	幅指定が100%になっていて、左右の余白が少ない	ボックス側にもmax-widthをつける、左右の余白を増やす
1カラムにしたら全体的にスカスカに見える	もともと2カラムを前提にしたデザインだった	セクションごとに背景色を変える、余白の幅や画像の入れ方を見直す

cocoonの1カラムレイアウトで幅をいじるときは、「数字」だけでなく「余白」「背景」「画像の見せ方」もセットで見直すと、仕上がりがかなり変わってきます。

よくある質問

Q1. cocoonで1カラムに変更したら、SEOが悪くなったりしませんか？

A. 1カラムに切り替えたこと自体が、直接SEOに悪影響を与えることは基本的にありません。

むしろ、本文に集中しやすくなり、読みやすくなることで離脱率や滞在時間が改善すれば、結果的にプラスに働く可能性もあります。

ただし、サイドバーに置いていた内部リンクやカテゴリーリンク、プロフィールなどを何も考えずに消してしまうと、サイト内の回遊が減ることがあります。

1カラムにしても、記事下や本文中、フッターなどに関連記事や導線を用意しておくと安心です。

Q2. cocoonで1カラムにしたときの幅は、何ピクセルくらいが目安ですか？

A. サイトのテーマやフォント、扱う内容によって「ちょうどいい幅」は変わるので、「この数値が正解」とは言えません。

ただ、通常のブログ記事であれば、「画面の中央に、ほどよい太さの1カラム」が読みやすいことが多いです。

目安としては、1行あたりの文字数が40〜60文字前後になるようなコンテンツ幅にしておくと、多くの読者にとって負担が少なくなります。

cocoonのコンテンツ幅や、1カラム時のラッパー要素に指定するmax-widthの数値を少しずつ変えながら、自分のブログに合うバランスを探してみてください。

Q3. スキンを変えたら、1カラムの幅が変わって見えるのはなぜですか？

A. スキンには独自のCSSが含まれていることが多く、コンテンツ幅や余白、フォントサイズもまとめて変わる場合があります。

そのため、スキンを切り替えると「同じcocoonでも1カラムの幅が広く（または狭く）なったように感じる」ことがあります。

もしスキンによって見え方が大きく変わるのが気になる場合は、子テーマのCSSでコンテンツ幅や余白を上書きしておくと、どのスキンでも近い見た目をキープしやすくなります。

まとめ

ポイントを改めて整理します

この記事を読み終えたら、まずやってほしい最初の一歩は、「テスト用の固定ページを1つ作り、そのページで1カラムレイアウトと幅の調整を試してみること」です。いきなり本番の記事を触るのではなく、テストページでいろいろな数値を試してみると、「このくらいの幅が自分のブログには合いそうだな」という感覚がつかめます。

自分の目でしっくりくるバランスを見つけたら、その設定やCSSを本番ページに反映させていくだけです。

少しずつ慣れながら、自分のサイトにぴったりなcocoonの1カラムレイアウトと幅を育てていきましょう。