Cocoonで作った表をスクロール対応にするコツ【できない原因も】

Cocoonで作った表をスクロール対応にする方法をお伝えします。またスクロールしないときの原因や対策もあわせてご紹介します。

この記事を読むと、次のようなことがわかります。

cocoonで作った表がスマホで崩れたり、横にスクロールできなくなる主な原因
テーマ設定とブロックエディタを使って、表を横スクロール対応にする具体的な手順
「スクロールできます」のヒント表示を消したり、やわらかいデザインに整える方法
料金表や比較表など、実際のブログで使いやすいテンプレートの考え方

cocoonで作った表のスクロールに悩んで検索してきた方が、この記事を読み終わる頃には「もう表まわりで迷わなくていい」と思えるところまで一緒に整理していきます。

cocoonで作った表がスクロールできないときのよくある悩み
cocoonの表を横スクロール対応にする基本設定
cocoon 表スクロールがうまくいかないときのチェックリスト
「スクロールできます」表示の消し方・デザイン調整
読みやすい横スクロール表を作るcocoonデザインのコツ
用途別テンプレート：料金表・比較表・スペック表
よくある質問（cocoon 表スクロール編）
まとめ：cocoonの表スクロール設定を整えて、スマホでも読みやすい記事にしよう

cocoonで作った表がスクロールできないときのよくある悩み

ごとう

最初に、cocoonで表を使うときにどんなトラブルが起きやすいのかをざっくり整理しておきます。自分のブログの状況に近いパターンを見つけておくと、このあとの設定変更がかなり楽になります。

cocoonの表スクロールまわりで起きがちな症状一覧

私が実際に相談されたり、自分で経験したりした「あるある症状」を一覧にすると、こんな感じです。

症状	画面のイメージ
スマホだと表が右にはみ出してしまう	画面右側が切れたままで、スクロールもできない
横スクロールはできるが文字が重なる	セル同士がかぶって、内容が判別しづらい
一部の表だけスクロールが効かない	記事本文の表は問題ないが、サイドバーなどだけおかしい
「スクロールできます」の表示が邪魔に感じる	細いバーがデザインと合わず、消したくなる
パソコンではキレイなのにスマホで崩れる	PCビューでは問題なく、原因がよくわからない

私の場合、一番最初にハマったのは「自分では横に動かして読めるから問題ないと思っていたけれど、普通の読者はスクロールできることに気づかない」というパターンでした。せっかく比較表を作っても、片側しか見えていないと内容が伝わりません。

このあと、こういった症状をどう直していくかを、テーマ設定と表の作り方の両面から見ていきます。

cocoonの表を横スクロール対応にする基本設定

ごとう

ここからは、cocoon標準の機能だけで表を横スクロール対応にする「基本の3ステップ」を紹介していきます。ややこしいカスタマイズをする前に、まずはこの部分をしっかり整えるのがおすすめです。

ステップ1：ブロックエディタで表ブロックを作る

まずはワードプレスのブロックエディタで、ふつうに表ブロックを挿入します。商品やサービスを比べたいときは、たとえば次のような項目を用意すると整理しやすいです。

商品名やプラン名（例：サービスA、ライトプランなど）
料金（例：月額いくら、初期費用の有無など）
大まかな特徴（メリットや注意点の要約）
どんな人に向いているか（初心者向け、法人向けなど）

ブロックの追加ボタンから「テーブル」を選び、列数と行数を決めれば準備は完了です。列や行はあとから増減できるので、最初はざっくりで問題ありません。この段階ではスクロールのことは気にせず、「伝えたい情報を整理すること」に集中して大丈夫です。

ステップ2：「表のセル幅を固定」を必要に応じてオフにする

表ブロックを選択すると、右側の設定パネルにテーブル用の項目が出てきます。その中に「セル幅を固定する」といった意味のチェック項目があるはずです。ここがオンのままだと、cocoon側で横スクロールを有効にしても、スマホでセル同士が重なってしまうことがあります。

次のようなイメージで使い分けると失敗しにくいです。

列ごとの幅をきっちり揃えたいときだけオンにする
スマホでの読みやすさを優先したいときはオフにしておく

私も最初は何も考えずにセル幅を固定していたのですが、チェックを外しただけで「文字が重なって読めない」という悩みが一気に解消したことがあります。スマホでの見え方を必ずプレビューして、セル幅の固定が本当に必要かどうかを確認してみてください。

