PR ブログ

【コピペOK】ブログカードのデザインをCSSでカスタマイズ【Cocoon】

2021年2月6日

【コピペOK】ブログカードのデザインをカスタマイズする方法【Cocoon】

今回は『【コピペOK】ブログカードのデザインをCSSでカスタマイズ【Cocoon】』について初心者にもわかりやすく解説します。

『Cocoonでブログカードをカスタマイズしたい』 『CSSをコピペしてデザインを作りたい』

こんな方におすすめです。

ちなみに僕のブログカードは以下のような感じです。

【コピペOK】目次のデザインをCSSでカスタマイズする【Cocoon】
【コピペOK】CSSで目次のデザインをカスタマイズする【Cocoon】

続きを見る

このデザインはパクってもOKです。(※現在はCocoonからAFFINGER6に移行したので、デザインが変わっています。)

CSSでブログカードのデザインをカスタマイズする

今回解説するのは以下の2つです。

  • Cocoonでブログカードをカスタマイズする方法
  • CSSをコピペしてカスタマイズする方法(文字や背景、アイコンなど)

それでは順番に解説します。

Cocoonでブログカードをカスタマイズする方法

Cocoonテーマを利用している方向けのブログカードのカスタマイズ方法を解説します。

まずは、[Cocoon設定➡︎ブログカード]を選択してください。

Cocoonでブログカードをカスタマイズする方法

このページでは、以下のような設定ができます。

ブログカード表示
・ブログカードを表示するか
コメント欄のブログカード表示
・コメント欄でブログカードを表示するか
サムネイルスタイル
・右側か左側か
日付表示
・なし、更新日、投稿日のどれか
リンクの開き方
・新しいタブで開くか

※青いアンダーマーカーのところはオンにしましょう。

この設定では最低限のカスタマイズはできそうですが、文字や色などの設定はできません。

とりあえず事前準備は完了ですね。

CSSをコピペしてデザインをカスタマイズ

続いて、以下の3つをカスタマイズする方法を解説します。

  • ブログカードの枠&背景色
  • ホバー時のデザイン
  • タイトルのデザイン
  • スニペット(説明文)のデザイン

それでは順番に解説します。(最後に全てのコードをまとめます)

CSSのコピペ場所

まず、CSSコードを追加する場所を表示しましょう。
管理画面から[外観➡︎テーマエディター]を選択。

[編集するテーマを選択]のところがCocoon Child(子テーマ)であることを確認してください。
もしなってない場合はCocoon Childに設定しましょう。

CSSコードのコピペ場所

style.cssを選択したら、紹介するコードを好きなとこに追加してください。

※よくわからない方は一番下にコードを追加しましょう。

ブログカードの枠&背景色

それでは、コピペ用のCSSコードを紹介します。
まず、ブログカードの枠のカスタマイズがしたい場合は、以下のコードをコピペしましょう。

.blogcard{
border: 2px solid blue;
}

style.cssに追加しても変化がなければ、以下のコードをコピペしましょう。

.blogcard{
border: 2px solid blue !important;
}

『!important』とは、「このコードを優先してください!」というものです。


続いて、背景色をカスタマイズするコードを紹介します。
CSSコードは以下のとおりです。

.blogcard{
background-color: #191970;/*背景色*/
}

こちらも青いアンダーマーカーを変更してカスタマイズしましょう。

ホバー時のデザイン

次は、ホバー時にブログカードのデザインを変える方法について解説します。
ホバー時のデザインとは、マウスカーソルを当てたときのデザインです。

ちなみに僕のデザインはこんな感じ。

通常のブログカードデザイン
ホバー時のブログカードデザイン

少し色が変わるのでわかりやすいですね。
CSSコードは以下のとおりです。

.blogcard:hover{
/*ここでデザインを指定する*/
}

セレクタの後に『:hover』をつけましょう。
これで背景色や文字色を指定することでホバー時のデザインをカスタマイズできます。

例えば以下のとおりです。

.blogcard:hover{
background-color: #eee;
}

こちらのコードを追加するとホバー時にブログカードの背景色が灰色になります。

ブログカードのホバー時のデザイン

文字色や背景色を変えてわかりやすくしましょう。

タイトルのデザイン

続いてタイトルのデザインですね。

タイトルは文字を太くしたり色を変えたりできます。

まず、以下のコードをコピペしましょう。

.blogcard-title {
color: #4086bf;/*文字色*/
line-height: 1.5;/*行間*/
font-size: 1.2em;/*文字の大きさ*/
}

ブログカードのタイトルデザイン

すると、タイトルはこのように表示されると思います。👆

文字のサイズと行間は少し大きく、文字色は水色に指定しました。

スニペット(説明文)のデザイン

説明文のデザインは、基本タイトルと同じです。

.blogcard-snippet {
color: #8f8f8f;
line-height: 1.7;
font-size: 10px;
}

こちらで行間を大きく、文字色を灰色に指定しました。

ブログカードのスニペットデザイン

👆こんな感じになっているかと思います。

全コードまとめ

それでは、今回紹介したコードを全てまとめます。(重複する部分は省いています)

【Cocoon】サイドバーの目次に現在位置を表示させる方法【コピペOK】
【Cocoon】サイドバーの目次に現在位置を表示する【コピペOK】

続きを見る

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考:CocoonとAFFINGER6を比較

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの?」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考:Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-ブログ
-