無料版EmbedlyのCSSをカスタマイズしよう

この記事ではリンクカード作成サービスEmbedly無料版に枠線を付けてカスタマイズする方法を紹介します。

前回の記事ではEmbedlyを使ってブログカードを挿入する方法を紹介しました。まだ使っていない方はこちらのリンクからどうぞ。このリンクもEmbedlyを使用しています。

無料版EmbedlyでBloggerにブログカードを埋め込もう

この記事でわかること

Embedly無料版のCSSをカスタマイズする方法がわかります。

私の環境

• ブログ：Blogger
• テンプレート：QooQ v1.29

手順

ではEmbedlyのカードの周りに少し丸みのついた薄い線を入れていきます。

テーマのバックアップ

テーマに変更を加えるので忘れずにバックアップを取っておきましょう。ダッシュボードの「テーマ」→「カスタマイズ」横のボタンからバックアップできます。

CSSを追加

以下のコードをテーマに挿入していきます。

コードコピー

以下のコードを全てコピーします。

/**********************
Embedly装飾枠線付与
***********************/
.embedly-card{
	border: solid 1px #e5e5e5;
	position: relative;
	margin: 10px auto;
	padding: 5px 10px 0 10px;
	border-radius: 5px;
	max-width: 600px;
}

CSSに挿入

次にダッシュボード「テーマ」→「カスタマイズ」横のボタンから「HTML編集」に進みます。その中のCSS部分に上のコードを全て貼り付けます。

<b:skin><![CDATA[ から]]></b:skin>の間です。

QooQを使用している場合は「個別アイテム」あたりに入れるか、最後に個別カスタマイズ領域を作ると管理しやすいかと思います。

変更自体はこれだけですので、保存して問題ないか確認してください。

解説

border: solid 1px #e5e5e5;

線種、太さ、色の設定です。細めの灰色にしています。

margin: 10px auto;

枠の外側の余白設定です。上下10pxは適当ですが、左右autoにすることで中央揃えにしています。

padding: 5px 10px 0 10px;

枠線までの余白を調整しています。

上、右、下、左の指定になっています。下がデフォルトで余白が広めなのに対し上と左右が狭めなのでその調整をしています。

border-radius: 5px;

角の丸みを調整しています。数値を大きくするとより丸くなります。

max-width: 600px;

広がる最大幅を指定しています。横幅が広がりすぎるとバランスがおかしくなるので最大600pxまでしか広がらないようにしています。

最後に

さらに装飾しようとしたところで問題が発生。ホバーで影を追加したところ、外枠線のさらに内側にもう一つ影ができて二階建てみたいになってしまいました。

おそらく透過の2要素が組み合わされてカードが作られており、影がそっちにもできているんだと思いますが、対策方法がわかりません。もしどなたか解決策ご存じの方いらっしゃったらご教授いただけるとうれしいです。

というわけで影無しにしています。

その他のカスタマイズはこちらにまとめています

【Blogger】QooQカスタマイズをまとめます