2021/07/01

こんにちは、a-keyです。

皆さん、ブログカードという言葉を御存じですか？

正直に言ってしまい、私は見た事はあるけれども、名前までは知りませんでした。

ブログカードとは下記のようなサムネイル付きのリンクです。

ブログカードがあると見た目が華やかになりますよね。

サムネイルの近くに簡単な文章が表示されますので、読者の注意も引けますし、読者が開こうとした時にクリックもしやすい。

なにこのwin-winの関係は。

bloggerではこの機能を使う事が出来ないと思っており諦めていましたが、表示する方法を見つけましたので紹介します。

bloggerでブログカード（サムネイル付きリンク）を使う方法

ブログカードとなるHTMLとCSSを準備する

ブログカードを使うには、 HTMLとCSSが必要になります。

これら二つは、坂内学さんが制作したサイトで簡単に用意できます。

CSSはbloggerのテーマに差し込みます。

テーマを選択して、カスタマイズの右にある▽をクリックして、"HTMLを編集"を選択して下さい。

画面がアルファベットの羅列に切り替わります。

その中から、以下の文章を検索し、その上の行へ作成したCSSを貼り付けてください。

検索するキーワード : </style>

CSSを貼り付けるとインデントがずれている状態になると思いますが、機能上は問題ありません。

今後、ブログカードを使おうとする場合、CSSを貼り付ける作業は不要です。

HTMLは表示したいブログ記事自体に貼り付けます。

ブログの記事を作成する画面で、HTMLビューを選択して下さい。

CSSの時と同じように、画面がアルファベットの羅列に切り替わります。

ブログカードを差し込みたい個所に作成したHTMLを貼り付けてください。

差し込みたい個所は意外に見つけるのが難しいので、記事を書きながらブログカードを差し込んでいくと間違えなくて済みます。

ブログカードを今後も使う場合、HTMLの貼り付け作業は都度実施する必要があります。

今回はbloggerの記事にブログカードを差し込む方法について紹介しました。

ブログカードの元となるHTML及びCSSを簡単に作成できるサイトを構築して頂いた坂内学さんには感謝しています。

簡単にですが、今回の内容を復習します。

ブログカードの元となるHTMLとCSSを作成する
CSSはテーマに差し込む
カスタマイズから"HTMLを編集"を選択して、"</style>"の上の行に作成したCSSを貼り付けます。
この貼り付け作業は一度限りでよく、今後、ブログカードを貼り付ける際には不要です。
HTMLをブログの記事に差し込む
ブログの記事の作成画面でHTML表示に切り替え、ブログカードを貼り付けたい個所へ作成したHTMLを貼り付けてください。
位置の把握が難しいので、記事を書きながらブログカードを差し込んでいくのがお勧めです。

今回はここまでです。

それでは、次の記事でお会いしましょうッ！