【Cocoon】トップページの設定方法とカスタマイズ

WordPressの無料テーマ「Cocoon」のトップページは「タブ切り替え」や「カテゴリごと」で表示できます。

Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法

フロントページの表示形式を変更する設定方法です。Cocoonではこれまで一般的なインデックスリストしかありませんでした。

今回はCocoonを使って間もない方に、

トップページの設定方法や、簡単にカスタマイズする方法を紹介します。

プー太郎

トップページは「ホームページ」や「フロントページ」とも呼ばれているよ。

Cocoonのトップページは表示形式が5つあります
Cocoon トップページの設定方法
トップページ「カテゴリーごと」のカスタマイズ
トップページ「タブ一覧」のカスタマイズ
最後に

Cocoonのトップページは表示形式が5つあります

Cocoonはどんなトップページが作れるのかを最初に紹介します。

Cocoonのトップページの表示形式は全部で5つあります。

デフォルト

記事が新着順（または更新順）に並んでいて、グローバルナビメニューなどによってカテゴリーごとに記事一覧を表示させることもできます。

新着順、更新順のどちらにするかは、「Cocoon設定」→「インデックス」タブの「並び順」で設定します。

トップページに表示する記事の数は、「設定」→「表示設定」の「1ページに表示する最大投稿数」で設定します。

タブ一覧

「新着記事一覧」と「カテゴリーごとの記事一覧」がタブで切り替えられます。

「新着記事」以外、タブに表示できるカテゴリーは最大3つまでです。

プー太郎

カテゴリー数の少ないサイトなら、タブをグローバルメニューの代用としても使えそうだよ。

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方

アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

カテゴリーごと

「新着記事」の下に、新着記事と同じ大きさのカードで「カテゴリーごとの記事一覧」が表示されます。

こちらはカテゴリー数に制限はありません（これから出てくる2カラムと3カラムのトップページも制限がありません）。

カテゴリーごと（2カラム）

「新着記事」の下に「カテゴリーごとの記事一覧」が2列で表示されます。

カテゴリーごと（3カラム）

「新着記事」の下に「カテゴリーごとの記事一覧」が3列で表示されます。

プー太郎

3カラムのトップページは、サイドバーを表示しないレイアウト向けだそうです。

Cocoon トップページの設定方法

これらのトップページは「Cocoon 設定」の「インデックス」タブで設定します。

トップページの表示形式を選ぶ

５つあるトップページの表示形式の中から好きなものを選びます。

「一覧（デフォルト）」以外を選択した場合は、表示するカテゴリーも選びます。

プー太郎

表示形式で「タブ一覧」を選択した場合、表示できるカテゴリーは3つまでだよ（4つ目からは選択しても無視されます）。

カテゴリーの順番を決める

カテゴリーの順番を指定するには、「カテゴリー表示の順番を並び替える場合はこちら」を押して、表示したい順番でカテゴリーIDを入力します（IDとIDはカンマで区切ります）。

カテゴリーIDの調べ方ですが、WordPressメニューの「投稿」→「カテゴリー」をクリックします。

するとカテゴリーIDが出てきます。

カード表示数を変更する

トップページの表示形式で「カテゴリーごと」を選択すると、「新着記事」と「カテゴリーごとの記事」の表示されるカード数を設定できます。

デフォルトはそれぞれ4つになっていますが、「表示数を変更する場合はこちら」を押して表示数の変更が可能です。

トップページ「カテゴリーごと」のカスタマイズ

ここからはトップページのカスタマイズのやり方です。

色や数値などは、ご自身の好みで変更してください。

色を探す場合は、カラーコードの一覧表か、HTMLカラーコードが便利です。

カスタマイズの方法

サイトをカスタマイズするには「外観」→「テーマファイルエディター」を押します。

するとスタイルシートというものが出てきます。

Cocoonをカスタマイズするには、「Cocoon Child」を選択して矢印のあたりにこれから出てくるCSSを貼り付けます。

CSSを貼り付けたあと、下にある「ファイルを更新」を押すと、デザインなどが変わります。

スタイルシートの編集は、何かあってもすぐに元に戻せるようにバックアップをとるようにしてください（スタイルシートの中身を全てコピーしてメモ帳などに保存すればOKです）。

タイトル部分の色や大きさなどを変える

トップページ「カテゴリーごと」には、「新着記事」や「カテゴリー名」と書かれたタイトル部分があります。

下のCSSを使うと、タイトル部分の色や大きさを変えることができます。

/* トップページのタイトル変更 */
.list-title-in{
	color: #67c5ff;/*文字の色*/
	font-size: 24px;/*文字の大きさ*/
}

.list-title-in:before, .list-title-in:after {
	background-color: #67c5ff;/*線の色*/
}

/* */（コメント）で囲んだ部分はメモ代わりとして使えます。あとから何のCSSか一目でわかるので残しておくと便利です（/* */で囲めば、何を書いてもスタイルシートには影響ありません）。

