Cocoonのコンテンツ幅は何pxがおすすめ？失敗しないサイズの決め方5ステップ

この記事ではCocoonのコンテンツ幅のおすすめと、失敗しないサイズの決め方をお伝えします。

cocoonのコンテンツ幅を決める前に知っておきたいこと

Cocoonのデフォルトコンテンツ幅とサイドバー幅

Cocoonのカラム幅は、デフォルトだとメインコンテンツとサイドバーがセットになった形で決まっています。

代表的な初期値は、次のようなイメージです。

項目	内容
コンテンツ幅（メインカラム）	約800px（初期設定）
サイドバー幅	約336px（初期設定）
サイドバーの設定可能範囲	おおよそ200〜500px程度で1px単位調整可
全体の幅	コンテンツ幅＋サイドバー幅＋カラム間余白などの合計

Cocoon設定の「カラム」タブでは、メインコンテンツ幅やサイドバー幅、カラム間の余白などを細かく指定できます。

ここをいじることで、PC表示のときに「横にどれくらい広く見えるか」が大きく変わります。

私自身は、デフォルトの800pxだとやや横に広い印象を受けることが多く、少し狭めて使うケースが多いです。

コンテンツ幅が読みやすさに与える影響

コンテンツ幅を決めるうえで、実はpxそのものより大事なのが「1行あたりの文字数」です。

行が長くなりすぎると、読者の目線の移動距離が大きくなり、途中で読むのがしんどくなってしまいます。

ブログやWeb記事では、1行あたりのおおよその文字数として、40〜60文字くらいを目安にしているケースが多いです。

コンテンツ幅と1行の文字数のイメージを、ざっくり表にするとこんな感じになります（フォントサイズや種類によって変わるので、あくまで目安です）。

コンテンツ幅の目安	想定される1行あたりの全角文字数
640px前後	約35〜40文字でかなり読みやすい
720px前後	約37〜45文字でブログにちょうど良い
800px前後	約45〜55文字でやや長めだが許容範囲
900px以上	50〜60文字を超えやすく、人によっては読みにくく感じる

このように、「何pxにするか」というより「結果として1行がどれくらいの長さになるか」を意識すると、Cocoonのコンテンツ幅を決めやすくなります。

おすすめの幅を探すときは、まず今のフォントサイズと行の長さをざっくり眺めてみるところから始めてみてください。

cocoon コンテンツ幅のおすすめ基準【結論】

• 2カラム（サイドバーあり）の一般的なブログ
• 1カラムの読み物重視ブログ
• LPやセールスページのようなページ

ブログタイプ別 cocoonコンテンツ幅おすすめ早見表

イメージをつかみやすいように、ブログのタイプごとにコンテンツ幅のおすすめを表にしてみます。

ブログのタイプ	レイアウト	コンテンツ幅のおすすめ	サイドバー幅の目安	特徴・向いているジャンル
雑記ブログ・日記系	2カラム	720〜780px	280〜340px	読みやすさ重視でバランスが良い
特化ブログ・アフィリエイト	2カラム	740〜800px	300〜340px	情報量の多い記事に向く
オウンドメディア風・読み物重視	1カラム	800〜900px（max-width指定）	なし	ストーリー性のある長文記事向け
LP・セールスページ	1カラム	840〜960px（デザイン次第）	なし	画像やボタンを大きく見せたい場合

私の感覚では、2カラムで運営するならコンテンツ幅を720〜780pxあたりにしておくと、読みやすさと情報量のバランスが取りやすいと感じます。

逆に、1カラムで960px近くまで広げると迫力は出ますが、行が長くなりがちなので、フォントサイズや行間もセットで調整した方が読みやすくなります。

「おすすめpx」を決めるときの3つの判断軸

Cocoonのコンテンツ幅をどのあたりに落ち着かせるか悩んだときは、次の3つのポイントをチェックしてみてください。

