ブログ

【Cocoon】ブログのトップページのカスタマイズ

デフォルトでは、ブログのトップにアクセスすると新着記事一覧が表示されるようになっています。

これを、Cocoonの設定からカテゴリ別に記事を並べたページに変えることができます。

これを使ってこのブログのトップページのデザインを変えてみたので、自分がやった設定の方法と内容についてまとめました。

スポンサーリンク

トップページの表示

まずフロントページを作ります。

管理画面の「Cocoon設定」から「インデックス」のタブを開きます。

ここに「フロントページタイプ」という項目があります。

表示形式の中から好きなものを選んでチェックを入れ、トップに表示するカテゴリを選択して保存してください。

これだけでOK。これでトップ画面が新着記事一覧とカテゴリ別の記事一覧の並んだページになります。

参考画像

今回は「カテゴリごと(3カラム)」を選択してみました。

こうなりました。

画面上部に新着記事、その下にカテゴリ別の記事が並んでいます。

良い感じですね。設定画面の選択だけでここまでできるのは本当にありがたいです。

見出しデザインのカスタマイズ

せっかくなので自分のブログに合わせて見出しのデザインを変更しました。

CSSコードは以下の通り。

.list-title-in {
padding: 5px;
width: 250px;
background: #d88c9a;
color: white;
border-radius: 2px;
font-size: 120%;
}
.list-title-in:before, .list-title-in:after {
display: none;
}

これを入力すると、以下のようになります。

ページ全体と同じ配色になりました。

CSSコードの内容としては、

  • padding:(文字の周りの余白)
  • width:(背景色の横幅)
  • background:(背景色)
  • color:(文字色)
  • border-radius:(角の丸み)
  • font-size:(文字の大きさ)
  • .list-title-in:before, .list-title-in:after {display: none;}(文字の横の線を消す)

となっています。

.list-title-in {}の中に任意の値を入力すれば好みの見出しになると思います。

もっと見るボタンのカスタマイズ

「もっと見る」のボタンも少しだけ変更しました。

デフォルトの場合、マウスを合わせた状態では少し青っぽくなります。

これを、ブログ全体のデザインに合わせてピンク色に変更しました。

CSSコードはこちら

.list-more-button:hover {
background: #fef4f4;
}

 

これで、前よりも見やすいトップページになったんじゃないかと思います。

 

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