Cocoonスキン変更の覚え書き-「カラフルライン」編

2021 5/19

2021.02.01 2021.05.19

けろら～

当記事は、Cocoonスキン「カラフルライン」利用の際のトップページカスタマイズ覚え書きです。（ほぼ自分用？）

お借りしたスキン

今回お借りしたスキンは、「アフィリのつぶやき」のhiroakiさんが配布されている「カラフルライン」です。

Cocoonスキン確認サイト

Cocoonスキン『カラフルライン』の特徴このページは「カラフルライン」について書いているので、サイドバーの「スキン切り替え」から「カラフルライン」を選択してください。前回のダークスキンからガラッと変わ…

パッと見シンプルなのにところどころに凝ったカスタマイズがちりばめられていて心躍るスキンです。
デフォルトの色具合もバッチリ好みなのでほぼオリジナルで利用させて頂いてます。(^^)

以前は、「ミックスグリーン」もお借りしていました。

Cocoonスキン確認サイト

Cocoonスキン『ミックススキン』の特徴以前からやろうと思っていた、ミックスシリーズ（ミックスグリーン、ミックスブルー、ミックスレッド）のアップデートがようやくできました！ミックスシリーズの特徴を書い…

新しいスキンが出る度に心躍って他のスキンに着せ替えしたりしますが、
最終的に戻って使用期間も一番長くなるので、
hiroakiさんのスキンが自分の中で一番好みなんだと思います。

トップページカスタマイズの前準備

前準備

固定ページを「フロントページ」に設定
ページの表示形式を「1カラム（広い）」に変更

固定ページを「フロントページ」に設定

トップ用の固定ページを作成。
「WP管理画面」＞「設定」＞「表示設定」を開く。
「ホームページの表示」で、固定ページにチェックを入れてトップ用のページを選択。

WP管理画面＞設定＞表示設定で固定ページをトップページに設定。

固定ページをトップページに設定する方法については、以下の記事にも書いています。

ページの表示形式を1カラム

トップページ用の固定ページを作成。
ページ設定を「デフォルト」から「1カラム（広い）」に変更。

カスタマイズ箇所

新着・人気記事5件表示
メインカテゴリー
カテゴリー別の新着・人気記事

メインカテゴリー

メインのカテゴリーをCocoon機能「ボックスメニュー」で表示させています。

[[box_menu name="ボックスメニュー"]]

カテゴリー別新着＆人気記事

2カラムでカテゴリー別に「新着記事」と「人気記事」を表示し、タブで切り替えるカスタマイズで表示しています。

タブ切り替えカスタマイズは、以下の記事からお借りしています。

ものぐさWEBノート

CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する先日コメントにてCocoonで使えるのオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。これ↓このタブ切り替えは、ラジオボタンを利用してC…

なお、自サイトに合わせるため、
参考記事のCSSを元に色やタブ部分を変更しています。

本来は、もっとラベルっぽいタブCSSなのですが、
当サイトでは、2カラムで表示にしているため、カテゴリー2列になると本来のラベルっぽさを上手く出せなかったため、四角タブを均等に離すだけのCSSにしました。

クリックするとCSS表示

/**************
タグ切り替え
***************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #298C60;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: #C9E5D9;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px;
  flex: 1;
    margin: .3em;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #7ACBD1;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

おまけ

カスタマイズというよりかは、レイアウトになりますが、、、。

ウィジェット設定のウィジェットエリア「フッター左」「フッター中」「フッター右」に、「プロフィール」「タグリスト」「カテゴリーリスト」を配置しています。

その他トップページ用のCSS

シェアボタン、フォローボタンを非表示にするCSSを追加しています。

追記箇所は、「WP管理画面」＞「Wordpressの外観」＞「テーマエディター」ではなく、
固定ページの「カスタムCSS」です。
（トップページのみで使用しているCSSを自分でわかりやすくするため）

/*フロント固定ページのシェアボタン、フォローボタンを非表示*/
.sns-share{
display: none;
}
/フロント固定ページの投稿日を非表示/
.post-date{
display: none;
}
/フロント固定ページの更新日を非表示/
.post-update{
display: none;
}
/フロント固定ページの投稿者名を非表示/
.author-info{
display: none;
}
/フロント固定ページのパンくずリストを非表示/
.breadcrumb{
display: none;
}
/フロント固定ページのタイトルを非表示/
.entry-title{
display: none;
}