ブログカードとは、はてなブログでよくみかける「カード風のリンク」のこと。

これを使うとリンクを分かりやすくすることができるが、Bloggerには そのような機能は備わっていない。

そのため、外部サービスから取り入れることになる。

このようなサービスはいくつかあるが、その中でも「ShareHtmlを、もっと綺麗にしたメーカー」が使いやすかった。

そこで、このサービスを使って記事内にブログカードを設置する方法を書き残しておこうと思う。

「ShareHtmlを、もっと綺麗にしたメーカー」の使い方

１．ブログカードメーカーのサイトにアクセスする

より美しいHTMLをシェアしよう｜ShareHtmlを、もっと綺麗にしたメーカー

ブログ記事内で他サイトリンクをサムネイル（アイキャッチ画像）付きで表示するためのブログパーツです。デザインが洗練されているツールがなかったので作りました。より美しいHTMLをシェアできる、ShareHtmlを、もっと綺麗にしたメーカーです。

まずは上のサイトにアクセスする。

なお、このカード風のリンクがブログカードと呼ばれるものになる。

２．入力フォームに ブログカードを作りたいページのURLを入力する

サイト内の入力フォームに、ブログカードを作りたいURLを入力してEnterを押す。

すると、ブログカードのプレビュー・HTML・CSSが表示される。

３．# CSSコード をコピーして、Bloggerに適応する

プレビュー以下の「# CSSコード」をコピーして、BloggerのCSS部分に設定する。

設定方法は以下の2通り。


・テーマデザイナーの上級者向け設定から「CSSを追加」を選択し、その中に貼り付けて適応する
・HTMLの編集で「]]></b:skin>」を検索し、その真上に貼り付ける

初心者の場合、テーマデザイナーから追加する方法で設定すると分かりやすいと思う。

なお、このCSSを一度設定してしまえば、以降は追加する必要はない。

４．# HTMLコード をコピーして、記事内に貼り付ける

まずはプレビュー以下の「# HTMLコード」をコピーする。

次に記事編集画面で「HTMLモード」にし、コードを任意の場所に貼り付ける。

これで公開すれば、ブログカードを記事内に設定できたと思う。

なお、「作成モード」に戻すと、レイアウトが崩れてしまうので注意（コードは最後に貼り付けるとよい）。

補足

「ShareHtmlを、もっと綺麗にしたメーカー」の仕様

このブログカードメーカーは以下のような構成になっている。

・アイキャッチ画像：ページの一番上に設定した画像
・ページタイトル：ページのタイトル（ブログの場合は記事タイトル）
・ページの説明文：検索向けに設定したページの説明文

Bloggerの場合のページの説明文について

Bloggerの記事ページをブログカードにした場合、ページの説明文は以下のようになる。

・記事ページに検索向け説明を設定した場合：ここで設定した説明文が表示される
・記事ページに検索向け説明を設定しなかった場合：Bloggerの検索設定で設定したブログの説明文が表示される

備考

CSSを自分のブログに合った設定にする

このブログカードメーカーで出力されるCSSは、ブログによってはレイアウトが崩れてしまう。

この場合、出力されたCSSを書き換えることで、デザインを変更することができる。

なお、当ブログでは画像を横長にし、スマホ表示では説明文を非表示にしている。

このような設定にするには、下記のCSSを参考にして欲しい。