【Cocoon】記事本文ブログカードデザインCSS

記事執筆者

ぽてサポートのメリット

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

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

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

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

今回は、記事本文のブログカードをCSSでデザインします。

この記事の流れ

記事本文ブログカードCSS

すること

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

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

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

注意

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

コピペ用

/************************************
****　記事本文　ブログカード
************************************/
.blogcard {
padding-bottom:.8%;
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
.blogcard-label{
	background-color:#75b1a9;/*ラベルの色変更はこちら*/
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf:hover{
background-color: #fafafa;
box-shadow:none;
transform: none;
}
.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
.internal-blogcard::after,
.external-blogcard::after{
content: "続きを読む ≫"; 
position: absolute;
bottom: 0.7em;
right: 1em;
font-size: 0.7em;
background-color: #acd0c0;/*続きを読むの背景色変更はこちら*/
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}
.blogcard-content{
max-height: none;
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}
.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
text-align: justify;
}
@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}

以上で記事本文ブログカードのデザインは完了です。

記事本文ブログカードデザイン｜まとめ

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

• background-color:#75b1a9;/*ラベルの色変更はこちら*/
• background-color: #acd0c0;/*続きを読むの背景色変更はこちら*/

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

この記事は以上です。

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

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

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

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

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

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

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

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

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

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

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

この記事は以上です。