本ブログのWordPressのテーマには無料のCocoonテーマを使わせて頂いております。
以前、テーマを導入したら最初にやるべき最低限の設定と、高速化の為の設定について記事を書きました。
今回は第三回という事で、トップページのデザイン変更を、PHPやCSSをいじる事無く、Cocoonの標準機能を使ってお洒落にデザイン変更してみようと思います。
～ 目次 ～
はじめに
Cocoonテーマを導入すると、細かい設定を「Cocoon設定」という中にある沢山のタブや設定項目を変更することで、自分好みの設定に変更できます。
ただ、あまりに膨大な設定項目があるので、以前の記事では最初に最低限やっておくべき設定だけまとめました。
トップページのデザイン調整については、記事数が少ない時にCocoonの機能を使った設定変更をしてもあまり意味がないと思い、初回の記事の中には書きませんでした。
記事数がある程度溜まってきて、そろそろトップページ（インデックスページ）の表示も充実させたいなぁ、と思ったら設定してみるのが良いと思います。
デザイン変更前後のイメージ
Cocoon導入時のデフォルト設定だと、トップページの表示デザインは以下のような感じになっていると思います。
左側にサムネイル画像が表示され、その右に記事タイトルと、記事の要約が数行表示されている状態です。
これを、今回は以下のようなデザインに変更してみようと思います。
変更点は主に以下の三点です。
①新着記事のみの表示ではなく、カテゴリごとの記事一覧ページもタブ切り替えで表示できるようにしたい
②一行一記事ではなく、一行に二つの記事（二段組）を表示したい
③二段組にすると記事本文の要約は冗長な感じに見えるので表示せずに削りたい
他のブログなどを見ていると、こんなイメージのデザインがお洒落だし見やすいなぁ、と思ったので今回はこれを目指します。
新着記事表示に加えてカテゴリごとの記事も表示する
設定はいつも通り、WordPressのダッシュボードから、「Cocoon設定」を選び、「インデックス」タブで行います。
インデックスタブ内の上部に、「フロントページタイプ」という項目があります。
初期状態では「一覧（デフォルト）」にチェックが付いていると思いますが、ここで「タブ一覧」を選択します。
これで、表示する記事一覧を、新着の他にカテゴリごとの記事一覧もタブで切り替えて表示できるようになります。
表示したいカテゴリは、最大で3つまで手動設定できます。
ちなみに、「タブ一覧」以外にも、「カテゴリごと」というタイプの表示形式も選べます。
これは、カテゴリの記事一覧をタブ形式で切り替えるのではなく、新着記事の下に表示するタイプです。
カテゴリの表示を新着記事に合わせた形にするのか、二段組／三段組にするのか、といった複数のパターンがあるようですね。
下の画像のように、テキストの横の画像アイコンにマウスオーバーさせると、ポップアップで表示イメージが確認出来ます。
表示するカテゴリの順番を変えたい場合は、「カテゴリ表示の順番を並び替える場合はこちら」のリンクをクリックして、表示したい順番にカテゴリIDを入力すればＯＫです。
カテゴリIDやタグIDの確認方法は以下の記事を参考にしてみてください。
ブログカード型の二段組表示にする
次に、記事を横長の一行ごとに表示するタイプではなく、二段組（2カラム型）で表示するように変えます。
「フロントページタイプ」の少し下に「カードタイプ」という項目があります。
初期状態では「エントリーカード（デフォルト）」が選ばれているので、「縦型カード2列」にチェックを変更します。
他にも、三段組にしてみたり、カード表示のタイプをタイル型に変えたりなどが出来るので、「フロントページタイプ」同様、画像アイコンにマウスオーバーさせて表示イメージを確認し、好みのデザインに変えてみてください。
記事本文の要約（スニペット）は削除しタイトルのみ表示する
最後に、記事本文の要約を削る為に、「投稿関連情報の表示」という項目内の「スニペット（抜粋）の表示」のチェックを外します。
わたしはここは他に「投稿日の表示」の部分だけにチェックを入れていますが、必要に応じて「更新日の表示」や「投稿者名の表示」のチェック状態は変えてみてください。
画像の高さがずれたらプラグインで対応
実際に思い通りの表示になっているか、トップページにアクセスして確認します。
わたしが最初にこの設定をした際は、サムネイル画像の高さが左右のカラムで合っておらず、ガタガタした表示になってしまっていました。
テーマによっては、サムネイル画像の高さを自動調節してくれるものもあるようですが、Cocoonテーマではそれは対応していないようなので、もしこれが気になるようであれば、↓こちらの記事の方法を試してみてください。
まとめ
以上で完了です。
今回は、Cocoon公式の情報を参考に、自分好みのデザインに変えてみました。
→「Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法」
ブログは長く続けていくと、どんどんデザインをお洒落に変えたくなってくると思います。
わたしもCSSも弄ったりして少しずつ微調整をしていますが、ただ、記事数やアクセス数が少ない状態で、見た目に拘り過ぎても自己満足になってしまいます。
とりあえずCocoonテーマ単独で最低限のデザイン調整は出来るので、最初はこれ位のカスタマイズにしておいて、コンテンツの充実に注力した方がよいかな、と思っています。
コメント