Cocoonデザインの仕上げは「引き算」。ブログ初心者が読みやすさを追求したSNS・モバイル設定の極意

前編・中編では、僕が3日間かけて辿り着いた「カフェや図書館」のような色選びについてお話ししました。しかし、色を整えただけでは「おもてなし」は完成しません。
次に大切なのが、「引き算」の美学です。
あれもこれもと飾りたくなる気持ちをぐっと抑えて、読者の方が「文章」にだけ集中できる静かな空間を作る。そのための最終調整をしていきましょう。

【投稿設定】不要なノイズを消して「静かさ」を作る
【SNSシェア】主張を抑えて「そっと置く」おもてなし
【超初心者向け】動画で見る「引き算」の設定方法
【モバイル設定】スマホで見ても「心地よい距離感」を
迷ったら立ち止まる。「3日間の熟成」がくれた答え
完成ではなく、ここからが「始まり」

【投稿設定】不要なノイズを消して「静かさ」を作る

まずは、記事を読み始めた読者の視界に入る「不要な情報」を整理します。
設定方法： WordPressメニューの「Cocoon設定」→「投稿」タブをクリック。
ポイント：「表示項目」のセクションにある「更新日」や「投稿者名」など、自分が「これは不要かな」と思う項目のチェックを外します。
図書館の棚が整然としているように、ブログの記事も「今、何を読むべきか」がパッと見てわかる状態が理想です。余計な装飾をオフにすることで、文字がスッと目に飛び込んでくるようになります。

【SNSシェア】主張を抑えて「そっと置く」おもてなし

記事の下にあるSNSシェアボタン。便利ですが、あまりにカラフルすぎると、ブログの雰囲気が壊れてしまいます。
設定方法：「Cocoon設定」→「SNSシェア」タブをクリック。
ポイント：「表示切替」で不要なSNSのチェックを外し、「ボタンカラー」を「モノトーン」などに変更します。
「シェアしてください！」と大声で叫ぶのではなく、「もしよかったら、そっと広めてくださいね」とお茶を差し出すような距離感を意識しました。

【超初心者向け】動画で見る「引き算」の設定方法

「設定画面のどこを触ればいいか不安……」という方のために、僕も参考にしている解説動画を紹介します。
▼おすすめの解説動画（さっとが様）
https://www.youtube.com/watch?v=zWrpdb0KApQ
動画を見ながら、以下の順にクリックしていけば「引き算のデザイン」が完成します。
Cocoon設定を開く： WordPress左メニューの「Cocoon設定」をクリック。
各タブを操作：上に並んでいる「投稿」「SNSシェア」「モバイル」のタブを順番に切り替えて、設定を変更します。
保存：最後に必ず、画面下（または上）にある「変更をまとめて保存」を押してくださいね。

【モバイル設定】スマホで見ても「心地よい距離感」を

今、ブログを読んでくださる方の多くはスマホを使っています。スマホの小さな画面で見たときに、文字がギチギチに詰まっていては、読者は疲れてしまいます。
読者がゆったりとした気持ちで読み進められるよう、僕は以下の手順で設定を整えました。

① まずは「モバイル」タブで基本を決める
WordPressメニューの「Cocoon設定」→「モバイル」タブをクリックします。
設定のポイント：ここでは「スマホで見たときのレイアウト」を決めます。
僕は、画面をできるだけ広く使ってもらうために、ボタンなどの表示をあえてシンプルに削ぎ落としました。

② 次に「数値」で居心地を整える
レイアウトが決まったら、次は文字の読みやすさです。実はここが迷いやすいポイントで、数値の変更は別のタブで行います。

文字サイズ（全体タブ）：「モバイルサイトフォント」を 18px に。
行の高さ（本文タブ）：「行の高さ」を 1.8 に。
行の余白（本文タブ）：「行の余白」も 1.8 に。

💡 ここで初心者向けの補足です！
実はCocoonの設定画面はタブが非常に多く、ここが一番迷いやすいポイントです。
「モバイル設定」なのに、数値の変更は『全体』タブと『本文』タブで行うという点に注意してください。
文字の大きさを変えたいとき ⇒ 「全体」タブへ
行の間隔を変えたいとき ⇒ 「本文」タブへ
この2箇所を整えるだけで、スマホでの読み心地は劇的に変わります。