Cocoonスキン変更の覚え書き-「みるらいと」編

  • URLをコピーしました!
けろら~

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

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

前提

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

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

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

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

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

トップページの構成

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

上記パーツの中から、4~5のカスタマイズを以下にまとめます。

カスタマイズ箇所

人気記事・新着記事の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にしました。

その他トップページ用の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をコピーしました!
目次