Cocoonのトップページをカスタマイズする

Cocoonのトップページをカスタマイズするスキンをカスタマイズ

Cocoonの2.1.6から、いわゆるサイト型と呼ばれるトップページが簡単に作れるようになりました。

今までは、トップページを作るのは骨が折れるカスタマイズが必要だったんですが、Cocoonの設定でポチッポチッとするだけでトップページが完成します。

すごいぞCocoon!

Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法
フロントページの表示形式を変更する設定方法です。Cocoonではこれまで一般的なインデックスリストしかありませんでした。

 

で、トップページには「新着記事」+指定したカテゴリが表示できるようになります。

さらに、タブでかっこよく切り替えることも可能です。

そんなトップページですが、適用しているスキンにあわせてカスタマイズしたいところがどうしても出てくるので、そのあたりを紹介していこうかなと思います。

ちなみに、この記事では僕が作ったスキンのカスタマイズ方法を紹介しますが、他のスキンにも応用できるはずなので、試してみてください。

タブの背景色をスキンにあわせてカスタマイズする

スキンを適用して、Cocoon設定の「インデックス」→「フロントページタイプ」で「タブ一覧」を設定すると、次のようなデザイになります。(下の画像はミックスグリーンの場合)

赤枠部分がタブの一覧部分になりますが、選択しているタブは背景が黒くなっているので、これをスキンのカラーに変更します。

次からは各スキンのCSSを紹介しますが、CSSは子テーマのstyle.cssに追加すればOKです。

追加の方法がわからない人は、次の記事を参考に追加してください。

「カラフルライン」のCSS

カラフルラインのタブを、下の画像のようにカスタマイズするCSSです。


カスタマイズトップページ   ※表示後、F5キーを押してください

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background-image: repeating-linear-gradient(90deg,
    #b9d3e5 0%,#b9d3e5 50%,#bce4d2 50%,#bce4d2 100%);
  border:1px solid #b9d3e5;
  color:#1b4868;
}
.index-tab-buttons .index-tab-button {
  border-color: #b9d3e5;
  color:#1b4868;
}

「サムライブルー」のCSS

サムライブルー(勝色、無印)のCSS。

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #19295a;
  border:1px solid #19295a;
}
.index-tab-buttons .index-tab-button {
  border-color: #19295a;
}

「ダークスキン」のCSS

ダークスキンのCSS。

 

◯ダークエンジ


カスタマイズトップページ   ※表示後、F5キーを押してください

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #84172f;
  border:1px solid #84172f;
  color:#f6f6f6;
}
.index-tab-buttons .index-tab-button {
  border-color: #84172f;
  color:#f6f6f6;
}

 

◯ダークルリ


カスタマイズトップページ   ※表示後、F5キーを押してください

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #1b51ad;
  border:1px solid #1b51ad;
  color:#f6f6f6;
}
.index-tab-buttons .index-tab-button {
  border-color: #1b51ad;
  color:#f6f6f6;
}

 

◯ダークカモノハ


カスタマイズトップページ   ※表示後、F5キーを押してください

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #075f66;
  border:1px solid #075f66;
  color:#f6f6f6;
}
.index-tab-buttons .index-tab-button {
  border-color: #075f66;
  color:#f6f6f6;
}

「ミックススキン」のCSS

ミックススキンのCSS。

 

◯ミックスグリーン

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #298c60;
  border:1px solid #298c60;
}
.index-tab-buttons .index-tab-button {
  border-color: #298c60;
}

 

◯ミックスブルー

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #28569a;
  border:1px solid #28569a;
}
.index-tab-buttons .index-tab-button {
  border-color: #28569a;
}

 

◯ミックスレッド

#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1], 
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2], 
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3], 
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4] {
  background: none #ce2c5a;
  border:1px solid #ce2c5a;
}
.index-tab-buttons .index-tab-button {
  border-color: #ce2c5a;
}

 

コメント

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