
こんにちは!サイト管理人のけろら~です♪\(^▽^)/
当記事は、Cocoonスキン「みるらいと」利用の際のトップページカスタマイズ覚え書きです。(ほぼ自分用?)
- ページの表示形式を1カラム
- 新着、人気記事の表示
- 新着、人気記事をタブ切り替えで表示
前提
1.固定ページを新規作成し、「フロントページ」に設定
WP管理画面>設定>表示設定で固定ページをトップページに設定。


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


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


トップページの構成
- ブログヘッダー(デフォルト)
- メニューバー(デフォルト)
- 通知エリア(Cocoon設定から追加)
- 新着・人気記事5件表示(カスタマイズ)
- メインカテゴリー(カスタマイズ)
- カテゴリー別の新着・人気記事(カスタマイズ)
- フッターにプロフィール、タグ、カテゴリーを表示(ウィジェット設定)
上記パーツの中から、4~5のカスタマイズを以下にまとめます。
カスタマイズ箇所
メインカテゴリー
メインのカテゴリーを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件表示
- メインカテゴリーをボックスメニューで表示
- カテゴリー別の新着・人気記事をタブで切り替え表示
ただ、カスタマイズと言っても前スキンの「ミックスグリーン」を元にして調整しただけで、
この記事も以下記事をコピペして「みるらいと」用にちょこっと修正しただけです。(-。-;)


スキンを変更するため、どんなカスタマイズをしたかほぼ自分の記録用な記事で恐縮です。(-。-;)
あと、これまで、シンプルでふわっとした雰囲気でワタシの心を癒やしてくれた「みるらいと」への感謝も言いたいです。
今までありがとうございました!またいつかしれっと戻ってるかもしれません。( -_-)フッ
それでは、また!けろら~でした♪\(^▽^)/