【真似OK】Cocoonのインデックスカードをカスタマイズする方法

【真似OK】Cocoonのインデックスカードをカスタマイズする方法
想定読者

Cocoonにインデックスカードを設置したい方「初期設定の方法とカスタマイズの方法を詳しく知りたい」

本記事は、上記の方に向けて執筆しています。

本記事の内容

  • Cocoonインデックスカードの初期設定を行う方法
  • Cocoonインデックスカードのカスタマイズ方法

この記事はCocoonを長年活用していたブロガーが執筆しています。
今は「SWELL」というテーマに変更していますが、サブブログではCocoonを活用しています。

エコおじい

3分程度なので、ぜひ最後までご覧ください。

記事の内容

Cocoonでインデックスカードを初期設定・カスタマイズ

Cocoonインデックスカードの初期設定手順
  1. フロントページデザイン
  2. 並び順
  3. カードタイプ
  4. 枠線の表示
  5. 自動生成抜粋文字数
  6. 投稿関連情報の表示
エコおじい

上記の手順で解説していきます。


フロントページ

フロントページ
フロントページ

まずはフロントページタイプ(β版)を指定しましょう。

  • 一覧(デフォルト)
  • タブ一覧
  • カテゴリごと
  • カテゴリごと(2カラム)→おすすめ
  • カテゴリごと(3カラム)
エコおじい

当サイトでは、見やすいデザインを意識しているため「カテゴリ(2カラム)」を選択しています。
→これで問題ありません。

並び順

並び順
並び順

並び順に関しては、自分の好み次第です。

  • 投稿日(降順)→当サイト
  • 更新日(降順)
  • ランダム
エコおじい

当サイトでは「投稿日(降順)」に設定しています。


カードタイプ

カードタイプ
カードタイプ

Cocoonでは初期機能として「7つほどのカードタイプ」が設定されています。

  1. エントリーカード
  2. 大きなカード(先頭のみ)
  3. 大きなカード
  4. 縦型カード2列→おすすめ
  5. 縦型カード3列
  6. タイルカード2列
  7. タイルカード3列
エコおじい

縦型カード2列にした後に、「スマホ端末で縦型&タイル型のエントリーカードを1カラムにする」の項目にチェックしましょう。

上記のチェック項目を入力すると、スマホ表示でのデザインが整うで必ずチェックしましょう。

枠線の表示

「カードの枠線を表示する」
この項目にチェックを入れましょう。


自動生成抜粋文字数

自動生成抜粋文字数:80文字程度が無難です。

投稿関連情報の表示

  • スニペット(抜粋)の表示:チェック
  • 投稿日の表示:チェック
  • 更新日の表示:好きなように
  • 投稿者名の表示:好きなように
  • コメント数の表示:チェック不要


インデックスカードの完成品

インデックスカードの完成品
インデックスカードの完成品
インデックスカードの完成品
インデックスカードの完成品
エコおじい

このように設定されていれば問題なしです。


【CSS】Cocoonインデックスカードのカスタマイズ

ここからは、CSSでできるCocoonインデックスカードのカスタマイズを行なっていきましょう。

Cocoonインデックスカードのカスタマイズ
  1. ボックスをカスタマイズ
  2. タイトルをカスタマイズ
  3. テキストをカスタマイズ
エコおじい

1つずつ解説していきます。


カスタマイズ例①インデックスのカードボックス

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のカスタマイズ対応をしてくれます。

先ほどの画像の方のように、ココナラには沢山の案件をこなしている方が在籍しているので、カスタマイズ外注したい方はココナラを活用してみてください。

1分以内に完了!無料会員登録はこちら

まとめ:Cocoonインデックスカードの設定・カスタマイズ

ここまでで【真似OK】Cocoonのインデックスカードをカスタマイズする方法の解説は以上です。

本記事の内容
  • Cocoonインデックスカードの設定
  • Cocoonインデックスカードのカスタマイズ
エコおじい

本記事の解説は以上です。
Cocooonのカスタマイズをより深く学びたい方は下記の記事をどうぞ!


Cocoonユーザー向けTwitterアカウント

当サイトの運営者(ally_of_earth)ではブログ関連の情報を随時発信しています。

  1. ブログ運営
  2. アフィリエイト収益化
  3. SEO対策含むWebマーケティング
エコおじい

上記を知りたい方はぜひフォローしてください。


Cocoonではないテーマでブログ運営したい方

Cocoon以外のテーマ、具体的には有料テーマでブログ運営してみたい方は「SWELL」をおすすめします。

エコおじい

今、稼いでいるブロガー達はこぞってSWELLを活用しています。

Cocoonを運営している凄腕のテーマ開発者とも提携しているので、間違い無いです。

有料テーマに挑戦したい方はSWELLがおすすめです。


Cocoonを本格的にカスタマイズしたい方

→プログラミングを学びましょう。

Cocoon含む、WordPressを扱うためには下記の言語が必要です。

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
エコおじい

当サイトで、すべての言語を学べます。
カスタマイズを本格的に始めたい方はぜひご覧ください。

【真似OK】Cocoonのインデックスカードをカスタマイズする方法

この記事が気に入ったら
フォローしてね!

記事の内容