ステップ3：cocoon設定で「横幅の広いテーブルは横スクロール」にチェック

つぎに、テーマ側の設定を確認します。cocoonには、テーブルが画面より横に広いときに、自動で横スクロール対応にしてくれる項目があります。流れはおおよそ次のとおりです。

手順	操作内容
1	ワードプレス管理画面のメニューから「cocoon設定」を開く
2	上部のタブから「本文」をクリックする
3	「レスポンシブテーブル」まわりの項目を探す
4	「横幅の広いテーブルは横スクロール」にチェックを入れる
5	画面下部の「変更を保存」ボタンをクリックする

ここがオフのままだと、どれだけ表を調整してもスマホで横スクロールしてくれません。逆に、この記事で紹介している他のポイントが多少甘くても、このチェックが入っているだけで「まったく動かない」という最悪の状態は避けられます。

cocoon 表スクロールがうまくいかないときのチェックリスト

ごとう

基本設定を押さえても、細かい条件が重なると「やっぱりうまく動かない…」ということがあります。ここでは、cocoonで作った表が思ったようにスクロールしてくれないときに見直したいポイントを、原因別に整理していきます。

原因パターン別：cocoon表スクロールのトラブル早見表

ありがちなミスや勘違いをまとめた早見表がこちらです。自分の状況と照らし合わせながら、当てはまりそうなものに目星をつけてみてください。

原因パターン	よくある状況	対策の方向性
テーマ設定のチェック漏れ	どの表も横スクロールしない	「横幅の広いテーブルは横スクロール」がオンか確認する
セル幅の固定と列数の多さ	スマホで文字が重なったり窮屈に見える	セル幅の固定をオフにするか、列数と文字量を減らす
ウィジェットやサイドバー内の表	サイドバーの表だけスクロールしない	HTMLの構造や、ウィジェットの種類を見直す
プラグイン製テーブルを使用	TablePressなどを使っていて動作が違う	プラグイン側のレスポンシブ設定を優先的に確認する
カスタムCSSの影響	昔追加したCSSが理由不明で効いている	一度CSSをコメントアウトして変化を確認する

上の表を見て、だいたいの原因に見当が付いたら、このあとの小見出しでそれぞれの対策をもう少し具体的に見ていきましょう。

セル幅固定＋列数オーバーで文字が重なる問題

列が5列、6列と増えてくると、スマホの画面幅だとどうしてもギリギリになります。そこにセル幅固定の設定が重なると、横スクロールできても文字がかぶったり、読みづらくなったりしやすいです。

次の順番で調整してみると、だいぶスッキリするはずです。

まずは「セル幅を固定」系のチェックを外してみる
どうしても窮屈な場合は、列数を減らせないか検討する
セル内の文章をできるだけ短く、箇条書きに近い形に整える

例えば「サポートがとても充実していて、チャット対応やメール対応もあり、初心者でも安心して使えます」といった一文を、そのまま表に入れてしまうとかなり窮屈です。「サポート：チャット・メール対応、初心者も安心」のように、少しだけ情報を圧縮するだけで見栄えが変わります。

ウィジェットやサイドバーの表だけスクロールしないとき

記事本文に置いた表は問題ないのに、サイドバーやフッターのウィジェット内に置いた表だけ横スクロールしない、というケースもよく見かけます。この場合は、テーマ側の設定というよりも、ウィジェットの構造やHTMLの書き方が影響していることが多いです。

チェックしてみたいポイントは次の通りです。

tableタグが正しく閉じているか（途中で途切れていないか）
不要なdivやpタグで過剰に囲んでいないか
別テーマで使っていたコードをそのまま貼り付けていないか

テキストウィジェットやカスタムHTMLウィジェットを使っている場合は、一度テキストモードで中身を確認してみると、余計なタグが見つかることがあります。サイドバーに置く表は情報量を控えめにし、スマホでは無理に横スクロールさせないレイアウトに変えるのも一つの手です。

プラグイン製テーブルとcocoon表スクロールの相性

TablePressなどの専用プラグインでテーブルを作っている場合、cocoon側の「横幅の広いテーブルは横スクロール」設定だけでは動きが変わらないことがあります。この場合、表の動き方を決めているのはプラグイン側なので、そちらの設定画面を優先的に確認しましょう。

