ブログカードを導入してみました

当ブログでは、記事のリンクにブログカードを導入しています。

いままでリンク先を紹介するときは文章だけでしたが、サムネイル画像も含めた今風のおしゃれなリンクカードにしてみました。

SSL化後の悩ましい作業のひとつ。ブログカードこれまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので...

ブログカードを導入するにあたって、こちらの記事を参考にしています。

このリンク先のAkiraさんのブログカードのいいところは、外部リンクの場合、文章を引用でくくることができることです。

引用とはタグ（blockquote）でテキストをくくることです。

この発想はなかった！現金派の賢いポイントカード利用法

自分はある程度の金額ならクレジットカードを積極的に利用してポイントを少しでも貯めたいカード派ですが、妻は「いつもニコニコ現金払い」の現金派...

こちらが自分の記事のブログカードです。
自分の記事のブログカードの文字背景色は白色で、他人の記事をブログカードにする時はちょっと背景色が変わっているのが分かります。

Akiraさん作成のブログカードの完成度が非常に高いので、そのまま流用して使うのも出来るのですが、せっかくなので少しカスタマイズしてみました。

ブログカード紹介記事では

使用報告等一切不要です
特に難しい内容ではありませんし、これといって独自性もない(笑)
ですから好きに使ってください。

…とありましたが、少しイジったことの報告も含めて自分のブログでもブログカードを紹介していこうと考えました。

主なカスタム内容は

サムネイル画像を左に移動
文字サイズの変更
スマホ時のサムネイル画像サイズを変更

/* 画像 */
.blogcard-image {
display: inline-block;
float: right; /* 画像を左に配置したい場合は left に変更 1/2 */
margin: 0 0 5px 5px; /* 画像を左に配置したい場合は 0 10px 5px 0 に変更 2/2 */
width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 1/6 */
height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 2/6 */
}

ブログカードのブックマークレットを作成しました｜The other way round

「文字サイズの変更」はデフォルトCSSを眺めていればどこをイジれば変更できるのか簡単にわかると思います。
「サムネイル画像を左に移動」と「スマホ時のサムネイル画像サイズを変更」は上記のCSS部分を以下のように書き換えてみました。

/* 画像 */
.blogcard-image {
display: inline-block;
float: left; /* 画像を右に配置したい場合は right に変更 1/2 */
margin: 0 10px 5px 0; /* 画像を右に配置したい場合は 0 0 5px 5px に変更 2/2 */
width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 1/6 */
max-width: 25%; /* スマホ表示ではブログカード幅の最大25%に変更 */
height: auto; /* スマホ表示による横幅調整にともない縦幅を自動調整に変更 2/6 */
}

ブログカード導入に伴い、記事中のリンクは文末に入れるようにして、記事本文を読んでいる時は、なるべくリンクを入れないで一番下まで読んでもらえるようにブログの書き方を変更しています。