ブログトップカスタマイズ覚え書き:Cocoonスキン「みるらいと」編

Wordpress
この記事は約6分で読めます。

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

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

前提

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

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

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

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

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

トップページの構成

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

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

カスタマイズ箇所

人気記事・新着記事の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を元に色やタブ部分を変更しています。

本来は、もっとラベルっぽいタブ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;
}

その他トップページ用の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を自分でわかりやすいようにするため、ページに追加しています。

最後に

以上、トップページカスタマイズ「みるらいと」編の覚え書きでした!(^^)

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

  • 新着・人気記事5件表示
  • メインカテゴリーをボックスメニューで表示
  • カテゴリー別の新着・人気記事をタブで切り替え表示

ただ、カスタマイズと言っても前スキンの「ミックスグリーン」を元にして調整しただけで、
この記事も以下記事をコピペして「みるらいと」用にちょこっと修正しただけです。(-。-;)

スキンを変更するため、どんなカスタマイズをしたかほぼ自分の記録用な記事で恐縮です。(-。-;)

あと、これまで、シンプルでふわっとした雰囲気でワタシの心を癒やしてくれた「みるらいと」への感謝も言いたいです。
今までありがとうございました!またいつかしれっと戻ってるかもしれません。( -_-)フッ

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

コメント欄

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