基本的な考え方は次の通りです。

cocoon側の設定はオンにしておいて問題ない
レスポンシブ表示やスクロールの有無は、プラグイン内の設定で切り替える
どうしても意図した表示にならない場合は、ブロックエディタのテーブルブロックに作り替えることも検討する

【稼げるキーワード教えます】
▼　　▼　　▼

「cocoonで表をスクロールさせる設定を変えたのに反応しない」というときは、そもそもプラグインのテーブルだった、というのはありがちな勘違いです。一度、どの方法で表を作っているかを確認してみてください。

「スクロールできます」表示の消し方・デザイン調整

ごとう

cocoonでは、横に広い表があるときに「スクロールできます」といったヒント表示が出ることがあります。親切な機能ではあるのですが、デザインとの相性によっては「ちょっと目立ちすぎるな」と感じることもありますよね。ここでは、そのヒント表示の扱い方と、見た目を少し整える考え方を紹介します。

cocoonの表スクロールヒントを非表示にする考え方

「とにかくスッキリさせたいから、ヒント表示はいらない」という場合は、カスタムCSSで非表示にすることができます。イメージとしては、次のような流れです。

外観のカスタマイズ画面や、cocoon設定のカスタムCSS欄を開く
スクロールヒント用に使われているクラスを指定して、表示をオフにするCSSを書く
PCとスマホの両方で、表がきちんとスクロールするかを確認する

具体的なクラス名やコードは、テーマのバージョンや子テーマの有無で少し変わることがあるので、ここではあえて書いていません。「cocoon スクロールできます非表示」といったキーワードで調べると、実際に使えるサンプルがいくつも見つかるはずです。

ただ、ヒントを完全に消してしまうと「横に動かせる」ということに読者が気づきにくくなる面もあります。見た目を整えつつ、どこまで案内を残すかは、ブログの雰囲気や読者層に合わせて考えてみてください。

スクロールヒントの文言や雰囲気を変えてみる

ヒント表示自体は残しつつ、文言や雰囲気を少し柔らかくするのもおすすめです。たとえば、次のような表現にすると、押し付けがましさが軽くなります。

「左右にスライドして比べられます」
「指で横に動かして、プランを見比べてください」

デザイン面では、こんな工夫がしやすいです。

背景色を薄いグレーや淡い色にして、主張しすぎないようにする
角を丸くして、ラベルやバッジのような雰囲気にする
小さな矢印アイコンを添えて、横方向の動きをイメージさせる

少しの調整でも、ただのシステムっぽいバーから「デザインの一部として自然にそこにあるガイド」に変わります。cocoonの表スクロール機能は便利なので、消してしまう前に、まずはこうした軽めの工夫から試してみるといいと思います。

読みやすい横スクロール表を作るcocoonデザインのコツ

ごとう

ここまでで、cocoonの表を横スクロールさせる基本的な仕組みは押さえられたと思います。次は「読めるかどうか」だけでなく「読みやすいかどうか」に目を向けて、デザインのコツをいくつか紹介します。

NGとOKを比較してイメージする

まずは、やりがちなNGパターンと、それを少し整えたOKパターンを並べてみます。

パターン	内容のイメージ
NG	列が7列以上あり、各セルの文章も長文で、文字サイズも小さい
OK	列は4〜5列までに絞り、セル内は短い文章で、重要な行だけ背景色をつける

この表を見ると、cocoonで作った表をスクロールしやすくするには「列を欲張りすぎない」「セルの文章を短くする」という二つがかなり重要だとわかります。横に動かせるとはいえ、一度に視界に入る情報量には限りがあるので、比較したい軸をあらかじめ整理しておくことが大事です。

行の色分け・太字・中央揃えをどう使うか

cocoonでは、表の行に背景色をつけたり、ヘッダー行を太字にしたりといった基本的な装飾が簡単にできます。やりすぎるとゴチャつきますが、ポイントを絞れば読みやすさがぐっと上がります。

私がよく使うパターンはこんな感じです。

1行目（ヘッダー）は、やや濃い背景色＋白文字＋中央揃え
2行目以降は、1行おきにごく薄い背景色をつけてシマシマにする
料金など重要なセルだけ太字にして、少し目立たせる