• 読者に「じっくり読んでほしい記事」が多いのか、それとも「ざっと流し読みしてほしい記事」が多いのか
• サイドバーにどれくらい情報を置きたいのか（プロフィール、人気記事、広告など）
• コンテンツの主役が文章なのか、画像・図解なのか

文章メインの特化ブログなら、コンテンツ幅は少し狭めにして行の長さをコントロールした方が、結果的に読んでもらいやすくなります。

一方で、画像やスクリーンショットを大きく見せたいレビュー系ブログなら、コンテンツ幅を少し広めにして、画像の横幅とのバランスを優先するのも良い選択です。

Cocoonでコンテンツ幅を変更する具体的な手順

Cocoon設定＞カラムからコンテンツ幅を変更する

コンテンツ幅の基本的な変更は、WordPress管理画面の「Cocoon設定」から行います。

とくによく触るのが「カラム」タブです。そこでは、次のような項目を調整できます。

項目名	内容
コンテンツ幅	メインの記事部分（本文エリア）の横幅
コンテンツの左右余白	本文の左右に空ける余白
サイドバー幅	右サイドバーの横幅
サイドバーの左右余白	サイドバー内の左右の余白
カラム間余白	コンテンツとサイドバーの間のすき間
サイト全体の幅	上記を合計した全体の横幅

実際の操作の流れは、だいたい次のようなイメージです。

• WordPress管理画面で「Cocoon設定」を開く
• 「カラム」タブをクリックする
• 「コンテンツ幅」「サイドバー幅」「カラム間余白」などを好みの値に変更する
• 画面下部の「変更をまとめて保存」をクリックする
• 別タブでサイトを開き、表示を確認する

キャッシュ系のプラグインを使っている場合は、変更が反映されないこともあるので、念のためキャッシュを削除してから表示を確認すると安心です。

1カラムに切り替える場合の注意点

「サイドバーをなくして1カラムにしたい」という場合は、Cocoonの設定や各ページの設定からレイアウトを変えることができます。

サイト全体を1カラムにしたいときは、Cocoon設定の「全体」や「レイアウト」関連のタブから、サイドバーを表示しない設定に切り替える方法があります。

一部のページだけ1カラムにしたい場合は、投稿や固定ページの編集画面にある「ページタイプ」を1カラム系に変更する方法もあります。

1カラムにすると、縦にスッと読めるようになり、スマホ表示の雰囲気にも近づきますが、サイドバーに置いていたプロフィールや人気記事、広告が見えなくなります。

そのため、重要なリンクや情報は、本文下やフッター、関連記事など別の場所に移してあげると、読者の回遊性を保ちやすいです。

広告・画像サイズとコンテンツ幅のバランスを考える

代表的な広告サイズとコンテンツ幅の目安

ディスプレイ広告やアドセンスでよく使われるサイズと、コンテンツ幅の組み合わせイメージは次の通りです。

広告の配置場所	代表的な広告サイズ	コンテンツ幅を決めるときの目安
記事上・記事下の横長バナー	728×90、468×60など	コンテンツ幅は728px以上にしておくと収まりが良い
本文中やサイドバー内のレクタングル	300×250、336×280など	コンテンツ幅は700px以上あれば違和感が少ない
サイドバーの縦長バナー	160×600、300×600など	サイドバー幅300px前後にしておくと設置しやすい

特化ブログで広告収入も意識するなら、「コンテンツ幅740〜780px＋サイドバー幅320〜340px」あたりから試してみると、バナー広告がきれいに収まりやすいです。

画像サイズとコンテンツ幅の合わせ方

画像サイズを決めるときは、コンテンツ幅とどんな関係になるかをイメージしておくと、デザインが安定します。

Cocoonでは、画像のサムネイルサイズを再生成するプラグインなどを併用して、サイズをまとめて調整することもできます。

コンテンツ幅を変更したあと、画像がぼやけて見えたり、逆に小さすぎると感じたら、必要に応じて画像の作り直しや再生成も検討してみてください。

読みやすいcocoonコンテンツ幅を決めるチェックリスト

