ブログカードの導入

ブログカード用HTMLを生成するブックマークレットをブラウザに登録する

ブログカードのブックマークレットを作成しました - カスタマイズ

この通りにします。


ブックマークレットを登録したいブログでブログカードのブックマークレットを作成しました - カスタマイズのページを開きます。

今回はFirefoxを使いました。

ブックマークツールバーを表示させておきます。

「使い方」にある「ブログカード」と「引用ブログカード」をそれぞれブックマークツールバーにドラッグすると、「ブログカード」と「引用ブログカード」というブックマークが登録されます。

これでブログカードに載せたいページ用のHTMLを作成する準備は完了です。

ブログカードのHTMLをブックマークレットで作成する

ブログカードで表示させたいページをこのブラウザで開いて、このブックマークを選択します。


 ちょっと間をおいて、HTMLが載ったダイアログが表示されますのでこのHTMLをBloggerの投稿のHTML編集モードに貼り付けます。


このようなHTMLが貼り付けられます。

 ただし、OGP設定がされているサイトでないと内容が表示されません。

 テンプレート「QooQ」はOGP設定されています。

通常は、ブログ記事タイトルとともに、記事の先頭部分が含まれています。

しかしメタタグの説明を設定していると、記事の先頭部分ではなく、メタタグの説明が含まれます。

なので、メタタグの説明は無効にしといたほうがよいでしょう。


Bloggerのダッシュボードから、設定 ー＞ 検索設定 ー＞ メタタグ、の説明を消します。

サムネイル画像も表示されるのですが、Blogger投稿編集モードではサムネイルがすごく大きく表示されます。

大きすぎて編集する時に邪魔なので、 サムネイル画像を選択して大きさを小に設定しています。


OGPについてはこのページがわかりやすかったです。

BloggerにブログカードのCSSを登録する

ブログカードっぽく表示させるにはCSSをブログカードを貼り付けるブログに登録しないといけません。


 ブログカードのブックマークレットを作成しました - カスタマイズの「デフォルトCSS」ボタンをクリックします。

するとCSSが表示されます。

 そのまま貼り付けるには大きいので、ツールを使って圧縮します。

CSS Minify

このツールを使いました。

貼り付けるといくつかエラーが表示されますが、それは無視しますが、1行目の@charset "utf-8";は削除します。

CSS minifyボタンをクリックすると圧縮されたCSSが下の枠に表示されますのでそれをコピーします。

Bloggerのレイアウト画面でHTML/JavaScriptガジェットを追加してそこにコピーしたCSSを<style></style>タグで挟んでペーストして保存します。

ガジェットの置き場所はどこでもよいようです。

これでブログカードがかっこよく表示されるようになりました。