この記事では、Cocoonのレスポンシブ設定方法をやさしく解説していきます。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
レスポンシブ設定の確認方法
Cocoonは、最初からレスポンシブ対応しているテーマです。
そのため、特別な設定をしなくても、PC・スマホ・タブレットなどどのデバイスからでも綺麗に表示されます。
もちろんCSSを直接触って、デザインを変更することは可能ですが、ほとんどの場合レイアウトが崩れてしまいます。
まずは管理画面から簡単に設定できる「スマホ用の文字サイズ変更」がおすすめです。
スマホ用の文字サイズを変更する方法
まずはスマホ用に文字サイズを変更する方法をお伝えします。
左メニューから「Cocoon設定」をクリック。
「全体」をクリック。
モバイルサイトフォントから文字サイズを変更できます。
16PXのままでも問題ありませんが、もし読者の年齢層が高い場合は見やすいように17px、18pxと大きくしましょう。
最後に「変更をまとめて保存」をクリックして完了です。
念のためスマホから確認しておきましょう。
おつかれさまでした！
この記事を読んで「分かりやすかった」「もっと後藤から学びたい！」と感じた方はぜひ私のメルマガを読んでみてください。
ブログで稼ぐためのノウハウをぎっしり詰め込んでいます。
★ブログでは公開できない裏情報★
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
例えば、
- 実際に10万稼いだキーワード
- 今やるべきおススメ広告
などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
Cocoonのレスポンシブ設定で最初に知っておきたいこと
Cocoonは、最初から画面幅に合わせて表示が変わるレスポンシブ対応のテーマです。そのため、まっさらな状態からレスポンシブ化するというより、スマホで見づらい部分を整えていく考え方のほうが実際には近いです。実際にスマホで確認すると、表の横幅やボタンの配置、ロゴの見え方など、気になる部分は意外と出てきます。つまり大切なのは、テーマの土台を信じつつ、読者がスマホで困らないように細部を整えることです。
まず押さえたいレスポンシブ設定の全体像
Cocoonのレスポンシブ設定は、ひとつの場所だけを見れば終わるものではありません。
メニュー、表、ボタン、ロゴ、文字サイズなど、いくつかの設定を組み合わせてスマホで見やすい状態を作っていきます。
まずは全体像をつかんでおくと、途中で迷いにくくなります。
| 項目 | 主な確認場所 | 役割 | 優先度 |
|---|---|---|---|
| モバイルメニュー | 外観→メニュー / Cocoon設定 | スマホ用の導線を整える | 高 |
| ヘッダーモバイルボタン | Cocoon設定→モバイル | 上部の操作性を整える | 高 |
| フッターモバイルボタン | 外観→メニュー / Cocoon設定 | 下部からの移動を楽にする | 高 |
| レスポンシブテーブル | Cocoon設定→本文 | 表のはみ出しを防ぐ | 高 |
| ロゴ表示 | ヘッダーまわりの設定 | スマホでの見やすさを整える | 中 |
| 文字サイズ | 表示設定や調整項目 | 読みやすさを上げる | 中 |
| 追加CSS | 子テーマCSSなど | 細かな見た目調整 | 低〜中 |
最初に優先したいのは、メニュー、ボタン、表です。
この3つを整えるだけでも、スマホで感じる使いにくさはかなり減ります。
なぜ標準対応でも見直しが必要なのか
レスポンシブ対応のテーマを使っていても、実際の運営では次のようなことが起こります。
- ロゴ画像が横に広く、スマホで圧迫感が出る
- 表の幅が広くて画面からはみ出す
- メニューが多すぎて目的のページに進みにくい
- あとから追加したCSSの影響でスマホだけ崩れる
- 変更したはずなのに表示に反映されない
テーマそのものが優秀でも、コンテンツの作り方や設定の重なり方しだいで見え方は変わります。
だからこそ、Cocoonはレスポンシブ対応だから大丈夫と考えるのではなく、読者がスマホで気持ちよく読めるかまで見ておくことが大切です。
まず見直したい基本設定はこの3つ
何から触ればよいか迷ったら、まずはサイト全体への影響が大きい部分から確認するのがおすすめです。ここを押さえるだけでも、スマホでの印象はかなり変わります。
モバイルメニューで迷わない導線を作る
スマホでは、パソコンのようにたくさんのメニューを横並びで見せられません。
そのため、モバイルメニューの作り方は使いやすさに直結します。
Cocoonでは、WordPressの「外観→メニュー」で作成したメニューを、ヘッダーモバイルメニューなどの位置に割り当てて使う流れが基本です。
ここで大事なのは、項目を増やしすぎないことです。
あれもこれも入れたくなりますが、スマホでは選択肢が多いほど親切とは限りません。むしろ、何を押せばよいのか分かりにくくなることがあります。
おすすめの考え方は次の通りです。
- ホームやカテゴリーなど、よく使うものを優先する
- 項目名は短く、意味が伝わる言葉にする
- 読者がよく使う導線を先に置く
- 使われないページは無理に入れない
迷わせないメニューは、それだけで大きなやさしさになります。
| メニュー項目 | 入れる理由 | 入れすぎ注意度 |
|---|---|---|
| ホーム | 迷ったときの戻り先になる | 低 |
| 人気記事 | 回遊しやすくなる | 低 |
| カテゴリー | 目的の記事を探しやすい | 低 |
| プロフィール | 運営者の人柄が伝わる | 中 |
| お問い合わせ | 安心感につながる | 中 |
| 細かな固定ページ | 必要な場面が限られる | 高 |
ヘッダーモバイルボタンは使いやすさを左右する
スマホでページを開いたとき、上部にどんなボタンが並ぶかは意外と大事です。
ヘッダーモバイルボタンが多すぎたり、ロゴやタイトルとぶつかっていたりすると、見た目が窮屈になりやすいです。
この部分では、次のような点を確認してみてください。
- 本当に使うボタンだけに絞れているか
- ロゴやサイト名と重なっていないか
- 指で押しやすい大きさと位置か
- 情報が詰まりすぎて見えないか
私なら、最初は少なめに設定します。
検索やメニューなど、使用頻度の高いものだけを残し、必要ならあとから足すほうが失敗しにくいからです。
置けるから置くではなく、使うから置くという考え方がいちばん素直です。
フッターモバイルボタンは回遊しやすさに効く
記事を読み終えたあとに、読者が次の行動へ移りやすいようにしてくれるのがフッターモバイルボタンです。
ページ下部に常に表示されるぶん、使いやすく作ると便利ですが、詰め込みすぎると逆に落ち着かない画面になります。
フッターモバイルボタンに向いているのは、次のような項目です。
- ホーム
- 検索
- 人気記事
- カテゴリー
- トップへ戻る
このあたりが基本です。
私が意識しているのは、読み終わった人が次に迷わないかどうかです。
画面下にいつも見えているパーツだからこそ、便利さとすっきり感のバランスが大切です。
【深呼吸タイム】
稼ぐために必要な3つのポイントを知っていますか？
- 稼げる広告
- 稼げるキーワード
- 稼げるライティング
これら全部を暴露します。
表がはみ出すときはテーブル設定から見直す
ブログでよくある困りごとのひとつが、比較表や一覧表のはみ出しです。パソコンでは問題なく見えていても、スマホでは横に切れて読みにくくなることがあります。
まずは横スクロールの設定を確認する
Cocoonでは、本文の設定内にレスポンシブテーブルの項目があり、横幅の広い表を横スクロールで見せる設定が用意されています。
表がスマホ画面からはみ出してしまうときは、まずここを確認するのが近道です。
確認するときの順番は次のように考えると分かりやすいです。
- レスポンシブテーブルの設定を見直す
- 列数が多すぎないか確認する
- 1セルに長文を詰め込みすぎていないか見る
- 必要なら表を分ける
- 画像入りの表ならサイズも確認する
表の崩れは、テーマの問題というより、表そのものの情報量が多すぎることで起こる場合も少なくありません。
設定と作り方の両方から見るのが大切です。
スマホ向けの表は情報を詰め込みすぎない
表を作るときは、つい情報を全部入れたくなります。
ですが、スマホで見やすい表は、情報が多い表ではなく、必要なことがすぐ伝わる表です。
【稼げるキーワード教えます】
▼ ▼ ▼
私は、表を見た瞬間に意味が分かるかをよく意識しています。
見やすい表にするコツをまとめると、次の通りです。
| 見やすい表の作り方 | 理由 |
|---|---|
| 列はできるだけ少なくする | 横幅を圧迫しにくい |
| 1セルの文章を短くする | スマホでも読みやすい |
| 大きな画像を入れすぎない | 表が縮みすぎるのを防げる |
| 重要な項目を先頭に置く | ぱっと見で理解しやすい |
| 必要なら表を分割する | 無理な詰め込みを避けられる |
どうしても表に入れたい情報が多いときは、表と箇条書きを分けて使うのもおすすめです。
全部を表に押し込まず、伝わりやすい形を選ぶだけで印象はかなり変わります。
ロゴと文字サイズを整えるとスマホの印象が変わる
スマホで最初に目に入るのは、本文より先にヘッダーまわりです。そのため、ロゴの大きさや文字の見え方を少し整えるだけでも、全体の印象は大きく変わります。
ロゴが大きすぎると読み始める前に疲れやすい
スマホでサイトを開いたとき、ロゴが大きすぎると、記事を読む前から少し圧迫感が出ます。
反対に、小さすぎても何のサイトか分かりにくくなります。
ちょうどよいバランスを見るときは、次の点をチェックしてみてください。
- 横幅が広すぎて画面を圧迫していないか
- 高さが出すぎて本文の開始位置が下がりすぎていないか
- サイト名やロゴの意味がきちんと伝わるか
- ボタンやメニューとぶつかっていないか
ロゴは目立たせたい場所ですが、スマホでは主役ではありません。
読者にとって主役なのは、やはり記事の中身です。
だからこそ、目立つことより邪魔しないことを優先すると、自然で読みやすい画面になります。
文字サイズは大きければいいわけではない
文字サイズも、スマホ表示では見落としにくい大切な部分です。
小さすぎると読みにくくなりますし、大きすぎると改行が増えてテンポが悪くなります。
読みやすい文字サイズを考えるときは、次のバランスを見てみてください。
- 本文が無理なく読める大きさか
- 見出しが本文より少しはっきり見えるか
- ボタンやメニューの文字が判別しやすいか
- 行間が詰まりすぎていないか
ここは数値だけで判断するより、実際にスマホで読んでみた感覚がとても大切です。
私も見た目の数字だけでは安心せず、実機で見て、息苦しさがないか、読んでいて止まらないかを確認するようにしています。
【ちょっと一息♪】
私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
設定したあとはスマホで必ず見てみる
設定が終わると、そこで満足してしまいがちです。ですが、レスポンシブ設定は確認までしてはじめて完成だと考えたほうがうまくいきます。
パソコンだけでは分からない違和感がある
パソコンで画面幅を狭めれば、ある程度の確認はできます。
ただ、実際のスマホで見たときには、押しやすさや読みやすさ、指の動かしやすさまで含めて印象が変わります。
特に気にしたいのは次のような点です。
- メニューが開きやすいか
- 表は横スクロールで無理なく読めるか
- ロゴやボタンが邪魔になっていないか
- 本文が左右にはみ出していないか
- 画像が大きすぎたり小さすぎたりしないか
- 装飾や広告で窮屈になっていないか
スマホで見ると、パソコンでは気づかなかった小さな違和感がはっきり見えることがあります。
その違和感を見逃さないことが、読みやすいサイト作りにつながります。
確認方法はひとつに絞らないほうが安心
確認方法にはいくつかあります。
どれかひとつだけに頼るより、いくつか組み合わせたほうが安心です。
| 確認方法 | 向いていること | 注意点 |
|---|---|---|
| 実際のスマホで見る | 本番に近い使いやすさを確認できる | 端末ごとの差はある |
| ブラウザ幅を縮める | 全体の崩れを手早く見やすい | 押しやすさまでは分かりにくい |
| 開発者ツールで確認する | 複数サイズを試しやすい | 実機の感覚とは少し違う |
少なくとも、実際のスマホとパソコン上の確認、この2つはやっておくと安心です。
見た目だけでなく、触ってみて違和感がないかまで見るようにしてみてください。
反映されない 崩れる そんなときの見直しポイント
「設定したのに変わらない」「スマホだけ崩れる」という悩みは本当によくあります。こういうときは、設定のやり直しより先に、原因を落ち着いて切り分けることが大切です。
まず疑いたいのはキャッシュの影響
見た目の変更が反映されないときは、キャッシュが残っているケースがあります。
自分の画面では変わらないのに、別の端末では変わって見えるような場合は、この可能性を疑ってみたいところです。
まずは次の順で確認してみてください。
- ブラウザを再読み込みする
- キャッシュ系プラグインを確認する
- サーバー側のキャッシュが残っていないか見る
- 別の端末でも表示を確認する
- ログイン中とログアウト状態の両方で見る
大事なのは、「自分だけ変わっていないのか」「誰が見ても変わっていないのか」を分けて考えることです。
ここが分かるだけでも、原因の見当はかなりつきやすくなります。
追加CSSやプラグインが原因になることもある
Cocoonの設定が悪いのではなく、あとから足したCSSや、プラグインによる表示の変更が原因で崩れることもあります。
特にありがちなのは、幅を固定する指定や、画像を大きく見せる指定です。
よくある原因を挙げると、次のようなものがあります。
- 横幅を固定するCSSを書いている
- 画像やボックスに強いサイズ指定が入っている
- 装飾系プラグインの出力がテーマとぶつかっている
- 特定ページだけに強いCSSが当たっている
- 表に長文を入れすぎている
この場合、設定を増やして直そうとすると、かえって複雑になりがちです。
私なら、まず余計な指定を減らせないか考えます。
崩れたときほど、足し算より引き算のほうがうまくいくことが多いです。
不具合を切り分けるためのチェックリスト
困ったときは、頭の中だけで考えると混乱しやすいです。
確認する順番を決めて、ひとつずつ見ていくと落ち着いて対応できます。
| チェック項目 | 確認内容 | 優先度 |
|---|---|---|
| キャッシュ | 古い表示が残っていないか | 高 |
| 追加CSS | 固定幅や強い指定がないか | 高 |
| プラグイン | 表示系プラグインが干渉していないか | 高 |
| 画像サイズ | 横に大きすぎないか | 中 |
| 表の列数 | スマホには多すぎないか | 中 |
| ボタン配置 | ロゴやメニューと重なっていないか | 中 |
紙やメモに書き出して順に確認すると、意外なくらい早く原因が見つかることがあります。
焦ってあちこち触る前に、まずは順番を決めて見るのがおすすめです。
CSSは最後のひと押しとして使うとうまくいく
CSSは細かな調整ができる便利な方法です。ただ、最初からCSSで全部解決しようとすると、あとから何が原因か分からなくなりやすいです。
まずは管理画面でできることを終わらせる
Cocoonには、モバイルメニュー、ヘッダーモバイルボタン、フッターモバイルボタン、レスポンシブテーブルなど、管理画面で調整できる部分がしっかりあります。
そのため、CSSは次のような場面で使うと扱いやすいです。
- ロゴサイズを少しだけ整えたい
- 特定の表だけ見え方を変えたい
- 一部のページだけ余白を調整したい
- スマホ時だけ装飾を軽くしたい
先に標準機能で整えてから、それでも足りない部分をCSSで補うほうが安全です。
この順番にしておくと、原因の切り分けもしやすくなります。
一部だけ直したいときほど限定的に使う
CSSでよくある失敗は、全体に効く指定を入れてしまい、別のページまで崩してしまうことです。
特定の表だけ、特定のページだけ、と範囲をしぼって使うほうが安心です。
意識したいポイントは次の通りです。
- 全体ではなく必要な場所だけに効かせる
- 変更前後をスマホでも確認する
- どこを変えたかメモしておく
- 一度にたくさん触りすぎない
小さく直して、小さく確認する。
地味ですが、このやり方がいちばん安定します。
★ちょっとだけ宣伝させてください★
「ブログで10万」と聞くと、
- センスが必要
- 文章力が要る
と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
スマホで読みやすいことは SEO以前の土台になる
レスポンシブ設定は、見た目を整えるためだけの作業ではありません。スマホで読みやすいことは、読者が途中で離れにくくなることにもつながります。
読みやすいスマホ画面は最後まで読まれやすい
読者は、文章の内容だけでなく「このページは読みやすそうか」をかなり早い段階で感じ取ります。
次のような状態だと、内容がよくても離れやすくなります。
- 文字が詰まって見える
- メニューが分かりにくい
- 表が切れていて読みにくい
- 画像やボタンが大きすぎる
- どこを押せばよいか分からない
反対に、必要な情報が自然に目に入り、次の行動が分かりやすい画面なら、安心して読み進めてもらいやすくなります。
結局のところ、スマホで読みやすいことは、読者への思いやりそのものです。
大切なのはおしゃれさより迷わないこと
ブログを運営していると、見た目を凝りたくなることがあります。
私もそうでした。
ですが、スマホでは凝った演出より、素直で分かりやすい画面のほうが強いと感じます。
意識したいのは次の3つです。
- ひと目で分かる
- 指で押しやすい
- 最後まで読みやすい
この3つがそろっていれば、派手でなくても十分に使いやすいサイトになります。
Cocoonはもともとの土台がしっかりしているので、必要なところだけ丁寧に整えれば大丈夫です。
よくある質問
Cocoonのレスポンシブ設定をしなくてもスマホ表示はされますか？
はい、Cocoonはもともとスマホ表示に対応しやすいテーマです。ただし、Cocoonのレスポンシブ設定を見直すことで、メニューや表、ロゴの見え方はさらに整えやすくなります。表示されることと、見やすく使いやすいことは別なので、最低限の確認はしておくのがおすすめです。
Cocoonのレスポンシブ設定で最優先なのはどこですか？
最初に見たいのは、モバイルメニュー、ヘッダーモバイルボタン、フッターモバイルボタン、レスポンシブテーブルです。このあたりは使いやすさに直結しやすく、見直した効果も出やすい部分です。
まずはここを整え、そのあとでロゴや文字サイズを調整すると進めやすくなります。
Cocoonのレスポンシブ設定をしてもスマホ表示が崩れるのはなぜですか？
キャッシュ、追加CSS、プラグイン干渉、画像サイズ、表の作り方などが原因になっていることが多いです。テーマ本体というより、あとから加えた設定や装飾の影響で崩れるケースも少なくありません。迷ったときは、まずキャッシュ確認と追加CSSの見直しから始めると原因を絞りやすくなります。
まとめ｜まずはスマホで自分のブログを見てみよう
- Cocoonはもともとレスポンシブ対応だが、スマホで見やすくするには個別の見直しが大切
- 最初に確認したいのは、モバイルメニュー、モバイルボタン、レスポンシブテーブル
- 表のはみ出しは、設定確認と情報量の見直しで改善しやすい
- ロゴや文字サイズは、目立たせるより読みやすさを優先すると整いやすい
- 反映されないときは、キャッシュ、追加CSS、プラグイン干渉を順に確認する
今日の最初の一歩は、とてもシンプルです。スマホを手に取り、自分のブログのトップページと記事ページを実際に開いてみてください。
そのうえで、メニュー、表のはみ出し、ロゴの大きさの3点だけでも見てみると、どこから手をつければよいかがはっきりしてきます。
★初心者さん必見★
「あと3ヶ月早くこの情報を知りたかった…」
そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。
無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
