Lightningブログカード挿入とカスタマイズ

「ブログカード」とは、ブログ記事のタイトルや概要、アイキャッチ画像などをカード形式で表示する機能のことです。
ブログカードは、視覚的に目立つため関連記事の紹介などに使うと回遊率を向上させる効果もあります。

Lightning 有料版を使用することでブログカードを簡単に挿入することができます。

「まなびの日々」のブログ内でもブログカードを活用しています。

ブログカード挿入と、もっとおしゃれなブログカードへのマスタマイズについて書いてみます。

ブログカードの挿入方法

投稿ページの「プロックの追加」をクリックするとブロックの種類を選択する画面が表示されます。
ここには最もよく使われるブロックが表示されています。ここに表示されていたらそちらをクリックして挿入します。もし表示されていない場合には「すべて表示」をクリックします。

このように「ブログカード」があります。アイコンをクリックするとブロックが挿入されます。
「ブログカード」のように右上に「Pro」の付いているものはLightning 有料版でのみしようできるブロックになります。

このようにブロックが挿入されました。
赤枠の所に表示させたい記事のURLを入力し「埋め込み」をクリックします。

赤枠に表示されているブログカードのパターンを選びます。

画像左を選ぶと下記のようなブログカードが表示されます。

枠線の色や太さのカスタマイズ

挿入したブログカードの枠線の色や太さ角丸の大きさなどを変更します。
挿入したブログカードをクリックすると右側に画像のように使用しているブロックが表示されます。
赤枠のスタイルをクリックします。

下の方へ移動すると枠線とあります。
そこで枠線の色、枠線の太さ、角丸の大きさを変更できます。

ブログカードタイトルのカスタマイズ

赤枠のブログタイトルの変更を行います。

ブログタイトルをクリックすると右側にブログカードブロックのブログカードタイトルが表示されます。
赤枠「設定」でタイトルにリンクを貼るのか、新しいタブで開くのかなどが変更できます。

赤枠のスタイルをクリックすると、ブログカードタイトルの文字の色や背景などが変更できます。

タイボグラフィの右側の点の所をクリックすると、外観・行の高さ・文字間隔・装飾・大文字小文字など変更できます。

ブログカード抜粋のカスタマイズ

赤枠のブログカード抜粋の変更を行います。

ブログカード抜粋をクリックすると右側にブログカードブロックのブログカード抜粋が表示されます。
設定で抜粋の表示される最大文字数を変更できます。

赤枠のスタイルをクリックすると、ブログカード抜粋のテキストや背景の色を変更できます。

タイボグラフィの右側の点の所をクリックすると、サイズ・外観・行の高さ・文字間隔・装飾・などが変更できます。

ブログカードアイキャッチ画像のカスタマイズ

赤枠のブログカードアイキャッチ画像の変更ができます。

ブログカードアイキャッチ画像をクリックすると右側にブログカードブロックのブログカードアイキャッチ画像が表示されます。
設定でブログカードアイキャッチ画像にリンクを貼るか新しいタブで開くかなどが変更できます。

赤枠のスタイルをクリックすると、画像のフィルターが設定できます。

その下へ移動すると、サイズで画像の大きさなど変更できます。
枠線の所で枠線の色や枠線の太さ、角丸の大きさを変更できます。

カスタマイズしてみました。