cocoonブログカード「続きを読む」追加! style.cssにコピペのみ

ブログ

こんにちは、ひつじ先輩 (@baacash_)です。

Cocoonのブログカードに、「続きを読む」ボタンを追加するカスタマイズを紹介します。

 

当ブログのブログカード(内部リンク)は、こんな感じです。

0PV→6万PV! 読まれないブログにやったすべて
ブログの収益・PVを公開。読まれないブログを読まれるようにするために、やってよかったことを重要な順で書く。正解を知らないまま、記事を書き続けるのは無謀。PVはスモールワードから発生する。

 

カードの右下、「読んでみる」ボタンを表示させるCSSを紹介します。

「リンクだ」と認知されやすくなるので、クリック率アップが期待できます。

 

style.cssに、コードをコピペするだけ。

function.phpは編集せず、プラグインも使いません。

 

  • 「続きを読む」などの言葉
  • ボタンの色

はカンタンに変えられます。

 

一応、ボタンの上にマウスを持っていくと、ボタンが半透明になります。

ひつじ
ひつじ

ボタン左側の何もない空間でも、半透明になります。

ひつじ
ひつじ

・・・・・仕様です!

後半では、画面が小さいときに記事説明文を非表示にするカスタマイズも紹介してます

 

スポンサーリンク

ブログカード 続きを読む

/*続きボタン */
.internal-blogcard-site{
float:none;
}
.internal-blogcard-date{
display:none;
}
.internal-blogcard-site:after{
font-family: "FontAwesome";
content: ">読んでみる";
font-weight: bold;
font-size: 100%;
color: #ff963d;
padding: .2em;
border-radius: 4px;
background-color: rgba(0,0,0,0);
border:1px solid #ff963d;
display: inline;
margin-left: auto;
}
.internal-blogcard-site:hover::after{
opacity: .7;

子テーマのstyle.cssに、コピぺしてください。

 

言葉を変えるなら「content」の「読んでみる」の部分を書き換え。

「続きを読む」などに、できます。

 

色を変えるなら、

  • color(文字色)
  • border(境界線の色)

の#ff963dを、別のカラーコードに変えてください。

 

説明文を消す

ブログカードから、記事内容の説明文を消すカスタマイズです。

画面幅が480px以下だったら、説明文を非表示にします。

 

アクセスの半分以上は、スマホからです。

小さい画面のデバイスから見ても、画面がごちゃごちゃしないようにします。

 

/*480px以下*/
@media screen and (max-width: 480px){
/*説明を消す*/
.blogcard-snipet{
	display: none;
}
}

 

すでに画面サイズごとに

/*480px以下*/
@media screen and (max-width: 480px){

}

といった、編集領域が用意されているはず。

 

好きなサイズの{ }内に

/*説明を消す*/
.blogcard-snipet{
	display: none;
}

をコピペします。

 

Cocoonのブログカード

ブログカードのカスタマイズ、

  • 「続きを読む」ボタンの追加
  • 小画面時、説明文を非表示

を紹介した。

 

とくに「続きを読む」ボタンは、クリック率アップが期待できるのでおすすめ。

 

当ブログの運営については、こちらの記事にまとめています。

0PV→6万PV! 読まれないブログにやったすべて
ブログの収益・PVを公開。読まれないブログを読まれるようにするために、やってよかったことを重要な順で書く。正解を知らないまま、記事を書き続けるのは無謀。PVはスモールワードから発生する。

 

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