<img class="aligncenter size-full wp-image-5559" src="https://wvtravelclub.jp/wp-content/uploads/2018/07/a4eeb4e12f938a793e1d5e471ddaa3da.jpg" alt="" width="640" height="426" /> <p class="p1">Cocoonのカスタムにハマっている。おおもと(<a href="https://twitter.co

<p dir="ltr" lang="ja">「テキストだけの内部リンク」と「アイキャッチ付きのブログカード」どちらがクリック率が高いかテストしてみたところ、ブログカードのほうがクリック率が高いというデータが出ました。 <a href="pic.twitter.com/ykzGhdKC9v">https://t.co/ykzGhdKC9v">pic.twitter.com/ykzGhdKC9v</a></p> — はたのブログ (@hata_blog) <a href="2018年7月24日">https://twitter.com/hata_blog/status/1021639397752492032?ref_src=twsrc%5Etfw">2018年7月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ぶっちゃけ知ってた（笑）

</div> </div>

当ブログ「<a href="wとら">https://wvtravelclub.jp/">wとら</a>」でも、<span class="marker-under-blue">テキストリンクよりブログカードのほうが圧倒的にクリック率が高</span>いです。

理由としては、当ブログにきているユーザー層が「<a href="ワードプレスカスタム">https://wvtravelclub.jp/cocoon-review/">ワードプレスカスタム</a>」「<a href="ガジェット好き">https://wvtravelclub.jp/iawriter/">ガジェット好き</a>」な人が多いからだと推測されます。

https://wvtravelclub.jp/cocoon-review/

簡単にいうと、ITに強い層の人たちは『<span class="bold-red">ブログカードを踏みやすい</span>』から・・・

<span class="bold">ブログカードをクリックすると、他のページに飛べる</span>という事を知っている人たちだということ

ライフスタイル系の記事とかは、リンクのほうが踏まれてるぽい・・・

</div> </div>

https://wvtravelclub.jp/yamasina/

今回の記事は「ITに強い人たち」が、さらにブログカードを踏みやすくするためのカスタマイズを紹介する記事です。

もっと、PVを増やしたいと思っている方は参考にしてください。

https://wvtravelclub.jp/cocoon-midasi/

https://wvtravelclub.jp/box-shadow/

[rakuten no="9784844366607" shop="book" kw="HTML＋CSSワークショップ　手を動かして学ぶWebデザイン藤川麻夕子"]

<h2>有名ブロガーもやっているカスタマイズ</h2> <img class="aligncenter size-full wp-image-5557" src="https://wvtravelclub.jp/wp-content/uploads/2018/07/pants-1255847_640.jpg" alt="" width="640" height="424" />

今回紹介するカスタマイズは、有名ブロガーの「マクリン（<a href="@Maku_ring">https://twitter.com/Maku_ring">@Maku_ring</a>）」さんも取り入れているカスタマイズになります。

— マクリン (@Maku_ring) <a href="2018年7月24日">https://twitter.com/Maku_ring/status/1021676077284909056?ref_src=twsrc%5Etfw">2018年7月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さすが！マクリン（<a href="@Maku_ring">https://twitter.com/Maku_ring">@Maku_ring</a>）さん分かってらっしゃる！

今回の<span class="bold-red">カスタマイズのキモ</span>は、ブログカード内に『関連記事』と『続きを読む』を入れて

<span class="fz-36px bold">ユーザーに行動を促す（うながす）</span>

ことを目的としています。

「<a href="wとら">https://wvtravelclub.jp/">wとら</a>」のカスタマイズの画像はこちらのツイッター画像より⤵︎

<blockquote class="twitter-tweet" data-lang="ja"> <p dir="ltr" lang="ja">ブログカードに「続きを読む」を入れたぜ！ <a href="pic.twitter.com/M1F2ZYw2Bg">https://t.co/M1F2ZYw2Bg">pic.twitter.com/M1F2ZYw2Bg</a></p> — おおもと@滋賀ブロガー (@so88qa) <a href="2018年7月26日">https://twitter.com/so88qa/status/1022456160547291136?ref_src=twsrc%5Etfw">2018年7月26日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"> <p dir="ltr" lang="ja">そういや〜昨日紹介した、ブログカードのPC表示はこれね</p> 文字の大きさを調整するのにちょっと苦労した・・・ <a href="pic.twitter.com/McfkBn8XAX">https://t.co/McfkBn8XAX">pic.twitter.com/McfkBn8XAX</a>

— おおもと@滋賀ブロガー (@so88qa) <a href="2018年7月27日">https://twitter.com/so88qa/status/1022810915719106560?ref_src=twsrc%5Etfw">2018年7月27日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

かなり目立つ様に工夫しています。

次にCSSの紹介をしていきますね！

[rakuten no="9784844366607" shop="book" kw="HTML＋CSSワークショップ　手を動かして学ぶWebデザイン藤川麻夕子"]

<h2>ブログカードカスタマイズをコピペ！</h2> ブログカードのCSSは次の通りです。 <pre>/ブログカードいろいろ変更/

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: １．８; 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;/タブレット以下で説明文を非表示/ } }</pre> <div class="speech-wrap sb-id-15 sbs-line sbp-l sbis-cb cf"> <div class="speech-person"> <figure class="speech-icon"><img class="speech-icon-image" src="https://wvtravelclub.jp/wp-content/uploads/2018/04/oomoto.jpg" alt="おおもと" /></figure> <div class="speech-name">おおもと</div> </div> <div class="speech-balloon">