PC表示で確認したい4つのポイント

まずはPCで自分のブログを開いて、次の4点を意識して眺めてみてください。

• 1行あたりがだいたい40〜60文字くらいに収まっているか
• スクロールしたときに、目線の移動が大きすぎないか
• サイドバーに情報を詰め込みすぎていないか
• 画像や表がはみ出したり、極端に小さくなっていないか

ざっくり判断しやすいように、OKパターンとNGパターンを表にしておきます。

チェック項目	OKの状態	NGの状態
1行の長さ	40〜60文字程度で読みやすい	1行が長すぎて行頭に戻りにくい
スクロール感	2〜3段落で1スクロール程度	1段落だけで画面いっぱいになる
サイドバー	必要な情報だけが整理されている	バナーとリンクだらけでゴチャついている
画像・表	内容がしっかり読める大きさ	縮小されすぎて文字がつぶれてしまう

もし「ちょっと読みづらいな」と感じたら、コンテンツ幅を20〜40px単位で少しずつ調整してみると、ちょうど良いポイントが見つかりやすいです。

スマホ表示は「幅」よりも余白と文字サイズが重要

スマホに関しては、Cocoon側でレスポンシブ対応がされているので、PCのようにpxでコンテンツ幅を直接いじることはあまりありません。

その代わり、次のような点を意識すると、スマホでも読みやすくなります。

• 文字サイズが小さすぎないか
• 行間が詰まりすぎていないか
• 段落ごとの余白が適度に取れているか

スマホで自分のブログを開いて、指でスクロールしたときの「テンポ」が心地よいかどうかを確認してみてください。

よくある質問（FAQ）

Q1. とりあえず何pxにしておけば無難ですか？

A1. 2カラムで運営している場合は、コンテンツ幅を720〜780pxくらいに設定しておくと大きなハズレは少ないと思います。

このあたりの幅だと、1行あたり40〜50文字前後になりやすく、読みやすさと情報量のバランスが取りやすいです。

迷ったときは、まず「コンテンツ幅760px・サイドバー幅320px」くらいにしてみて、実際の見え方を見ながら少しずつ調整していくのがおすすめです。

Q2. 1カラムにしたらcocoonのコンテンツ幅はどれくらいがおすすめ？

A2. 1カラムにする場合は、コンテンツ幅をおおよそ800〜900pxくらいにして、max-widthで上限を決めておくと扱いやすいです。

広げすぎると行が長くなって読みにくくなるので、「画面の左右に少し余白が残るくらい」の幅を目安に、何度かプレビューしながら調整してみてください。

Q3. 広告や画像がはみ出るときはコンテンツ幅をどうすればいい？

A3. 広告や画像がはみ出してしまう場合は、次の順番で見直してみるとスムーズです。

• 広告や画像の横幅が、コンテンツ幅を超えるサイズになっていないかを確認する
• コンテンツ幅の方を、よく使う広告サイズ（728pxや336pxなど）に寄せて調整する
• どうしても合わない場合は、広告をサイドバーに移したり、別のサイズの広告に切り替える

コンテンツ幅を広告サイズに完全に合わせてしまうと、文章の読みやすさが落ちることもあります。

そのため、「読みやすさを優先しておおよそのコンテンツ幅を決める → その範囲で使える広告サイズを選ぶ」という流れで考えると、バランスを取りやすいです。

まとめ：cocoon コンテンツ幅 おすすめの決め方

ここまでの内容をまとめます

この記事を読み終えた今、まずやってみてほしいのは、自分のブログをPCとスマホの両方で開いて「1行の長さ」と「スクロールのしやすさ」をチェックすることです。

そこで「もう少し狭いほうが読みやすいかも」「横に広がりすぎているな」と感じたら、Cocoon設定のカラムを開いて、コンテンツ幅を少しだけ変えてみてください。

その小さな調整だけでも、ブログ全体の印象がぐっと変わり、読者にとってストレスの少ない読みやすいサイトに近づいていきます。