今回は『【コピペOK】ブログカードのデザインをCSSでカスタマイズ【Cocoon】』について初心者にもわかりやすく解説します。
『Cocoonでブログカードをカスタマイズしたい』 『CSSをコピペしてデザインを作りたい』
こんな方におすすめです。
ちなみに僕のブログカードは以下のような感じです。
-
【コピペOK】CSSで目次のデザインをカスタマイズする【Cocoon】
続きを見る
このデザインはパクってもOKです。（※現在はCocoonからAFFINGER6に移行したので、デザインが変わっています。）
CSSでブログカードのデザインをカスタマイズする
今回解説するのは以下の2つです。
- Cocoonでブログカードをカスタマイズする方法
- CSSをコピペしてカスタマイズする方法（文字や背景、アイコンなど）
それでは順番に解説します。
Cocoonでブログカードをカスタマイズする方法
Cocoonテーマを利用している方向けのブログカードのカスタマイズ方法を解説します。
まずは、［Cocoon設定➡︎ブログカード］を選択してください。
このページでは、以下のような設定ができます。
■ ブログカード表示
・ブログカードを表示するか
■ コメント欄のブログカード表示
・コメント欄でブログカードを表示するか
■ サムネイルスタイル
・右側か左側か
■ 日付表示
・なし、更新日、投稿日のどれか
■ リンクの開き方
・新しいタブで開くか
※青いアンダーマーカーのところはオンにしましょう。
この設定では最低限のカスタマイズはできそうですが、文字や色などの設定はできません。
とりあえず事前準備は完了ですね。
CSSをコピペしてデザインをカスタマイズ
続いて、以下の3つをカスタマイズする方法を解説します。
- ブログカードの枠&背景色
- ホバー時のデザイン
- タイトルのデザイン
- スニペット（説明文）のデザイン
それでは順番に解説します。（最後に全てのコードをまとめます）
CSSのコピペ場所
まず、CSSコードを追加する場所を表示しましょう。
管理画面から［外観➡︎テーマエディター］を選択。
［編集するテーマを選択］のところがCocoon Child（子テーマ）であることを確認してください。
もしなってない場合はCocoon Childに設定しましょう。
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よりAFFINGER6の方が収益化しやすいの？【移行すべき理由】
続きを見る
「カスタマイズが難しい…」という方へ
Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。
僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。
そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。
AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。
-
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの？【移行すべき理由】
続きを見る
「収益化するにはCocoonでいいの？」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。
-
【事実】Cocoonで収益化できない本当の理由【解決策あり】
続きを見る
