ブログカードとは
こういうちょっと気の利いたリンクのことです。
デフォルトでも使えるのですが、アレンジ出来たほうが楽しいですよね。
今回はこのブログカードのカスタマイズを解説します。
ブログカードをアレンジ【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は奥行き、３ｄだと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; ←フォントサイズ
}
}
まとめ
｛｝の中を変えるだけなので、いろいろ修正して変えることができます。
テストしながらやりたい場合はデベロッパ―ツールを使いましょう。
コメント