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

テーマ・カスタマイズ
この記事は約6分で読めます。

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

お借りしたスキン

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

Cocoonスキン『カラフルライン』の特徴
このページは「カラフルライン」について書いているので、サイドバーの「スキン切り替え」から「カラフルライン」を選択してください。前回のダークスキンからガラッと変わって、マウスホバーが派手な「カラフルライン」というスキンを作ってみました。この記
zvalinf.info

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

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

Cocoonスキン『ミックススキン』の特徴
以前からやろうと思っていた、ミックスシリーズ（ミックスグリーン、ミックスブルー、ミックスレッド）のアップデートがようやくできました！ミックスシリーズの特徴を書いてみます。サイドバーの上に「スキン切り替え」プルダウンを用意したので、それぞれの
zvalinf.info

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

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

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

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

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

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

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

ブログトップページを「Cocoon」で簡単にカスタマイズする方法
ブログのトップページをカスタマイズしました！トップページを自由自在に作れるプラグインもありますし、Wordpr...
happyguu.com
2019.04.11

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

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

カスタマイズ箇所

カスタマイズ箇所
  1. 新着・人気記事5件表示
  2. メインカテゴリー
  3. カテゴリー別の新着・人気記事

人気記事・新着記事の5件表示

Cocoon機能「新着・人気記事」をショートコードで表示。
ブロックメニュー「Cocooレイアウト」の「2カラム」を利用して横並びにしています。

新着記事を5件表示

[new_list count=5 arrow=1]

count=5（表示させたい記事数）
arrow=1（ボックス枠内に矢印を表示）

人気記事を5件表示

[popular_list days=all rank=1 count=5 arrow=1]

days=all（全ての期間を集計）
rank=1（ランキングを表示させる）
count=5（表示させたい記事数）
arrow=1（ボックス枠内に矢印を表示）

メインカテゴリー

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

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

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

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

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

CSSだけで使いやすく汎用性の高いタブ切り替え(複数設置対応)を実装する
先日コメントにてCocoonで使えるのオプションと使い方まとめで実装しているタブ切り替えについて質問をいただきました。これ↓このタブ切り替えは、ラジオボタンを利用してCSSだけで切り替えを実装出来るこちらのページを参考にカスタマイズしたもの
web.monogusa-note.com

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

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

最後に

以上、トップページカスタマイズ「カラフルライン」編の覚え書きでした！(^^)

スキン大好きなので、新しいスキンが出ると着せ替えしたくなりますが、戻りたくなることもあるんですよね。その際、苦労しないための自分用の記事で恐縮ですが、スキン選びの参考にでもなれば幸いです。

それでは、また！けろら～でした♪＼(^▽^)／

コメント欄

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