想定読者Cocoonにインデックスカードを設置したい方「初期設定の方法とカスタマイズの方法を詳しく知りたい」
本記事は、上記の方に向けて執筆しています。
本記事の内容
- Cocoonインデックスカードの初期設定を行う方法
- Cocoonインデックスカードのカスタマイズ方法
この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」
というテーマに変更していますが、サブブログではCocoonを活用しています。
エコおじい3分程度なので、ぜひ最後までご覧ください。
Cocoonでインデックスカードを初期設定・カスタマイズ
- フロントページデザイン
- 並び順
- カードタイプ
- 枠線の表示
- 自動生成抜粋文字数
- 投稿関連情報の表示
エコおじい上記の手順で解説していきます。
フロントページ
まずはフロントページタイプ(β版)を指定しましょう。
- 一覧(デフォルト)
- タブ一覧
- カテゴリごと
- カテゴリごと(2カラム)→おすすめ
- カテゴリごと(3カラム)
エコおじい当サイトでは、見やすいデザインを意識しているため「カテゴリ(2カラム)」を選択しています。
→これで問題ありません。
並び順
並び順に関しては、自分の好み次第です。
- 投稿日(降順)→当サイト
- 更新日(降順)
- ランダム
エコおじい当サイトでは「投稿日(降順)」に設定しています。
カードタイプ
Cocoonでは初期機能として「7つほどのカードタイプ」が設定されています。
- エントリーカード
- 大きなカード(先頭のみ)
- 大きなカード
- 縦型カード2列→おすすめ
- 縦型カード3列
- タイルカード2列
- タイルカード3列
エコおじい縦型カード2列にした後に、「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」の項目にチェックしましょう。
上記のチェック項目を入力すると、スマホ表示でのデザインが整うで必ずチェックしましょう。
枠線の表示
「カードの枠線を表示する」
この項目にチェックを入れましょう。
自動生成抜粋文字数
自動生成抜粋文字数：80文字程度が無難です。
投稿関連情報の表示
- スニペット(抜粋)の表示：チェック
- 投稿日の表示：チェック
- 更新日の表示：好きなように
- 投稿者名の表示：好きなように
- コメント数の表示：チェック不要
インデックスカードの完成品
エコおじいこのように設定されていれば問題なしです。
【CSS】Cocoonインデックスカードのカスタマイズ
ここからは、CSSでできるCocoonインデックスカードのカスタマイズを行なっていきましょう。
- ボックスをカスタマイズ
- タイトルをカスタマイズ
- テキストをカスタマイズ
エコおじい１つずつ解説していきます。
カスタマイズ例①インデックスのカードボックス
a.entry-card-wrap.a-wrap.border-element.cf{
border: 1px solid white;
padding: 16px;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}上記のコードでCocoonインデックスカードをカスタマイズすることができます。
こんな感じで、今時のカードデザインを作ることができます。
カスタマイズ例②カードタイトル
.entry-card-title.card-title.e-card-title {
font-size: 23px;
padding: 10px 0px;
}カードタイトルは上記のclass名を指定することで、カスタマイズできます。
タイトルサイズ、フォント、色などを変えたい方はこちらのclassをお使いください。
カスタマイズ例③カードテキスト
.entry-card-snippet.card-snippet.e-card-snippet{
font-size: 16px;
margin: 10px 0px;
}カードテキストをカスタマイズしたい方は上記のclass名をお使いください。
エコおじいタイトルと同じように、カラーやサイズを変更することができます。
WordPressカスタマイズ外注したい方
カスタマイズを外注したい方は「ココナラ」がおすすめです。
このように、ココナラでは3000円〜5000円でWordPressのカスタマイズ対応をしてくれます。
先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。
まとめ：Cocoonインデックスカードの設定・カスタマイズ
ここまでで「【真似OK】Cocoonのインデックスカードをカスタマイズする方法」の解説は以上です。
- Cocoonインデックスカードの設定
- Cocoonインデックスカードのカスタマイズ
エコおじい本記事の解説は以上です。
Cocooonのカスタマイズをより深く学びたい方は下記の記事をどうぞ！
Cocoonユーザー向けTwitterアカウント
当サイトの運営者（ally_of_earth）ではブログ関連の情報を随時発信しています。
- ブログ運営
- アフィリエイト収益化
- SEO対策含むWebマーケティング
エコおじい上記を知りたい方はぜひフォローしてください。
Cocoonではないテーマでブログ運営したい方
Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。
エコおじい今、稼いでいるブロガー達はこぞってSWELLを活用しています。
Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。
有料テーマに挑戦したい方はSWELLがおすすめです。
Cocoonを本格的にカスタマイズしたい方
→プログラミングを学びましょう。
Cocoon含む、WordPressを扱うためには下記の言語が必要です。
- HTML
- CSS
- JavaScript(React)
- PHP(WordPress)
エコおじい当サイトで、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。
