ブログカードを自分の好みにカスタマイズする方法【Cocoon】

ダッシュボードから「外観」→「カスタマイズ」をクリック

上記のような画面が表示されるので 「追加CSS」をクリック

赤枠の部分にコードを貼り付けて、「公開」をクリックすればOK！

では、CSSの書き方を説明します。

CSSの書き方

CSSの書き方は、セレクタで「どこの」、プロパティで「なにを」、値で「どうする」を指定すると決まっています。

Cocoonでは、
〖.blogcard〗がブログカード全般
〖.internal-blogcard〗が内部ブログカード
〖.external-blogcard〗が外部ブログカードのセレクタになります。

ファビコンとURLを消す

ブログカードに表示されているファビコンとURLは消すことができます。
内部ブログカードのみを消していきます。

内部ブログカードのファビコンとURLの部分のセレクタ「.internal-blogcard-footer」・プロパティ「display」（表示）・値「none」（なし）

ブログカードの投稿日・更新日を表示している場合、ここを消すと一緒に消えてしまうので注意してね

背景色の変更

背景の色のプロパティは、「background」・「bsckground-color」のどちらかでOK！

色はカラーコードといって、「6桁の英数字」と前に「＃」をつけて表します

カラーコードは、カラーピッカーというサイトで調べることができます。

ここでは、「ライトシアン」という色を使っています。
「ライトシアン」のカラーコードは、「#e0ffff」

こんな感じに背景色を変えることができました。

「blogcard」の後に「:hover」をつけると、ブログカードにマウスポインタを当てた時に色を変えることができます。

「blogcard」を「blogcard-wrap」にすると、ゆっくりと色が変わるようになります。

枠線の変更

枠線には、実線「solid」・破線「dashed」・2重線「double」の種類があり、太さは「px」（pxの数が大きいほど線が太くなる）で指定していきます。

今回は、.blogcard（ブログカードの）・border（枠線）・3pxsolid#87cefa （3ピクセルの実線でライトスカイブルー）に指定しました。

Cocoonのサイトキーカラーの影響が強い場合は変わらないので
その場合、「! important」を値の最後に追加します
すると、CSSが優先となり、枠線の色が変更されます

タイトル文字の変更

タイトルの文字や色も変えることができます。

タイトル文字のセレクタは「.blogcard-title」
プロパティは「font-size」で、1.3em（エム＝倍数）の文字色は黒です

文字サイズを「px」で変更すると、スマホで見た時に大きくなり過ぎることがあるので注意しよう！！

.blogcard-title{
	font-size: 1.3em;
	color: #000000

「クリックして読む」のボタンを追加する

「記事を読む」のセレクタは「.internal-blogcard:after」
「クリックして読む」ボタンの位置・大きさ・色
フォントの大きさ・太さ・色などを設定します。

「≫」このアイコンを使うには、Cocoonの設定が必要になります。

ダッシュボードから「Cocoon設定」→「全体」をクリック

下にスクロールしていくと、「サイトアイコンフォント」という項目があるので、「Font Awesome 5」になっていたらOK!

「変更をまとめて保存」をクリック

下部のスペースを広げる

抜粋文と「クリックして読む」ボタンが重なってしまった場合の対処法として　下部のスペースを広げる方法を見ていきましょう

セレクタ「.blogcard」に「padding-bottom:50px」の値を追加

.blogcard{
	position: relative;
	padding-bottom:50px;
}