ブログカードの導入

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

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

この通りにします。


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

今回はFirefoxを使いました。

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

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

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

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

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


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

<div class="blogcard">
<div class="blogcard-content">
<div class="blogcard-image">
<div class="blogcard-image-wrapper">
<a href="https://p--q.blogspot.com/2019/05/gmail.html" target="_blank"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitH2YLjf4IZeIMG-bFtey47LS9-e4SWV5whPrIsY-QcRH_WpaN3moUZH2SVxFLubUvjF1mm4pdsOlP3b8yP5oPONP5gJzqNuj17hV25HqrEQzYxJlS166NaqoLYsozDU23v3XruZQwTuU/w1200-h630-p-k-no-nu/Screenshot_20190506_135024.png" /></a></div>
</div>
<div class="blogcard-text">
<div class="blogcard-title">
<a href="https://p--q.blogspot.com/2019/05/gmail.html" target="_blank">Gmailのバックアップ</a></div>
<div class="blogcard-description">
Gmailデータをアーカイブする Gmailの画面の右上の名前のアイコンをクリック ー＞ Googleアカウント。 左のメニューの「データとカスタマイズ」を選択。 データのダウンロード、削除、プランの作成、の「データをダウンロード」 をクリック。 すべてのデータが選択されているの...</div>
</div>
</div>
<div class="blogcard-footer">
<a href="https://p--q.blogspot.com/2019/05/gmail.html" target="_blank"><img alt="" src="https://www.google.com/s2/favicons?domain=https://p--q.blogspot.com/2019/05/gmail.html" />p--q.blogspot.com</a></div>
</div>

このような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>タグで挟んでペーストして保存します。

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

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