2018/7/24更新 クールなカスタマイズはこちら↓
こんにちは。
最高の無料WordPressテーマ、Cocoon。最近はスキンも充実してきてついに本格リリースか!?と浮足立ってきている昨今である。
今回はそんなCocoonのブログカードをすっきりスマートにカスタマイズしてクリック率を上げよう大作戦の回です。
Cocoonのブログカード……。
さっそくですが、Cocoonのデフォルトのブログカードを見てみて頂きたい。
……これはこれでいいのですが、少し、ほんの少しだけ……
ゴチャゴチャしている……。
ブログカードといえば回遊率をあげるために関連記事を差し込む有効なツール。
そこで、このブログカードをもっとクリックされるようなデザインにしたい。
そう、思ったのである。
……のでこうしてみました↓
上が内部ブログカード、下が外部ブログカードです。
お、気付きましたか……？
そうです。ひつじさん監修のテーマ「JIN」のブログカードを参考にさせてもらいました。JINもオシャレでいいですよね。
んで、右下の「続きを読む」リンクはけーすけ（@saradaregend）さんのこちらの記事を参考につけました。
なんでも、これをつけるとクリック率が1.5倍になるとか。おいおいマジかよ。
おまじないだと思ってつけてみました。
CocoonのブログカードをカスタマイズするCSS
さっそくこちらがCSSのサンプルです。
Cocoonの小テーマのstyle.cssに貼っつけてください。
.blogcard {
padding: 1rem;
color: #666;
position: relative;
border-color: #68d6cb !important; /* 枠線の色を変更 */
}
a.blogcard-wrap:hover{
background-color: transparent!important;
opacity: 0.8;
}
a.blogcard-wrap:hover img.blogcard-thumb-image{
transform: scale(1.1);
transition: .3s;
}
.blogcard-thumbnail {
line-height: 0;
margin-right: 1rem;
overflow: hidden;
}
.blogcard-title{
margin-bottom: .5rem;
}
.blogcard-snipet{
font-size: 70%;
line-height: 1.7;
padding-right: 10%;
}
@media screen and (max-width: 480px){
.blogcard-thumbnail{
width: 40%;
}
.blogcard-snipet{
display: none;
}
}
.internal-blogcard-footer{
display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}
.blogcard::before{
content: 'あわせて読みたい'; /* タイトルの文言 */
position: absolute;
top: -.8rem;
left: auto;
font-size: 50%;
background-color: #68d6cb; /* タイトルの背景色 */
padding: .6em 1em;
font-weight: bold;
color: #fff; /* タイトルの文字色 */
border-radius: 2px;
}
.internal-blogcard::after{
content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: .5rem;
right: 1rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff; /* 内部リンク右下枠の文字色 */
border-radius: 2px;
}色はうまくアレンジしてみてくださいね。
今回の変更点まとめ
今回のアレンジポイント！！！！！！
- JIN風に枠と見出しをつけ、:hoverで薄くなりアイキャッチ画像は拡大。
- 内部リンクには「続きを読む」ボタンを装着。
- あとは余白などの調整。 ← 一番時間かかった
↑Cocoon標準のこの付箋風ボックス、素敵ですね！
周りの文言が目障りに感じたら適当にアレンジしてみてくださいね。
では。よかったらTwitterフォローしてね。
【支援お待ちしております！】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）
継続的な更新・サポートのためにご支援お願いいたします……！
▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！
その他のカスタマイズは下記ボタンから。
コメント
こういうの待ってました！っていうカスタマイズです。
私はCSSが書けないので助かります。
他のカスタマイズも楽しみにしています！
コメントありがとうございます！
励みになります！これからも宜しくお願いします！
はじめまして！
無料では最強のテーマだと思ってます。
コクーン。
でもど素人でカスタマイズができなくて、デフォルトのままでした。
こういったカスタマイズのCSSの公開をしていただけて、本当に感謝してます！
ありがとうございます！
コメントありがとうございます！
これからもよろしくお願いします！
最近cocoonでブログを開設し、非常に参考にさせて頂いてます。
わかりやすくて良い記事をありがとうございます。
こちらのブログカードの記事を拝見して、早速style.cssに貼付を行ってみたのですがどうにも反映されません。
キャッシュを消してみたり云々は試してみたのですが、、、
なにか考えられることはありますでしょうか？
コメントありがとうございます！
カスタマイズが適用されない原因についてですが、
1.ブラウザキャッシュが残っている
→Ctrl+F5でキャッシュを削除して更新してみてください。
2.サーバーキャッシュが残っている
→サーバーキャッシュ系のプラグインを利用されている場合はそちらのキャッシュも削除してみてください。
3.デフォルトのCSSが邪魔をしている
→通常、子テーマのstyle.cssはデフォルトに上書きされるようになっていますので、子テーマのstyle.cssの末尾に追記しているか今一度ご確認ください。
4.そもそもブログカード表示がされていない
→Cocoon設定→ブログカードから「内部ブログカード設定」「外部ブログカード設定」のそれぞれで「ブログカード表示」にチェックが入っているかご確認ください。
以上で解決しないようでしたら、（もし抵抗がなければ）問題が発生しているページのURLを教えていただければと思います（公開したくないようでしたらTwitterのDMでも大丈夫です）。
ご丁寧な返信ありがとうございます。
キャッシュ等の問題ではなさそうなのですが…
https://ag-rehabilitation.com/
上記ページです。よろしくお願い致します。
全記事拝見いたしましたが、ブログカードがなく確認ができませんでした……。
ソースを見たところ、ブログカードカスタマイズ用のCSS自体は問題なく記載されていました。
Cocoonのブログカード設定がONになっていれば、投稿本文の空行にURLを入力すると自動でブログカードに変換されるはずです。
Cocoonデフォルトのブログカードは問題なく表示されていますでしょうか。
そもそもリンク先のOGPが取得できていないケースや、サーバーの状態によるものの場合もあります。
以下の公式フォーラム投稿もご参照いただければ、と思います。
https://wp-cocoon.com/community/bugs/%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E4%B8%8D%E5%85%B7%E5%90%88%EF%BC%9F%E6%9C%AC%E6%96%87%E3%81%8C%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8B/
ご丁寧な対応痛み入ります。
ありがとうございます。
もう一度諸々確認してみます。
解決しましたら報告させて頂こうと思います。
本当にありがとうございました。
いえいえ、ご報告お待ちしております！
今後ともなにかありましたらお気軽にコメントください！
凄い！
ブログの印象がガラッと変わりました！
感謝感謝ですm(_ _)m
些細な質問ですが、tweetを埋め込むと、ブログカード風になってしまうのですが、良い解決方法はありますか？
コメントありがとうございます。
喜んでいただけて光栄です。
ご質問の件ですが、oEmbed機能（投稿本文にURLを書き込むと自動的に埋め込みタグに変換される機能）がうまく機能していないようです。
なにかプラグインやカスタマイズなどが妨害して無効化されているかもしれません。
こちらではわかりかねますので、恐れ入りますが、Cocoon公式フォーラムに問題が発生しているページURLやプラグイン環境を併せて質問してみてください。
ありがとうございます。
Twitterの画面から、HTMLを埋め込む方法があり、そちらを使うと上手く見れるようになりました。
お騒がせしてスミマセン。
解決したようでなによりです！
今後ともなにかありましたらお気軽にコメントください！
さっそく参考にさせて頂きました！
「あわせて読みたい」というコメントのついたブログカードにずっと憧れていたので、めちゃくちゃ嬉しいです！
cssを貼り付けしてみると、「あわせて読みたい」の四角が、さいとうさんが載せていらっしゃるよりも真ん中に来てしまいます。
https://moikkani.com/2018/10/22/1yearanniversary/
自分なりに色々触ってみたのですが、いかんせんCSSの知識が皆無なため困っています。
もしよろしければ、解決の方法を教えて頂けませんでしょうか？
ぶしつけな質問ですいません。
お世話になります！
本記事を拝見してCSSカスタマイズしてみたのですが
中途半端に反映されているようで、うまく更新できません。
(サムネイルが反映されなかったり、ディスクリプションが反映されないなど)
お手すきな時にご教授いただければ幸いです。
該当のURLは以下になります。宜しくお願い致します。
https://web-gohan.com/game/sdorica/1569/
はじめまして。
ブログカードのイメージががらっと変わって一気におしゃれになりました。
ただ、スマホから見た時に記事の冒頭部分が表示されず、
アイキャッチとタイトルのみとなってしまうのですが、
これは想定通りでしょうか？
ご活用いただけて幸いです。
実際に問題が発生しているWebページのURLを教えて頂ければ確認いたします。よろしくお願いいたします。
こんばんは。
大変参考になります！ありがとうございます。
１件教えて下さい。
画像と記事が、上下で中央揃え？になってしまって、「続きを読む」が
カード内の記事本文に重なってしまいます。
（私のだけでしょうか？何が影響しているのか？？？汗）
画像とタイトル・記事一部を、カード内の上詰めにするにはどうしたら
良いのでしょうか？
ご教授のほど、宜しくお願いいたします。
実際に問題が発生しているWebページのURLを教えて頂ければ確認いたします。よろしくお願いいたします。
最近Cocoonを導入したのですが、こちらのコード一発でいい感じにできて感動です。
有難うございました！
お礼の書き込みでした！
ブログ初心者です！いつもサイトにcssを使わせていただいています。素敵なデザインありがとうございます。
ブログカードさっそく使わせていただいたのですが、なぜか変に画像が大きく表示されてしまって、綺麗に表示されません……外部ブログカードは綺麗に表示されるのですが、内部ブログカードだけ詰めたような感じになってしまいます。
初心者の初歩的なミスだったらすみませんこちらの記事に内部ブログカードが貼ってあります→https://karincafe.com/profile よろしくお願いします。
初めまして、
自分は全くの初心者でこういった記事を参考に勉強しながらブログ作成をしてます。
非常に解りやすい内容で真似してみたいのですが
CSSをコピペ出来るように貼ってくれている
有難いブログは沢山ありますが
ド素人からすると何処に貼るの？って段階です。
どのサイトも何処に貼るのか書いてないので毎回諦めてましたが、この場を借りて質問させていただき
レベルアップを図りたいと思いました。
どうぞ、宜しくお願いします。
アドレスを、絶対パスにしないと、
「続きを読む」が表示されませんね。
他は表示されますが。
基本的なことですが、うっかりが多い作業なので、
一応コメントしておきます。
CSSをさっそく使いました。
ブログカードが鮮やかになりました。
ありがとうございました♪