お仕事の依頼はココをクリック

【有名ブロガーが検証】ブログカードを100%活用するCSSカスタマイズ

Cocoon
スポンサーリンク

 

Cocoonのカスタムにハマっている。おおもと(@so88qa)です

 

ちょっと前に有名ブロガーの「はたのブログ(@hata_blog)」さんから有力な情報がツイッターで流れてきました!

 

 

おおもと
おおもと

ぶっちゃけ知ってた(笑)

 

当ブログ「wとら」でも、テキストリンクよりブログカードのほうが圧倒的にクリック率が高いです。

理由としては、当ブログにきているユーザー層が「ワードプレスカスタム」「ガジェット好き」な人が多いからだと推測されます。

 

ワードプレス無料テーマ『Cocoon(コクーン)』を徹底レビュー
今一番有名なワードプレステーマ『Cocoon(コクーン)』を3ヶ月使ってわかった。コクーンの魅力を徹底的にお伝えします。 ぶっちゃけ、悪いところがないのでデメリットを知りたい人はこの記事を読まないでください。

 

簡単にいうと、ITに強い層の人たちは『ブログカードを踏みやすい』から・・・

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

 

ママ
ママ

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

 

京都の【住んではいけない地域】と【住みやすい地域】について
他県から京都に移住した実体験から導き出した、京都の治安についてまとめた記事を書きました!京都に住む計画がある人はぜひ記事を読んでください。

 

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

 

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

 

コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。
『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!

 

スポンサーリンク

有名ブロガーもやっているカスタマイズ

今回紹介するカスタマイズは、有名ブロガーの「マクリン(@Maku_ring)」さんも取り入れているカスタマイズになります。

 

 

さすが!マクリン(@Maku_ring)さん分かってらっしゃる!

 

今回のカスタマイズのキモは、ブログカード内に『関連記事』と『続きを読む』を入れて

 

ユーザーに行動を促す(うながす)

 

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

 

wとら」のカスタマイズの画像はこちらのツイッター画像より⤵︎

 

 

 

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

 

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

 

 

スポンサーリンク

ブログカードカスタマイズをコピペ!

ブログカードの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)」さんが有力な情報をツイッターで流していたので作った記事です。

 

 

実際に、有名ブロガーの「マクリン(@Maku_ring)」さんの様に成果を出されているブロガーもいます。

 

 

今回は、ちょっとしたブログカードのカスタマイズだけでしたが、
もっとユーザーアビリティーをあげる方法はたくさんあると思います。

 

『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!

 

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

 

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

またね!

 

コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。
【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!
【兼業ブロガーにおすすめ】隙間時間で書けるエディッターを使ってブログを書こう
仕事で忙しくてブログを書く時間がない・・・・ そんな人は、スマホ・PC・タブレット全てデーターの共有ができるiA Writerがオススメ! 隙間時間を利用して、記事が書けちゃうから「通勤時間」「昼休み」を使っていままで以上に効率よくブログが書けます! 記事が書けなくて困っているブロガーは是非導入を検討してください。

 

 

おおもと
おおもと

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

- Comments -

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