これだけでも、「なんとなく作った表」から「ちゃんとした比較表」に見え方が変わります。逆に、すべての行に強い色をつけたり、文字色をバラバラにすると、横スクロールしたときに目が疲れやすくなります。色や装飾は、少なめくらいがちょうどいいです。

用途別テンプレート：料金表・比較表・スペック表

ごとう

cocoonの表スクロールと相性がいい「使いどころ別」のテンプレートを紹介します。ここでは、構成の考え方にフォーカスしつつ、実際にイメージしやすい形でまとめます。

料金表テンプレート（cocoon 表スクロール向き）

まずは王道の料金表です。列数もほどよく、cocoonで横スクロールしても読みやすい構成になっています。

プラン名	月額料金	主な機能	おすすめの人
ライト	〇〇円	基本機能のみ	まずはお試しで使いたい人
スタンダード	△△円	基本機能＋メールサポート	個人ブロガー全般
プレミアム	□□円	すべての機能＋優先サポート	本気で収益化したい人

このくらいの列数であれば、スマホでもギリギリ窮屈になりません。もし項目を増やしたくなったら、列を増やすのではなく行を追加して、「プランごとのオプション」などを下に追記していくと読みやすさを維持できます。

商品・サービス比較表テンプレート

つぎは、複数のサービスを横並びで比較したいときのテンプレートです。比較項目を縦方向に並べることで、横スクロールしても読み進めやすい構成になっています。

比較項目	サービスA	サービスB	サービスC
料金	〇〇円	△△円	□□円
特徴	初心者向け	中級者向け	上級者向け
サポート	チャット	メール	電話
向いている人	副業ブロガー	企業の担当者	本格的に運用したい人

この形だと、「料金」「特徴」「サポート」のように、縦方向の流れが保たれるので、横スクロールしても迷いにくいです。cocoonで作る比較表では、列を増やしすぎないことと、1行ごとの情報量を絞ることがとても大事です。

スペック表テンプレート（ガジェット系など）

ガジェットレビューやツール紹介の記事では、スペック一覧の表もよく使います。スペック表はあまり列数を増やさず、縦に情報を積んでいく構成にしたほうが、cocoonの表スクロール機能に頼らなくても読みやすくなることが多いです。

例えば、次のような項目でまとめておくと、あとから比較もしやすくなります。

サイズ（幅×高さ×厚さなど）
重さ（おおよそのグラム数）
バッテリー（連続駆動時間の目安）
接続方式（USB、Bluetoothなど）

もし項目が多くなりすぎる場合は、スペック表を二つに分けて「基本スペック」と「接続・対応環境」のように分割するのもおすすめです。一つの表に詰め込みすぎるよりも、適度に分けたほうが、結果として読者にやさしい構成になります。

よくある質問（cocoon 表スクロール編）

ごとう

最後に、私が実際に聞かれることが多い「cocoonで作った表のスクロール」に関する質問を、Q&A形式でまとめておきます。

Q1：テーマ設定で「横幅の広いテーブルは横スクロール」にチェックしたのに、表が横に動きません。

A1：まず確認したいのは、その表をどの方法で作っているかです。ブロックエディタ標準のテーブルブロックではなく、TablePressなどのプラグインで作った表の場合、cocoon側の設定では動きが変わらないことがあります。その場合は、プラグインの管理画面でレスポンシブ表示やスクロールの設定を確認するか、必要に応じてテーブルブロックに作り替えることを検討してみてください。

Q2：cocoonの表をスクロールさせると「スクロールできます」の表示が出ますが、ページによっては邪魔に感じます。

A2：スクロールヒントは、先ほど触れたようにカスタムCSSで非表示にすることができます。完全に消すのが不安な場合は、背景色を薄くしたり、文言を柔らかくしたりして、存在感を抑える方法もあります。cocoonで作った表のスクロール機能自体は残しつつ、デザインだけ自分のブログに合うように調整してみてください。

Q3：記事によっては、cocoonの表スクロールを使わずに固定の表にしたいです。

A3：記事単位でテーマの機能を完全にオンオフするのは難しいですが、「そもそも横スクロールが必要ない表」に作り替えるという考え方があります。具体的には、列数を減らす、セル幅固定の設定を見直す、モバイルでは別レイアウトで情報を出すなどです。どうしても記事ごとに切り替えたい場合は、表にクラス名を付けて、そのクラスだけスクロール領域から外すCSSを書くといった工夫もできます。