ブログトップカスタマイズ覚え書き:Cocoonスキン「ミックスグリーン」編

アイキャッチ画像 Wordpress
この記事は約7分で読めます。

こんにちは!サイト管理人のけろら~です♪\(^▽^)/
当記事は、Cocoonスキン「ミックスグリーン」でトップページをカスタマイズした覚え書きです。(ほぼ自分用?)

行った主なカスタマイズ
  • ページの表示形式を1カラム
  • 新着、人気記事の表示
  • 新着、人気記事をタブ切り替えで表示
  • タグクラウド一覧を表示

前提

1.固定ページを新規作成し、「フロントページ」に設定

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

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

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

エディター画面から、ページ設定を「デフォルト」から「1カラム(広い)」に変更。

トップページの構成

表示しているパーツ
  1. ブログヘッダー(デフォルト)
  2. メニューバー(デフォルト)
  3. 通知エリア(Cocoon設定から追加)
  4. アイキャッチ画像(デフォルト)
  5. 検索窓(ウィジェットから追加)
  6. 新着・人気記事5件表示(カスタマイズ)
  7. メインカテゴリー(カスタマイズ)
  8. カテゴリー別の新着・人気記事(カスタマイズ)
  9. タグ一覧
  10. プロフィール(ウィジェットから追加)

上記パーツの中から、黄色背景でマーキングしている項目をカスタマイズ箇所として詳細をまとめます。

カスタマイズ箇所

人気記事・新着記事の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="ボックスメニュー"]

デフォルト色のオレンジをグリーン系に変更しました。

/*ボックスメニューの色を変える*/
.box-menu-icon{
	color: #89C997;
}
.box-menu:hover {
 box-shadow: inset 2px 2px 0 0 
#89C997,2px 2px 0 0 #89C997,2px 0 0 0 #89C997,0 2px 0 0
 #89C997;
} 

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

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

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

なお、自サイトに合わせるため、
参考記事の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: #89C997;
  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: #298C60;
}
.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;
}

タグ一覧

WordPressプラグイン「Tag groups」のショートコードで一覧表示

「Tag groups」は、タグのグループ分けとプラグイン独自のショートコードで表示も可能なプラグインです。

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

シェアボタン、フォローボタンを非表示にする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;
}

WordPressの外観>テーマエディターに記述してもいいんですが、フロントページのみのCSSを自分でわかりやすいようにするため、ページに追加しています。

最後に

以上、「Cocoonスキン「ミックスグリーン」でトップページをカスタマイズした覚え書き」でした。

主なカスタマイズは、以下4点

  • 新着・人気記事5件表示
  • メインカテゴリーをボックスメニューで表示
  • カテゴリー別の新着・人気記事をタブで切り替え表示
  • WPプラグイン「Tag groups」でタグ一覧を表示

このカスタマイズを行ったのは、この記事を書く2ヶ月ほど前です。
自分としては、思い通りな仕上がりにできたと大満足だったのですが、
つい最近CocoonのバージョンアップでCocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」することが可能になったんですよね。

結構手間暇かけて自分でカスタマイズしたページなので、愛着もありますが新機能が出たなら是非試してみたい!!

その前に、、、やったことのメモしておこう!
と、、、覚え書きとして記事にしてます。完全自分用ですいません。(^_^;

あと、、、
Cocoonの新機能は近いうち試してみる予定ですが、
いつその気になるかはまだわかりません。(-。-;)
もしかしたら、結局そのままってのもアリかも。( ̄∇ ̄;)ハッハッハ

それでは、また!けろら~でした♪\(^▽^)/

コメント欄

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