【Cocoon】ブログカードとは?簡単なカスタマイズ方法を解説

ブログカードとは

こういうちょっと気の利いたリンクのことです。

デフォルトでも使えるのですが、アレンジ出来たほうが楽しいですよね。

今回はこのブログカードのカスタマイズを解説します。

目次
広告

ブログカードをアレンジ【Cocoon】

全体の編集

.blogcard{}

この部分でブログカードの全体的な設定ができます。

浮き上がるように設定

.blogcard{
border:none; ←ボーダーをなくしています。これを消すと囲いが復活します。
background: #eae8e8; ←背景色です。
transition: all .5s ease; ←ふわっとさせる。変化にかかる時間
box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);
↑影を付けています。
}
.blogcard:hover { ←マウスを乗せた時のブログカード
opacity:1; ←透明度
background:#dddddd;
transform:translateY(-6px); ←ホバーで上(Y軸)に移動 正数で下へ
box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75);
/*影*/
}

私の場合は、ボーダーをなくして、アニメーションを追加しています

動きの付け方

transform:translateY(-6px);

translateが移動させるということです。

Yは上下、Xは左右、Zは奥行き、3dだと3方向に動かせます。

何もつけなければ(xの値,yの値)で2d変化させられます。

影の付け方

box-shadow: 0px 4px 15px -5px rgba(85,85,85,0.75);

今回はこのように影を付けましたが、ここも自由に変更できます。

1番目の数値は水平方向を表します。

プラスなら右へ、マイナスなら左へ影が動きます。

順番にいえば、水平、垂直、ぼかし、範囲、色となっています。

ぼかしは0にできませんので注意してください。

最後の;の前に「inset」と書けば内影になります。

部分的にアレンジする

タイトル

.blogcard-title {
color: #327bb7; ←文字色
text-decoration: underline; ←文字に下線
line-height: 2; ←タイトルの位置
font-size: 1em; ←フォントサイズ
}

ス二ペット

説明文のところです。

.blogcard-snippet {
display:none; ←消しています。
}

URL

ホームのURLはいらないかと思ったので消しています。

.blogcard-domain{
display:none;
}

ファビコン

サイトのトレードマークですが、あんまりあってなかったので消しました。

.blogcard-favicon-image{
display:none;
}

display:none;これを書いておけば、たいてい消せます。

『続きを読む』をブログカードに入れる

続きを読むをいれるといいと聞いたので、付けています。

.internal-blogcard::after {
content: ‘続きを読む \f102’; ←文字とアイコンです。
font-family:’Font Awesome 5 Free’; ←Font Awesome 5を使っています。
position:absolute; ←配置
color:whitesmoke; ←色
margin-top:-1.3rem; ←細かい位置
padding:.2em .8em;
right:1rem;
font-size:0.8em; ←フォントサイズ
font-weight:bolder; 
background-color:#565b75;
border-radius:20px; ←角をとっています。大きいほどまるくなります。
}

スマホだけの設定をする

スマホとPCの文字サイズが同じだと、上手く収まらなかったので、スマホだけ変えています。

@media screen and (max-width: 480px){ ←スマホにだけ適用
.blogcard-title{
font-size: 0.8em; ←フォントサイズ
}
}

まとめ

{}の中を変えるだけなので、いろいろ修正して変えることができます。

テストしながらやりたい場合はデベロッパ―ツールを使いましょう。

広告

コメント

コメントする

目次
閉じる