こんにちは、ひつじ先輩 (@baacash_)です。
Cocoon(コクーン)のブログカードに、「続きを読む」ボタンを追加するカスタマイズを紹介します。
当ブログのブログカード(内部リンク)は、こんな感じです。
0PV→6万PV! 読まれないブログにやったすべて
ブログの収益・PVを公開。読まれないブログを読まれるようにするために、やってよかった対処法を重要な順で書く。正解を知らないまま、記事を書き続けるのは無謀。PVはスモールワードから発生する。
baacash.com
2022.07.09
カードの右下、「読んでみる」ボタンを表示させる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はスモールワードから発生する。
baacash.com
2022.07.09
