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

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

CSS(スタイルシート/style.css)などの編集は必ず子テーマで行って下さい。
Cocoonテーマのダウンロード | Cocoon
スポンサーリンク

カスタマイズ内容

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

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

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

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

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だけでもけっこう変更できるので、初心者でも安心してカスタマイズできる箇所だと思います。

Comments

  1. […] Cocoonのブログカードのデザインカスタマイズ […]

タイトルとURLをコピーしました