Cocoonのブログカードのデザインカスタマイズ

WordPressテーマCocoonのブログカード（外部・内部）のデザインをカスタマイズする方法を紹介します。

カスタマイズ内容

↓

上（Cocoonのグローバルナビのカスタマイズ方法）が内部ブログカード、下（スポーツナビ）が外部ブログカードです。

Cocoonデフォルトのブログカードの枠線を消し、代わりに背景色を薄くつけました。
内部リンクのフッター（サイトのアイコンとドメイン名）も非表示にしています。

▼実際のブログカードはこちら（押すと飛びます）

Cocoonのグローバルナビのカスタマイズ方法（ヘッダー固定、ホバー時に下線）

Cocoonのグローバルナビ（ヘッダーメニュー）のカスタマイズを紹介します。画面スクロール時にヘッダーを上部固定表示にする方法と、マウスホバー時に下線をつける方法です。

simplicity-hacks.tokyo

https://sports.yahoo.co.jp/

Cocoonのブログカードのデザインをカスタマイズする方法

今回のブログカードのデザインカスタマイズはCSSの編集のみです。
コピペでOKです。

style.cssをWordpress管理画面左側の[外観]ー[テーマエディター]で編集するか、FTPクライアントソフトなどでダウンロード、編集、アップロードをして下さい。

CSS

/************************************
** ブログカード
************************************/
/*内部ブログカードのフッター非表示*/
.internal-blogcard-footer{
display:none;
}
/*背景色*/
.blogcard-wrap {
background-color: #f8f8f8;
}
/*枠線なし*/
.blogcard{
border:none;
}

背景色の変更

背景色を変更したい場合は、「.blogcard-wrap」と書いてある箇所の、「background-color: #f8f8f8;」の値を変更して下さい。

【サンプル：濃いめのグレー】

/*背景色濃いめのグレー*/
.blogcard-wrap {
background-color: #e2e3e5;
}

枠線の有無/色/種類

枠線の有無/色/種類を変更したい場合は、「.blogcard」と書いてある箇所の、「border:none;」の値を変更して下さい。

【サンプル：背景色＋枠線】

/*背景色＋枠線*/
.blogcard{
border: 1px solid #eee;
}
.blogcard-wrap {
background-color: #f8f8f8;
}

【サンプル：二重線＋角の丸みなし】

/*二重線＋角の丸みなし*/
.blogcard{
border: 4px double #717171;
border-radius: 0;
}

さいごに

ブログカードのデザインはCSSだけでもけっこう変更できるので、初心者でも安心してカスタマイズできる箇所だと思います。