前回は検索ボックスのカスタマイズ方法を解説しました。
今回は、インデックスをカスタマイズする方法について紹介させていただきます。
当ブログ『ムササビやねん』のCSSをもとにカスタマイズ手順を紹介させていただきます！
Cocoonカスタマイズ第5弾として、インデックスのカスタマイズについてご紹介させていただきます。
▼この記事はこんな方におすすめ
- ・Cocoonのインデックスを使ったことがない
- ・Cocoonでトップページをカスタマイズしたい
- ・ちょっとおしゃれなトップページにしたい
インデックスをカスタマイズして、おしゃれなトップページを作成しましょう！
インデックスの完成イメージ
今ご覧いただいている、当ブログのトップページが完成イメージです！
▼特徴
- ・タブボタンにマウスを合わせると、文字の色が変わる
- ・タブボタンに影をつけて、押した感をUP！
- ・新着記事をnewに変更
- ・エントリーカードにマウスを合わせると少し浮く
インデックスの設定方法
▼注意！！！
- 設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
まずはじめにインデックスを設定します。
インデックスを設置するには①サイドバーのCocoon設定→②インデックスで設定できます。
フロントページタイプ（β版）
表示形式はトップページの記事の表示形式を設定します。
当ブログの設定は『タブ一覧』です。
今回はタブ一覧を選択した際のカスタマイズ方法を紹介させていただいてます！
他を選択した場合のカスタマイズ方法は紹介していないのでご了承ください。
表示カテゴリーはタブ一覧で選択できるカテゴリーを設定します。
タブボタンの順番を変更したい場合は、『カテゴリ表示の順番を並び替える場合はこちら』を選択して、左から表示したいカテゴリーのIDを順番に入力してください。
入力例）1,9,33
カテゴリーのIDは ①サイドバーの投稿→②カテゴリーで確認できます。
並び順
記事の表示順を設定することができます。
当ブログの設定は『投稿日（降順）』です。
カードタイプ
トップページのエントリーカードの表示形式を設定します。
当ブログの設定は『縦型カード2列』です。
色々設定してみて、お気に入りの表示形式に設定してください！
『スマホ端末で縦型＆タイル型のエントリーカードを1カラムにする』にチェックを入れると、スマホから閲覧した時に2列でなく1列で表示されます。
当ブログの設定は『ON（チェック）』です。
スマホで2列に表示されると、かなり見づらく感じた為です！
枠線の表示
『カードの枠線を表示する』にチェックを入れると、エントリーカードに枠線が表示されます。
当ブログの設定は『OFF（チェックなし）』です。
自動生成抜粋文字数
記事の紹介文の文字数を設定します。
当ブログの設定は『0』です。
省略文字列
記事の紹介文が、上で設定した自動生成抜粋文字数を超えた場合に表示する文字を設定します。
当ブログの設定は『デフォルト（…）』です。
投稿関連情報の表示
エントリーカードに表示する情報を設定します。
当ブログでは『投稿日の表示のみON（チェック）』です。
除外カテゴリー
新着記事などに表示させたくないカテゴリーの記事があるときに、チェックを入れてください。
Cocoon設定はここまで！
CSSで装飾をカスタマイズ
続いてCSSを編集していきます。
CSSは①サイドバーのテーマファイルエディタ→②スタイルシート(style.css)で編集できます。
▼注意！！！
- ・設定の変更やCSSを修正する際はバックアップを取ることをお忘れなく！！！
- ・スタイルシート(style.css)が選択されていることを再度確認してください！！！
当サイトはスキンをなしに設定しています。
スキンを設定していると上手くいかない可能性があります。ご了承ください
/* ①タブ一覧*/
.index-tab-button {
font-size: 16px !important;
transition: 0.3s;
padding: 9px 13px !important;
background-color: #E9E8E6 !important;
box-shadow: 2px 6px 10px -5px rgb(0 0 0 / 25%);
}
/* ②タブ一覧(hover) */
@media screen and (min-width: 980px) {
.index-tab-button:hover {
color: #8cab8b;
}
}
/* ③タブ一覧（選択カテゴリー） */
#index-tab-1:checked~.index-tab-buttons .index-tab-button[for=index-tab-1],
#index-tab-2:checked~.index-tab-buttons .index-tab-button[for=index-tab-2],
#index-tab-3:checked~.index-tab-buttons .index-tab-button[for=index-tab-3],
#index-tab-4:checked~.index-tab-buttons .index-tab-button[for=index-tab-4]{
color: #FFF;
background: #8cab8b !important;
border-color: #728f71;
font-weight: 500;
transform:scale(0.97,0.97);
-webkit-transform:scale(0.97,0.97);
-moz-transform:scale(0.97,0.97);
}
/* ④エントリーカード */
.entry-card-wrap {
padding: 0px;
margin-top: 11px;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
/* ⑤エントリーカード(hover) */
@media screen and (min-width: 980px) {
.entry-card-wrap:hover {
background-color: #F8F8F6;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
transform: translate(0px,-5px);
}
}
/* ⑥エントリーカード - 上部 */
.entry-card-thumb-image {
border-radius: 8px 8px 0px 0px;
}
/* ⑦エントリーカード - 下部 */
.entry-card-content {
padding: 3px 15px 30px 15px;
}
/* ⑧エントリーカード - 投稿日・更新日 */
.post-date, .post-update {
padding: 0px 10px 7px 0px;
}
/* ⑨エントリーカード - タイトル */
.card-title {
color: #4D4435;
}
/* ⑩エントリーカードのカテゴリーを消す */
.entry-card .cat-label{
display: none;
}
/* ⑪もっと見るボタン */
.list-more-button {
font-size: 16px !important;
transition: 0.3s;
padding: 4px 18px !important;
background-color: #E9E8E6 !important;
border: 1px solid #ccc;
box-shadow: 2px 6px 10px -5px rgb(0 0 0 / 25%);
}
/* ⑫もっと見るボタン (hover)*/
@media screen and (min-width: 980px) {
.list-more-button:hover {
color: #8cab8b;
}
}
/* ⑬現在ページ */
.pagination .current {
background-color: #8cab8b;
color: #fff;
border-radius: 50%;
border: none;
}
/* ⑭次のページリンクを消す */
.pagination-next {
display: none;
}このコードをコピーして、スタイルシート(style.css)に貼り付けてください。 皆様のブログに合わせて調整する方法を解説します！
①タブ一覧
タブ一覧は表示する記事のカテゴリーを選択するボタンのことです！
font-sizeでタブ一覧ボタンの文字の大きさを設定しています。
お好きな大きさに変更してください。
transitionでボタンをクリックした時の、縮小するまでの時間を設定しています。
速くしたければ値を小さく、遅くしたければ値を大きくしてください。
background-colorでタブ一覧ボタンの色を設定しています。
お好きな色に変更してください。
②タブ一覧(hover)
colorでタブ一覧ボタンにマウスを合わせた時の文字の色を設定しています。
お好きな色に変更してください。
③タブ一覧（選択カテゴリー）
colorでタブ一覧ボタンの内、選択カテゴリーの文字色を設定しています。
お好きな色に変更してください。
backgroundでタブ一覧ボタンの内、選択カテゴリーボタンの色を設定しています。
お好きな色に変更してください。
transform、-webkit-transform、-moz-transformでタブ一覧ボタンの内、選択カテゴリーのボタンの縮小サイズを設定しています。
もっと縮小したい場合は、6つある0.97を全て小さくしてください。
ボタンを縮小することで押した感をUPしています！
④エントリーカード
エントリーカードは、記事のタイトルやアイキャッチを表示するカードのことです！
エントリーカードの装飾をしています。
変更なしで問題ないです。
⑤エントリーカード(hover)
エントリーカードにマウスを合わせた時の装飾をしています。
変更なしで問題ないです。
⑥エントリーカード – 上部
エントリーカードの上部の装飾をしています。
変更なしで問題ないです。
⑦エントリーカード – 下部
エントリーカードの下部の装飾をしています。
変更なしで問題ないです。
⑧エントリーカード – 投稿日・更新日
エントリーカードの右下に表示される投稿日・更新日の装飾をしています。
変更なしで問題ないです。
⑨エントリーカード – タイトル
エントリカードの記事タイトルの文字の色を設定しています。
お好きな色に変更してください。
⑩エントリーカードのカテゴリーを消す
エントリーカード左上に表示されるカテゴリーを消しています。
消したくない場合は、削除してください。
当ブログではアイキャッチにカテゴリーを入れているので、エントリーカードからは消しています。
⑪もっと見るボタン
font-sizeでもっと見るボタンの文字の大きさを設定しています。
お好きなサイズに変更してください。
background-colorでもっと見るボタンの色を設定しています。
お好きな色に変更してください。
phpで『もっと見る』の文字を、『read more』に変更しています。
変更方法は後で解説しています！
⑫もっと見るボタン (hover)
colorでもっと見るボタンにマウスを合わせた時の文字の色を設定しています。
お好きな色に変更してください。
⑬現在ページ
background-colorで表示されているページの背景色を設定しています。
お好きな色に変更してください。
colorで表示されているページの文字の色を設定しています。
お好きな色に変更してください。
⑭次のページリンクを消す
『次のページ』のリンクを非表示にしています。
表示したければ削除してください。
CSSでの装飾はここまで！もう少しです！
phpでもっと見るボタンの文字を変更
続いてphpを編集していきます。
phpは①サイドバーのテーマファイルエディタ→②テーマのための関数(functions.php)で編集できます。
▼注意！！！
- ・設定の変更やphpを修正する際はバックアップを取ることをお忘れなく！！！
- ・テーマのための関数(functions.php)が選択されていることを再度確認してください！！！
add_filter('more_button_caption', function ($caption){
return 'read more';
});
このコードをコピーして、テーマのための関数(functions.php)に貼り付けてください。
もっと見るをread moreに変更
他の文字に変更したい場合はread moreを変更してください。
以上です！お疲れ様でした！
まとめ
今回はCocoonのインデックスのカスタマイズについてご紹介させていただきました。
第6弾、吹き出しのカスタマイズはこちら！
今回の記事は以上となります。
最後までお読みいただき、ありがとうございました！