本記事はアフィリエイト広告を含みます。
Cocoonのデザインは、読者に進んでほしいページを決めてから、標準設定で配置を整えると迷いにくくなります。装飾を先に増やすと、目的の記事へ進めるかという確認が後回しになるためです。ヘッダー、メニュー、案内枠、記事一覧、本文の順に1ページを仕上げ、足りない部分だけCSSで補いましょう。
ロゴ、メニュー、アピールエリア、一覧は、まず標準設定で整えます。それでも足りない部分をCSSで補えば、すべてをコードで調整せずに済みます。Cocoon公式マニュアル
当サイトの以前の制作例では、検証用サイト「プラグインの時間ラボ」のヘッダー、サイドバー、記事一覧を調整しました。その流れを残しつつ、特定のテーマなら短時間で完成するという未計測の比較は分けて考えます。
最初にトップページの役割を決める
トップページで一番案内したい行き先を選びます。基礎記事へ進んでほしいなら、その記事が新着一覧に埋もれない入口を用意しましょう。
たとえば、WordPressの困り事を扱うブログなら、「始める」「整える」「トラブルを直す」のように入口を分ける案が考えられます。これは配置例であり、必ず三つに分けるというルールではありません。
公開記事がないカテゴリは、入口に並べる前に内容を用意します。項目数を増やすより、今読めるページへ確実につながる方が役立ちます。
ヘッダーとメニューを整える
ロゴと説明文は小さな画面でも読めるか
最初に、サイト名と短い説明が読める状態を作ります。ロゴ画像を使う場合も、横長の画像を大きく表示するだけでなく、スマホ幅で高さを取りすぎないか確認してください。
以前の制作例では、ロゴとキャッチコピーの見せ方を調整しました。見た目を合わせるときは、文字の大きさ、ロゴの余白、背景とのコントラストを別々に見ます。
ヘッダー背景の画像が見切れる場合は、画像サイズだけでなく、表示領域と重要部分の位置を確認します。詳しい切り分けはヘッダー画像サイズとスマホ表示へまとめています。
メニュー項目を増やしすぎない
メニューには、読者が内容を予想できる言葉を使います。管理上のカテゴリ名が伝わりにくいなら、表示名を短く言い換えてください。
設定後は各リンク先も開いてみてください。表示名が分かりやすくても、空のカテゴリや古い固定ページにつながっていれば、入口として機能しません。
PCで横一列に収まることだけを基準にせず、スマホの開閉メニューでも同じ目的のページへ進めるかを確かめます。
アピールエリアに置く情報を絞る
アピールエリアは、短い説明と次の一手をセットにします。ボタンは「詳しくはこちら」より「ブログの始め方を見る」など、移動先を具体的に示します。
以前の制作例でも、タイトル、補足文章、移動先のボタンを分けて設定しました。文章を決めてから画像を合わせると、文字が写真に埋もれる調整を繰り返しにくくなります。
準備する内容は次のように整理できます。
内容／書くことの例
- タイトル
-
書くことの例：サイトで解決できる困り事
- 補足文章
-
書くことの例：対象者と扱う内容を短く説明
- ボタン
-
書くことの例：最初に読む案内ページへ移動
- 背景画像
-
書くことの例：文字を妨げない構図と余白
タイトルと説明を画像へ全部焼き込むと、画面幅に応じて文字が小さくなります。読みやすさを優先し、文字として置ける内容はテキスト欄で扱う方法を考えてください。
サイドバーと記事一覧を読みやすくする
プロフィールは、誰が・どんな経験をもとに・何を発信しているかを短くまとめます。詳しい経歴は別ページへ分け、本文の読み始めを妨げない量にします。
公式手順では、管理画面の「ユーザー」→「あなたのプロフィール」で情報を入力し、「プロフィール」ウィジェットを表示したい場所へ配置します。先に文章と画像を用意し、それから配置する順番です。プロフィールの設定方法
記事一覧は、初めて来た人に案内したい記事と、新しく公開した記事を分けて考えます。たとえば設定手順を順に読んでほしいなら、更新日の新しさだけでは必要な入口が埋もれる場合があります。枠を増やす前に、それぞれの見出しとリンク先を確認し、同じ記事ばかり並んでいないか見直してください。
Cocoonにはサムネイル付きの人気記事・新着記事ウィジェットが用意されています。新しい一覧用プラグインを探す前に、標準ウィジェットで必要な表示を作れるかを確認できます。標準ウィジェット一覧
記事一覧は、カードごとの画像サイズ、タイトルの長さ、抜粋の有無を揃えると確認しやすくなります。一覧の外見を変えたら、タイトルが途中で切れて何の記事か分からなくなっていないかを見ます。
特定カテゴリだけの一覧を別に置きたい場合は、WordPress標準のクエリループも選択肢です。表示する記事を分類する作業と、カードの見た目を変える作業を分けて進めてください。
CSSを追加する前に標準設定を確認する
標準設定で変更できる場所を確認し、元の値を記録してから一か所ずつ変更します。見た目が変わらない場合は、キャッシュや表示するページの違いも確認してください。
設定で足りない場合に、対象を絞ってCSSを追加しましょう。どの要素・画面幅に効くかをコメントで残すと、設定とCSSのどちらが影響しているか後から追いやすくなります。
CSSを追加するときは、まず一つの要素と画面幅に対象を絞ります。たとえば見出しの余白だけを直すなら、別のボタンや一覧まで変わる指定を避けてください。設定前の値とコードを残し、PC・スマホ・別ページで確認すると、想定外の変化を見つけて戻しやすくなります。
追加前のコードと表示を残したうえで、目的の箇所以外にも影響が出ていないか見ます。スマホ、別ページ、ログアウト状態まで確認すると、管理者画面では見落とす差にも気づけます。
記事内の吹き出しは、Cocoonの標準機能で作成可能です。自作アイコンの登録と表示確認で、外観全体のCSSを変えずに済みます。
既存の無料ブロック集も選択肢です。ただし、テンプレートには利用するプラグインや設定の条件があるため、配布ページの条件を確認したうえで取り込みましょう。
かかった時間をテーマ購入の判断へつなげる
以前の記事では、一つの検証サイトの設定に丸3時間を使ったと記録しています。これは当時の制作例の申告で、Cocoon利用者全員の所要時間でも、SWELLと同条件で測った比較値でもありません。
作業時間は、初回設定と毎回の編集に分けて記録します。一度終わるロゴ調整と、記事のたびに必要な装飾では、機能を追加する価値が違います。
標準設定で困り事が解消し、その後の更新もできているなら、Cocoonを続ける選択で十分です。繰り返す編集の負担が残る場合だけ、CocoonとSWELLの機能比較で必要な部品と移行の手間を比べてみてください。
まず1ページを標準設定で仕上げ、初めて訪れたつもりで目的の記事まで進んでみてください。問題なく更新できるなら、Cocoonを使い続ける判断で十分です。記事を書くたびに同じ調整が残る場合は、その作業をメモしてSWELLとの編集機能・移行工数の比較へ進むと、替える理由を具体的にできます。
Cocoonの調整で足りない機能を比較
まず標準設定と小さな修正で整え、それでも毎回の編集に負担が残る場合はSWELLの機能を確認してください。テーマ変更には既存記事の表示点検も必要です。
公式サイトで料金・利用条件を確認
利用前に有料テーマの案内です。Cocoonで必要な編集ができる場合は、テーマを替えずに続けられます。
