Cocoonのカスタムにハマっている。おおもと(@so88qa)です
ちょっと前に有名ブロガーの「はたのブログ(@hata_blog)」さんから有力な情報がツイッターで流れてきました!
「テキストだけの内部リンク」と「アイキャッチ付きのブログカード」どちらがクリック率が高いかテストしてみたところ、ブログカードのほうがクリック率が高いというデータが出ました。 pic.twitter.com/ykzGhdKC9v
— はた@インスタやってます (@hata_blog) July 24, 2018
当ブログでも、テキストリンクよりブログカードのほうが圧倒的にクリック率が高いです。
理由としては、当ブログにきているユーザー層が「ワードプレスカスタム」「ガジェット好き」な人が多いからだと推測されます。
簡単にいうと、ITに強い層の人たちは『ブログカードを踏みやすい』から…
ブログカードをクリックすると、他のページに飛べるという事を知っている人たちだということ
今回の記事は「ITに強い人たち」が、さらにブログカードを踏みやすくするためのカスタマイズを紹介する記事です。
もっと、PVを増やしたいと思っている方は参考にしてください。
有名ブロガーもやっているカスタマイズ
今回紹介するカスタマイズは、有名ブロガーの「マクリン(@Maku_ring)」さんも取り入れているカスタマイズになります。
けーすけさんに教えてもらったコードで、ブログカード右下に「続きを読む」入れたら、マジでクリック率上がったww
— マクリン (@Maku_ring) May 20, 2018
※元は6.5%
内部リンクのデザインはたぶんこれが最終形(*´∀`*)
「続きを読む」試してみたほうがいいよ( ´∀`)b pic.twitter.com/q2bOkKkLVY
さすが!マクリン(@Maku_ring)さん分かってらっしゃる!
今回のカスタマイズのキモは、ブログカード内に『関連記事』と『続きを読む』を入れて
ユーザーに行動を促す(うながす)
ことを目的としています。
当サイトのカスタマイズの画像はこちらのツイッター画像より⤵︎
ブログカードに「続きを読む」を入れたぜ! pic.twitter.com/M1F2ZYw2Bg
— おおもと@空調機の修理屋さん (@so88qa) July 26, 2018
そういや〜
— おおもと@空調機の修理屋さん (@so88qa) July 27, 2018
昨日紹介した、ブログカードのPC表示はこれね
文字の大きさを調整するのにちょっと苦労した・・・ pic.twitter.com/McfkBn8XAX
かなり目立つ様に工夫しています。
次にCSSの紹介をしていきますね!
ブログカードカスタマイズをコピペ!
/*ブログカードいろいろ変更*/
#main .blogcard{
border:none;/*ブログカードの枠線を消す*/
color:#555;
}
#main .internal-blogcard-title:before {
content: "関連記事";/*関連記事を入れる枠を挿入*/
background: #FFC042;/*関連記事の背景色*/
border:solid 1px #333;/*関連記事の枠線*/
border-radius: 2px;/*関連記事の枠の角を取る*/
color: #333;
font-size: .8em;
padding: .1em .35em;
margin-right: .3em;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
transform: scale(1.1);/*ブログカードのアイキャッチに動きをつける*/
transition: .3s;/*動きのスピードの調整*/
}
.blogcard-thumbnail {
line-height: 0;
margin-right: 1rem;
overflow: hidden;/*アイキャッチのはみ出る具合を調整*/
}
#main .internal-blogcard-title {
line-height: 1.8;
font-size: .95em;
}
.blogcard-snipet {
font-size: .65em;
}
.internal-blogcard::after {
content: 'content: '\f138\ 続きを読む';/*続きを読むを入れる枠を挿入*/
font-family: 'FontAwesome';/*続きを読むの右側にマークをつける*/
position: absolute;
color:#333;
margin-top:-1.3rem;/*関連記事の縦軸の調整*/
padding: .2em .8em;/*関連記事の枠の大きさの調整*/
right: 5rem;/*関連記事の横軸の調整*/
font-size: .8em;/*関連記事の文字の大きさの調整*/
font-weight: bolder;/*関連記事の文字の太さの調整*/
background-color: #f8acac;/*関連記事の背景色*/
border: solid 1px #333;/*関連記事の枠線*/
border-radius: 2px;/*関連記事の枠の角を取る*/
}
@media screen and (max-width: 1030px){
#main .blogcard-snipet {
display: none;/*タブレット以下で説明文を非表示*/
}
}
Cocoon(コクーン)を使っている人はそのままコピペをしてください。
それ以外の人は、コメント欄で質問してね!
背景色などは、これから実験するので今後変わる予定
いい色があったら教えてください(切実)
ブログカードカスタマイズのまとめ

今回は、超有名ブロガーの「はたのブログ(@hata_blog)」さんが有力な情報をツイッターで流していたので作った記事です。
「テキストだけの内部リンク」と「アイキャッチ付きのブログカード」どちらがクリック率が高いかテストしてみたところ、ブログカードのほうがクリック率が高いというデータが出ました。 pic.twitter.com/ykzGhdKC9v
— はた@インスタやってます (@hata_blog) July 24, 2018
実際に、有名ブロガーの「マクリン(@Maku_ring)」さんの様に成果を出されているブロガーもいます。
けーすけさんに教えてもらったコードで、ブログカード右下に「続きを読む」入れたら、マジでクリック率上がったww
— マクリン (@Maku_ring) May 20, 2018
※元は6.5%
内部リンクのデザインはたぶんこれが最終形(*´∀`*)
「続きを読む」試してみたほうがいいよ( ´∀`)b pic.twitter.com/q2bOkKkLVY
今回は、ちょっとしたブログカードのカスタマイズだけでしたが、
もっとユーザーアビリティーをあげる方法はたくさんあると思います。
今回の記事はこれで終わります。
またね!
コメント一覧 (2件)
コメント失礼いたします。現在SANGOやAFFINGERのテーマを使っております。
cocoon以外のテーマでも、このページで紹介されていました「続きを読む」のついたブログカードを使いたいのですが、どのように設定を行えばいいでしょうか?
どうかよろしくお願いいたします。
マタクさん
コメントありがとうございます!
ボクがSANGOなどの有料テーマを使ってないので、カスタマイズ方法が分かりません(-_-;)
申し訳ありませんm(_ _)m