「Cocoonに慣れてきたのでトップページをカスタマイズしたいなぁ」という方へ。この記事ではCocoonのトップページの記事一覧(いわゆるブログ型)のカスタマイズの一例を提案します。
トップページを固定ページ(サイト型)に変更したい方は、別記事「Cocoonのトップページをサイト型に変更する」を見て下さい。
目次(クリックでジャンプ)
トップページの種類
トップページを新着記事一覧(ブログの通常の形態)にするか固定ページ(サイトっぽい表示)にするかをまず決めます。
プライバシーポリシー以外の固定記事が1つでもあれば、ダッシュボードの「設定」「表示設定」から選択出来ます。
ここでは「ブログ型」の新着記事一覧で設定していきます。「サイト型」に変更したい方は別記事「Cocoonのトップページをサイト型に変更する」を見て下さい。
記事一覧(インデックスカード)の表示設定
「Cocoon設定」→「インデックス」で設定します。公式ページに説明がありますね。
「縦型カード」と「タイルカード」の違いは、「縦型カード」は大きさがそろったカードが並ぶのに対して、「タイルカード」は縦の長さが不揃いのカードが「押し合いへし合い」して並ぶ点です。
カスタマイズするなら「縦型カード」の方が安定しそうだと思い、縦型カード3列にしています。
縦型カードのカスタマイズ
Cocoonの初期設定はこんな感じです。
(())
それをこんな感じにしました。
(())
ポイントはマウスカーソルをあてると記事が浮き上がるところ
サイドバーの設定
ウィジェットが無いとサイドバーが表示されないので、まず表示したいウィジェットを設定します。
「Cocoon設定」ではなく「カスタマイズ」から「ウィジェット」で設定します。
サイドバーの幅は「Cocoon設定」「カラム」タブの「サイドバー設定」から調整。
サイドバーのカスタマイズ
クラス「.sidebar」を自分好みの形に調整します。
角を非対称に丸めてサイドバー全体の色を半透明にして、画面背景になじませました。「#fffa」が「#fff(白)を10/16の半透明にする」指示です。
後は、うっすら影を落としました。
ウィジェットのカスタマイズ
ウィジェットのタイトルを調整
CSSでクラス「.sidebar h3」を調整
カテゴリーウィジェットの調整
カテゴリーのアイテムのレイアウトを調整します
CSSでクラス「.widget_categories ul li a」をいじります。