コピペで簡単!CSSでブログカードをカスタマイズする方法

ブログカードカスタマイズ
どうも、kazuです。
リンクを華やかに、視覚に訴えることができるブログカード。
デフォルトのまま使うのもアリですが、デザインを変えて他の方と差別化したいと思いませんか?

そこで今回は、Embedlyカードをカスタマイズ(デザイン変更)する方法をご紹介します。

コードの追加場所(CSS追加)

こちらの記事をご参照ください。
ブログカード+外枠の線でカードらしく表示する方法
↑今回ご紹介する方法でデザインを変更した状態です。

.embedly-card{
ここに追加
border: solid 1px #c0c0c0;
}

変更前(枠線のみ)のブログカード


CSSコードの追加でブログカードのデザインを変更してみよう!

横幅を変更する

【追加コード】max-width: 〇〇%;
【例】max-width: 80%;

配置(横)を変更する

【追加コード】margin:0 〇〇;
【例】margin:0 20px;
【例】margin:0 auto;

左右の余白をとる

【追加コード】padding: 0px 〇〇px;
【例】padding: 0px 10px;

角の丸くする

【追加コード】border-radius: 〇〇px;
【例】border-radius: 20px;

背景色を変更する

【追加コード】background-color: 〇〇;
【例】background-color: #ffffd1;

マウスオーバー時(マウスカーソルを重ねた時)に背景色を変更する

【追加コード】「.embedly-card{ ~ }」の下に入力
.embedly-card:hover{
background-color: 〇〇;
}
【例】
background-color: #dadada;(通常時)

background-color: #ffffd1;(マウスオーバー時)


カラーコードを調べる時はこちらのサイトが大変参考になります。
WEB色見本 原色大辞典 - HTMLカラーコード

さいごに

いかがでしたでしょうか?
デザインを変更することにより、一味違うブログカードを作ることができます。
「他の人と同じなのは嫌だ!」「自分のブログとマッチしたデザインにしたい!」と思う方は是非お試しください。


最後まで読んでいただき、ありがとうございましたm(_ _)m
それではまた~!


カスタマイズ記事をまとめました☆
>>>Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

Blogger/Vaster2のカスタマイズ記事をまとめて一挙大公開!

スポンサーリンク
スポンサーリンク

0 件のコメント :

コメントを投稿