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

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

&amp;nbsp;
&lt;div class=&quot;speech-wrap sb-id-15 sbs-line sbp-l sbis-cb cf&quot;&gt;
&lt;div class=&quot;speech-person&quot;&gt;
&lt;figure class=&quot;speech-icon&quot;&gt;&lt;img class=&quot;speech-icon-image&quot; src=&quot;https://wvtravelclub.jp/wp-content/uploads/2018/04/oomoto.jpg&quot; alt=&quot;おおもと&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;speech-name&quot;&gt;おおもと&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;speech-balloon&quot;&gt;

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

&lt;/div&gt;
&lt;/div&gt;
&amp;nbsp;

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

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

&amp;nbsp;

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

&amp;nbsp;

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

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

&amp;nbsp;
&lt;div class=&quot;speech-wrap sb-id-18 sbs-line sbp-l sbis-cb cf&quot;&gt;
&lt;div class=&quot;speech-person&quot;&gt;
&lt;figure class=&quot;speech-icon&quot;&gt;&lt;img class=&quot;speech-icon-image&quot; src=&quot;https://wvtravelclub.jp/wp-content/uploads/2018/08/mama.jpg&quot; alt=&quot;ママ&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;speech-name&quot;&gt;ママ&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;speech-balloon&quot;&gt;

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

&lt;/div&gt;
&lt;/div&gt;
&amp;nbsp;

https://wvtravelclub.jp/yamasina/

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

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

&amp;nbsp;

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

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

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

&amp;nbsp;
&lt;blockquote class=&quot;twitter-tweet&quot; data-lang=&quot;ja&quot;&gt;
&lt;p dir=&quot;ltr&quot; lang=&quot;ja&quot;&gt;はたさんが検証されたとおり、ブログカードがクリック率高いのは間違いない( ^ω^ )&lt;/p&gt;
ついでに書くと、ブログカードに「続きを読む」と入れると、さらに上がります(^q^) &lt;a href=&quot;https://t.co/SjyYTYUyyp&quot;&gt;https://t.co/SjyYTYUyyp&lt;/a&gt;

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

&amp;nbsp;

さすが！マクリン（&lt;a href=&quot;https://twitter.com/Maku_ring&quot;&gt;@Maku_ring&lt;/a&gt;）さん分かってらっしゃる！

&amp;nbsp;

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

&amp;nbsp;

&lt;span class=&quot;fz-36px bold&quot;&gt;ユーザーに行動を促す（うながす）&lt;/span&gt;

&amp;nbsp;

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

&amp;nbsp;

「&lt;a href=&quot;https://wvtravelclub.jp/&quot;&gt;wとら&lt;/a&gt;」のカスタマイズの画像はこちらのツイッター画像より&amp;#x2935;︎

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

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

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

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;
&lt;h2&gt;ブログカードカスタマイズをコピペ！&lt;/h2&gt;
ブログカードのCSSは次の通りです。
&lt;pre&gt;/*ブログカードいろいろ変更*/
#main .blogcard{
border:none;/*ブログカードの枠線を消す*/
color:#555;
}

#main .internal-blogcard-title:before {
content: &quot;関連記事&quot;;/*関連記事を入れる枠を挿入*/
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: &#039;content: &#039;\f138\ 続きを読む&#039;;/*続きを読むを入れる枠を挿入*/
font-family: &#039;FontAwesome&#039;;/*続きを読むの右側にマークをつける*/
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;/*タブレット以下で説明文を非表示*/
}
}&lt;/pre&gt;
&amp;nbsp;
&lt;div class=&quot;speech-wrap sb-id-15 sbs-line sbp-l sbis-cb cf&quot;&gt;
&lt;div class=&quot;speech-person&quot;&gt;
&lt;figure class=&quot;speech-icon&quot;&gt;&lt;img class=&quot;speech-icon-image&quot; src=&quot;https://wvtravelclub.jp/wp-content/uploads/2018/04/oomoto.jpg&quot; alt=&quot;おおもと&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;speech-name&quot;&gt;おおもと&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;speech-balloon&quot;&gt;

長いわ！

&lt;/div&gt;
&lt;/div&gt;
&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

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

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

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

&amp;nbsp;

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

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

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

&amp;nbsp;

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

またね！

&amp;nbsp;

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

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

https://wvtravelclub.jp/iawriter/

&amp;nbsp;

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

&amp;nbsp;
&lt;div class=&quot;speech-wrap sb-id-15 sbs-line sbp-l sbis-cb cf&quot;&gt;
&lt;div class=&quot;speech-person&quot;&gt;
&lt;figure class=&quot;speech-icon&quot;&gt;&lt;img class=&quot;speech-icon-image&quot; src=&quot;https://wvtravelclub.jp/wp-content/uploads/2018/04/oomoto.jpg&quot; alt=&quot;おおもと&quot; /&gt;&lt;/figure&gt;
&lt;div class=&quot;speech-name&quot;&gt;おおもと&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;speech-balloon&quot;&gt;

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

&lt;/div&gt;
&lt;/div&gt;</pre>