ブログカード+外枠の線でカードらしく表示する方法

カスタマイズ
スポンサーリンク

どうも、kazuです。
前回の記事では、「Embedlyカード(ブログカード)」の作成方法をご紹介しました。

ただ1点、気になることがあります。
それは、Embedlyカードを記事に表示した時、枠線がないってこと。

ん~、”カード”らしくない。

上の画像のように、デフォルトではブログカードに外枠の線がありません。
しかも、背景の色が白なのでなおさら「これはリンクです」っていうのが分かりづらく、完全に同化しちゃってます。

そこで今回は、ブログカードに枠線をつけてカードらしく表示する方法をご紹介します。

スポンサーリンク

CSSを追加して枠線をつける方法

1. Blogger「管理画面」のテーマ → 「HTMLの編集」を選択

2.「]]></b:skin>」で検索し、上に次のコードを貼り付ける

.embedly-card{
border: solid 1px #c0c0c0;
}

3. 「テーマを保存」をクリック

おしまい!お疲れさまでした。

パソコンの表示画面

よしっ、カードっぽい。

モバイルの表示画面

手持ちのiPhoneで表示させたところ。

ムムッ!横幅のサイズの関係なのか、左右の文字がギリギリ
パソコンでは少し余白があるのに。どうしてもこの「ギリギリ」っていうのが気になってしまうんですよね。

左右に余白をとる方法

先程、追加したコードの下に次のコードを貼り付けて、テーマを保存するだけ。
※パソコンで表示した時の余白は変わりません。

@media screen and (max-width: 768px){
.embedly-card{
padding: 0px 10px;
}
}

モバイルの表示画面(余白調整後)

イイ感じになりました。うん、満足。

スポンサーリンク

さいごに

いかがでしたでしょうか?
線があることによって見た目がより”カード”らしくなり、「これはリンクですよ」ってことが伝わりやすくなります。私は断然、線アリが好きです(自己満足です)。
あなたは枠線あり・なしのどちらが好みですか?

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

コメント

  1. ありがとうございました。
    この記事のおかげで、無事導入することが出来ました。

    • kazu より:

      sentakunosusume 様

      コメントありがとうございます☆
      この記事がお役に立てたようで嬉しい限りです(´∀`*)