WordPressテーマCocoonのブログカード(外部・内部)のデザインをカスタマイズする方法を紹介します。
CSS(スタイルシート/style.css)などの編集は必ず子テーマで行って下さい。
→Cocoonテーマのダウンロード | Cocoon
→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
[…] Cocoonのブログカードのデザインカスタマイズ […]