Cocoonでブログのトップページを整えていくシリーズ。これまでに、【連載その3】WordPressとCocoonでブログをはじめよう！「トップページのデザイン編」にお世話になり、
と進めてきました。今回は「サイドバーの見た目」に挑戦です。
サイドバーの基本設定
まずは左のナビゲーションから「外観 → カスタマイズ → ウィジェット → サイドバー」を開きます。
すると、最初から以下の3つが入っているのが分かりました。
- 検索
- 最近の投稿
- 最近のコメント
ここから「＋ウィジェットを追加」をクリックすると、新しいパーツを組み込めます。WordPressにおける「ウィジェット」とは、サイドバーやフッターなどの決まった場所に配置できる“パーツ”のことです。
私は人気記事を表示したかったので、人気記事ウィジェットを追加しました。
人気記事の表示をカスタマイズ
人気記事の設定画面では、表示方法を細かく指定できます。私は連載どおりに：
- ランキング番号を表示
- カードに矢印を表示
- 表示数はデフォルトの「5」から「4」に変更
このようにチェックを入れて更新すると、サイドバーに人気記事がしっかり表示されました。見栄えもよくなり、アクセスが多い記事へ誘導しやすくなりました。
不要なブロックは削除
私はコメント機能をオフにしているので、「最近のコメント」ブロックは思い切って削除しました。シンプルな見た目の方がスッキリして使いやすいですね。
サイドバー追従エリアの発見
さらに気づいたのは、サイドバーには「アーカイブ」と「カテゴリー」が最初から表示されていること。これらは「外観 → カスタマイズ」では編集できません。
実は「外観 → ウィジェット」から操作できるようになっていて、サイドバースクロール追従という設定でした。ページを下にスクロールしても、このエリアが追いかけてきて、常にアーカイブとカテゴリーにアクセスできる仕組み。これは便利なデザインだと感じました。
まとめ
サイドバーは「検索」「人気記事」「アーカイブ」「カテゴリー」など、読者の回遊を助ける大切な場所。Cocoonなら設定も簡単で、しかもスクロール追従のような便利機能まで最初から備わっています。
ウィジェットは奥が深く、スタイルシートと併用することで、外観を細かくデザインできるようになります。いずれ取り上げる予定ですが、スタイルシートは専門の知識が必要になるため、スタイルシートの利用は最低限にとどめる予定です。