文字の横にある線は消すこともできます。

文字の色と大きさを変えて、横の線を消す場合は、下のCSSを使います。

.list-title-in{
	color: #67c5ff;/*文字の色*/
	font-size: 24px;/*文字の大きさ*/
}

.list-title-in:before, .list-title-in:after {
	display: none;/*文字横の線を消す*/
}

プー太郎

文字の色（カラーコード）や文字の大きさなどを変えて、いろいろ試してみてね。

タイトル部分のデザインを変える

こんなふうにタイトル部分のデザインをガラリと変えることも可能です。

初心者の方がデザインを変えるCSSを自分で作るのは難しいと思いますが、簡単に作れる方法を紹介します。

上のタイトル部分は、こちらのCSSを使って表示しています。

.list-title-in{
	display: inline-block;/*表示形式*/
	padding: 0.5em 3em;/*文字の上下左右の余白*/
	font-size: 18px;/*文字の大きさ*/
	background: #668ad8;/*ボタン色*/
	color: #FFF;/*文字色*/
	border-bottom: solid 4px #627295;/*下線の種類・太さ・色*/
	border-radius: 3px;/*角の丸み*/
}

.list-title-in:before, .list-title-in:after {
	display: none;/*文字の横の線を消す*/
}

このCSSは多少アレンジしてあるものの、サルワカさんのこちらの記事にのっているデザインを使わせていただきました。

CSSで作る！押したくなるボタンデザイン100（Web用）

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。

もともとはボタンを作るためのCSSですが、このCSSでタイトルの「囲み枠」を作ることができます。

サルワカさんの記事の「1.立体的なボタン」をご覧下さい。

サルワカさんのCSSで作る！押したくなるボタンデザイン100（Web用）より

上のCSSなら「.btn-square{ほにゃらら}」の「ほにゃらら」部分をそっくりコピーします。

この「ほにゃらら」部分を下の/* この行はすべて消して～*/部分に貼り付けます。

.list-title-in{
	/*この行はすべて消して、サルワカさんのCSSを貼り付ける*/
}

.list-title-in:before, .list-title-in:after {
display: none;/*文字の横の線を消す*/
}

こんな感じです。

これで「ファイルを更新」を押せばデザインが変わっているはずです。

色などは好みのものに変更してください。

同じ章にある「いっそのこと文字ごと立体に」でタイトル部分を作るとこんな感じに。

いくつかサルワカさんのデザインを試してみましたが、ほぼそのままコピー&ペーストでいけました。

文字がうまく表示されないものや、バランスの悪いものは「padding（文字周りの余白）」や「width（横幅）」の数値を変えて調整してみてください。

たとえば「padding: 0.5em 1em;」というのは上下の余白が0.5文字分、左右の余白が1文字分という意味です。

これを「padding: 1em 2em;」にすると上下左右の余白は2倍になります。

0.5emと1emの間には、必ず半角スペースを入れてください。CSSで全角スペースは使用できません。全角スペースを使うとCSSが効かなくなります。

文字の大きさは「font-size:○○px;」を追加すると変更できます。

CSSの書き方をもっと詳しく知りたい方は、サルワカさんのこちらの記事を参考にしてください。

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

初心者でも理解できるよう0からCSSについて解説します。CSSとは何か？からCSSの書き方まで丁寧に図解していきます。

トップページ「タブ一覧」のカスタマイズ

トップページ「タブ一覧」のタブ部分もカスタマイズが可能です。

今回紹介しているCSSは、もしかすると、もっとスマートな書き方があるのかもしれません。

しかしそこはご愛敬でお願いします（笑）

/* トップページのタブ（選択前） */
.index-tab-button{
	color: #668ad8;/*文字色*/
	font-size: 16px!important;/*文字の大きさ*/
	background: #e1f3ff!important;/*背景色*/
	border: solid 1px #668ad8!important;/*枠線の種類・太さ・色*/
}

/* トップページのタブ（選択後） */
#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: #668ad8!important;/*選択後の背景色*/
	font-weight: 400;/*文字の太さ*/
}

枠線が必要なければ「border:」から始まる部分を「border: none!important;/*枠線なし*/」に変更してください。

CSSについて補足ですが、色を指定する「#6桁」のカラーコードは、大文字、小文字のどちらを使っても大丈夫です。

ただし必ず、CSSに使う文字はすべて半角文字を使ってください。

スペースを含めて全角文字が1つでも入るとCSSは効かなくなります。

最後に

お疲れさまでした！

CSSを使って表示が変化するのは面白くないですか？

もし、CSSがうまく効かないときは

1. 誤字、脱字がないかを確認する（1文字でも間違っているとCSSは効きません）
2. スペースを含めて全角文字が混じっていないかを確認する
3. どうしてもCSSが効かないときは、セミコロン（;）の前に「!important」をつけてみる

をやってみてください。

本日は最後まで読んでいただき、ありがとうございました(^_^)