外壁 改造 改装 リニューアル

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

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

ブログカードのブックマークレットを作成しました

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 */
}

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

参考リンク・関連記事など


最近のカスタムとしてはブログの常時SSL化に変更してみました。

当ブログのSSL対応(HTTPS化)をしました

当ブログ「ほったらかし投資のまにまに」がようやくSSL化に対応しました。独自ドメインを取得して、FC2ブログの有料プランでこのブログを書いているのですが...


最近の流行りに伴いPC画面とスマホ画面の表示方法が同じになるようにレスポンシブデザインを導入しています。

ブログテンプレートをレスポンシブWebデザイン対応に変更しました

当ブログのテンプレートをレスポンシブWebデザイン対応に変えました。FC2ブログで書いていたので、いままでパソコンで見る画面とスマホで見る専用ページは別々のテンプレートで作成されていて...


リンクしている記事の新着記事がわかるようにサイドバーはlivedoor RSSを導入しています。

サイドバーのリンクを新着記事が確認できるlivedoor相互RSSに変更しました

パソコンからブログを見る時に、サイドバーに他ブロガーさんのリンクを貼っていたのですが、更新状況を確認できる「livedoor 相互RSS」に変更しました…」と思っていたのですが、livedoor IDを持てば誰でも利用できるようなので、さっそく利用してみました。...

関連記事

スポンサーリンク

関連コンテンツ