Cocoonトップページ(ブログ型)のカスタマイズ

「Cocoonに慣れてきたのでトップページをカスタマイズしたいなぁ」という方へ。この記事ではCocoonのトップページの記事一覧(いわゆるブログ型)のカスタマイズの一例を提案します。

トップページを固定ページ(サイト型)に変更したい方は、別記事「Cocoonのトップページをサイト型に変更する」を見て下さい。

トップページの種類

トップページを新着記事一覧(ブログの通常の形態)にするか固定ページ(サイトっぽい表示)にするかをまず決めます。

ブログ型(左)とサイト型(右)

プライバシーポリシー以外の固定記事が1つでもあれば、ダッシュボードの「設定」「表示設定」から選択出来ます。

ここでは「ブログ型」の新着記事一覧で設定していきます。「サイト型」に変更したい方は別記事「Cocoonのトップページをサイト型に変更する」を見て下さい。

記事一覧(インデックスカード)の表示設定

「Cocoon設定」→「インデックス」で設定します。公式ページに説明がありますね。

「縦型カード」と「タイルカード」の違いは、「縦型カード」は大きさがそろったカードが並ぶのに対して、「タイルカード」は縦の長さが不揃いのカードが「押し合いへし合い」して並ぶ点です。

カスタマイズするなら「縦型カード」の方が安定しそうだと思い、縦型カード3列にしています。

縦型カードのカスタマイズ

Cocoonの初期設定はこんな感じです。

(())

それをこんな感じにしました。

(())

ポイントはマウスカーソルをあてると記事が浮き上がるところ

サイドバーの設定

ウィジェットが無いとサイドバーが表示されないので、まず表示したいウィジェットを設定します。

「Cocoon設定」ではなく「カスタマイズ」から「ウィジェット」で設定します。

サイドバーの幅は「Cocoon設定」「カラム」タブの「サイドバー設定」から調整。

サイドバーのカスタマイズ

クラス「.sidebar」を自分好みの形に調整します。

CSSを表示

.sidebar{
border-radius:5px 20px 5px 20px;
background-color:#fffa;
box-shadow:1px 1px 5px 0px #0008;
}

角を非対称に丸めてサイドバー全体の色を半透明にして、画面背景になじませました。「#fffa」が「#fff(白)を10/16の半透明にする」指示です。

後は、うっすら影を落としました。

ウィジェットのカスタマイズ

ウィジェットのタイトルを調整

CSSでクラス「.sidebar h3」を調整

CSSを表示

.sidebar h3{
padding: 5px;
margin: 5px 0px;
text-align: center;
}

カテゴリーウィジェットの調整

カテゴリーのアイテムのレイアウトを調整します

CSSでクラス「.widget_categories ul li a」をいじります。

CSSを表示

.widget_categories ul li a{
border-bottom:dotted 1px #0004;
padding: 10px 5px 10px 15px;
line-height:1rem;
}

コメント

タイトルとURLをコピーしました