【Cocoon】ホームカードデザインCSS

記事執筆者

ぽてサポートのメリット

• CSSを知らなくてOK！
• SEO対策済みです
• サイトスピードまでサポート
• ブログイラスト入手方法付き
• SEO対策完全ロードマップ付き
• Lineで一人一人サポートしていきます

無料版デザインに含まれていないもの

• 文字サイズ・文字色・文字間
• 一部css
• 配色ごとの心理効果マニュアル
• ブログ相談、Lineサポート

サイトレイアウトのCSSをコピペしていない方は、先に下記記事をお読みください。

今回は、ホームカードをCSSでデザインします。

この記事の流れ

Cocoon設定｜ホームカード

1：wordpressから　Cocoon設定　→　インデックス　をクリックします。

表示形式は、デフォルトのままでOKです。

2：そのまま、下にスクロールします。

チェックする項目

• 投稿日（降順）
• 縦型カード2列
• 投稿関連情報の表示

以上でホームカードの設定は完了です。

ホームカードデザインCSS

すること

• テーマファイルをクリック
• CSSをコピペ

1：外観　→テーマファイルエディター　をクリック

2：テーマファイルエディターにCSSをコピペします。

注意

• できればバックアップすること
• CocoonChildのstyle.cssにコピペすること

コピペ用

/************************************
****　エントリーカード
************************************/
.entry-card{
	border-radius:10px 10px 0 0;
}
a.entry-card-wrap.a-wrap.border-element.cf{
padding:0 0 .5em;
border-radius:10px;
background-color:white;
width:48%;
margin-bottom:2em;
}
a.entry-card-wrap.a-wrap{
transition: all .1s;
}
a.entry-card-wrap.a-wrap:hover {
transform: translateY(-1px);
transition: all .1s;
background-color: #fff;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:150px;
border-radius:10px 10px 0 0/ 10px 10px 0 0;
overflow:hidden;
display: flex;
justify-content: center;
align-items: center;
}
.e-card-thumb .cat-label{
margin-left:.8em;
}
@media screen and (max-width: 1100px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:120px;
}}
@media screen and (max-width: 1023px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:180px;
}
a.entry-card-wrap.a-wrap:hover {
transform: none;
background-color: #f7f7f7;
}}
@media screen and (max-width: 900px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:160px;
}}
@media screen and (max-width: 750px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:130px;
}}
@media screen and (max-width: 600px){
figure.entry-card-thumb.card-thumb.e-card-thumb{
max-height:250px;
}
a.entry-card-wrap.a-wrap.border-element.cf{
margin:.5em 1em!important;
}
.ect-vertical-card .entry-card-wrap {
width: 95%!important;
}
}
@media screen and (max-width: 480px){
.e-card-thumb .cat-label{
margin-left:1em;
}}
@media screen and (max-width: 1023px){
div#list a {
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}
}
@media screen and (min-width: 601px) and (max-width: 834px){
div#content.content.cf{
margin:1em;
}}
h2.entry-card-title.card-title.e-card-title{
font-size:18px;
color:#696969;
font-weight:bold;
text-align:center;
line-height:1.8em;
margin-top:3em;
margin-bottom:1em;
padding: 0 1.5em 0;
}
.entry-card-snippet{
-webkit-line-clamp: unset;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:14px;
color:#7b7b7b;
text-align:center;
border-top:3px dotted #75b1a9;/*点線の色変更はこちら*/
line-height:1.8em;
padding-top:0.6em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
max-height:20em;
}
@media (max-width:834px){
h2.entry-card-title.card-title.e-card-title{
font-size: 1.15em;
font-weight:bold;
line-height:1.7em;
padding: 1.5em .8em 1em;
margin:0;
}
.entry-card-snippet.card-snippet.e-card-snippet{
font-size:13px;
text-align:center;
border-top:3px dotted #75b1a9;/*点線の色変更はこちら*/
line-height:1.8em;
padding:1em 0.5em 0;
margin: 0 1em 1.5em;
}
main.main, div.sidebar {
padding:0;
}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
margin-right:1.5em!important;
color:#7b7b7b;
font-size:.86em;
}
.eye-catch .cat-label, .cat-label{
font-size:.7em;
border-radius:10px;
margin:0.5em;
padding:0 0.5em 0;
background-color:#75b1a9;/*カテゴリーラベルの色変更はこちら*/
color:#fff;
}
div.admin-pv{/*閲覧数を非表示*/
display:none;
}

以上でホームカードのデザインは完了です。

ホームカードデザイン｜まとめ

テーマファイルエディターをいじるので、重要なコードを消さないように気をつけてください。

• border-top:3px dotted #75b1a9;/*点線の色変更はこちら*/
• border-top:3px dotted #75b1a9;/*点線の色変更はこちら*/
• background-color:#75b1a9;/*カテゴリーラベルの色変更はこちら*/

上記のcss変更で、色を変えられます。

この記事は以上です。

他の場所のCSSも下記記事にまとめています。

アフィリエイト作成〜収益化｜よくある質問 Q＆A

おすすめサーバーロリポップ｜会社情報・運営情報

ロリポップ会社情報・運営情報

• サービス名：ロリポップ（LOLIPOP)
• 運営会社：GMOペパボ株式会社
• 所在地：〒150-8512   東京都渋谷区桜丘町26番1号セルリアンタワー
• サービス内容：フリーランス向け金融支援サービス
• 代表：佐藤 健太郎

2003年から運営されており、大手で安心できますし、サーバーのスピードもトップクラスです。

アフィリエイト稼ぎ方｜効率重視

アフィリエイトサイト｜完全効率重視

• 手順1　wordpressを導入
• 手順2　ASPにて自分が宣伝しやすい商品を選択
• 手順3　商品が決まったら、サイトの構成を考える
• 手順4　記事内容を充実させて検索順位をあげる

ブログのロードマップを作成しました。ぜひ参考にしてください。

このページで解説した内容

この記事は以上です。