おすすめ動画配信サイト7選!

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

ブログカードとは

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

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

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

このサイトのテーマはCocoonを使っています。

スポンサーリンク

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

/*ブログカード*/
.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); /*マウスホバーで上に移動*/
    box-shadow: 0px 8px 18px -5px rgba(85,85,85,0.75); 
	/*マウスホバー時の画像の影*/
	border-radius: 20px;
}

.blogcard-title {
	color: #327bb7;
	text-decoration: underline;
	line-height: 2;
	font-size: 1em;
	}

.blogcard-snippet {
	display:none;
}

.blogcard-domain{
	display:none;
}

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

.internal-blogcard::after {
    content: '続きを読む \f102';
    font-family:'Font Awesome 5 Free';
    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;
}


@media screen and (max-width: 480px){
	.blogcard-title{
		font-size: 0.8em;
  }
}

↑これが今私が使っているものになります。

ワードプレスであれば、カスタマイズ画面に追加CSSという項目があるとおもいます。

今回はそこから編集したいと思います。

全体の編集

.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; ←フォントサイズ
  }
}

Cocoonでラベルを貼れないときの対処法

Cocoonでは簡単にブログカードにラベルがつけられます。

Cocoonブロックにブログカードというものがあるので、それを使うだけです。

↑こんな感じになります。

しかし、なぜかはわかりませんが、普通にやろうとするとこれができませんでした。

対処法としては、詳細設定からHTMLとして編集という項目を選んでもらって

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">
<p></p> ←この間にURLを入れる
</div>

〈p〉URL〈/p〉という形にすることで、ラベルが貼れます。

まとめ

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

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

Technology
スポンサーリンク
Study Gorilla

コメント