おにちゃん塾運営者に関する情報

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

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

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

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

本記事の内容

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

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

おにちゃん

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

記事の内容

サイト運営者

ブログアイコン例:おにちゃん
おにちゃん(22歳)
@onityanzyuku01

大学4年|経済学部(現在休学中)

おにちゃん塾を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アカウント

おにちゃん塾の運営者(@onityanzyuku01)ではブログ関連の情報を随時発信しています。

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

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


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

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

おにちゃん

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

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

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


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

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

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

  1. HTML
  2. CSS
  3. JavaScript(React)
  4. PHP(WordPress)
おにちゃん

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


\ おにちゃん塾に清き一票を /

おにちゃん塾はランキングサイトに登録しています。

役立ったと言う方はこちらのバナーをクリックしてください。
クリックするだけで、僕の順位が上がります(๑>◡<๑)

ブログランキング・にほんブログ村へ
URLをコピーする
URLをコピーしました!
記事の内容
閉じる