長いわ！

</div> </div>

Cocoon（コクーン）を使っている人はそのままコピペをしてください。

それ以外の人は、コメント欄で質問してね！

背景色などは、これから実験するので今後変わる予定いい色があったら教えてください（切実）

[rakuten no="9784844366607" shop="book" kw="HTML＋CSSワークショップ　手を動かして学ぶWebデザイン藤川麻夕子"]

<h2>ブログカードカスタマイズのまとめ</h2> <img class="aligncenter wp-image-5556 size-full" src="https://wvtravelclub.jp/wp-content/uploads/2018/07/man-791049_640.jpg" alt="" width="640" height="426" />

今回は、超有名ブロガーの「はたのブログ（<a class="ProfileHeaderCard-screennameLink u-linkComplex js-nav" href="https://twitter.com/hata_blog"><span class="username u-dir" dir="ltr">@<b class="u-linkComplex-target">hata_blog</b></span></a>）」さんが有力な情報をツイッターで流していたので作った記事です。

<blockquote class="twitter-tweet" data-lang="ja"> <p dir="ltr" lang="ja">「テキストだけの内部リンク」と「アイキャッチ付きのブログカード」どちらがクリック率が高いかテストしてみたところ、ブログカードのほうがクリック率が高いというデータが出ました。 <a href="pic.twitter.com/ykzGhdKC9v">https://t.co/ykzGhdKC9v">pic.twitter.com/ykzGhdKC9v</a></p> — はたのブログ (@hata_blog) <a href="2018年7月24日">https://twitter.com/hata_blog/status/1021639397752492032?ref_src=twsrc%5Etfw">2018年7月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

実際に、有名ブロガーの「マクリン（<a href="@Maku_ring">https://twitter.com/Maku_ring">@Maku_ring</a>）」さんの様に成果を出されているブロガーもいます。

<blockquote class="twitter-tweet" data-lang="ja"> <p dir="ltr" lang="ja">はたさんが検証されたとおり、ブログカードがクリック率高いのは間違いない( ^ω^ )</p> ついでに書くと、ブログカードに「続きを読む」と入れると、さらに上がります(^q^) <a href="https://t.co/SjyYTYUyyp">https://t.co/SjyYTYUyyp">https://t.co/SjyYTYUyyp</a> — マクリン (@Maku_ring) <a href="2018年7月24日">https://twitter.com/Maku_ring/status/1021676077284909056?ref_src=twsrc%5Etfw">2018年7月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回は、ちょっとしたブログカードのカスタマイズだけでしたが、もっと<a href="ユーザーアビリティーをあげる方法">https://wvtravelclub.jp/box-shadow/">ユーザーアビリティーをあげる方法</a>はたくさんあると思います。

https://wvtravelclub.jp/box-shadow/

もっと、「こういうカスタマイズがしたい！」と思っている方は、ぜひぜひコメント欄を活用して質問してくださいね！

今回の記事はこれで終わります。

またね！

https://wvtravelclub.jp/cocoon-midasi/

https://wvtravelclub.jp/css-no-kinoji/

https://wvtravelclub.jp/iawriter/

[rakuten no="9784844366607" shop="book" kw="HTML＋CSSワークショップ　手を動かして学ぶWebデザイン藤川麻夕子"]

質問などがあれば、コント覧に書き込んでくださいね！

</div> </div>