【AFFINGER6】ブログカードの作り方とカスタマイズ方法を徹底解説

AFFINGER6でブログカードが簡単に作れるって聞いたんだけど、やり方がよくわからん。おしゃれにカスタマイズする方法を教えてほしい。

こんな疑問にお答えします。

ブログカードとは、以下のような「カード型のリンク」のことです。

タイトルとサムネイル画像が表示されるので、通常のテキストリンクだけで設置するよりも、クリック率がアップします。

本来ブログカードは、ショートコードやプラグインを使えば導入できるものですが、手間がかかる上にデザイン性が悪いです。

AFFINGER6なら簡単にブログカードを作ることができるので、おすすめです。

本記事では、AFFINGER6（アフィンガー6）でブログカードを設置する方法とおしゃれなカスタマイズ方法を、初心者向けにわかりやすく解説します。

早速見ていきましょう。

AFFINGER6でブログカードを作る方法

AFFINGER6でブログカードを作る方法は超簡単です。

投稿編集画面の「ビジュアル」エディターの上に、ツールバーがありますよね。その中に「カード」というボタンがあるので、これをクリックします。

すると、ブログカードのショートコードが出てきます。ショートコードの中に「id””」という欄があるので、この「””」の中に記事IDを入力しましょう。

これだけで、以下のようなブログカードが完成です。

ちなみに、記事IDは「投稿一覧」の右端にあるID欄で確認できます。

ブログカードのテンプレートデザインを使う方法

ブログカードを作る基本的な方法は、これまで解説してきたとおり。

AFFINGER6ではさらに、ブログカードのテンプレートデザインが4種類用意されています。

ビジュアルエディター画面のツールバーに「タグ」というプルダウンボタンがあります。これを以下の順番でクリックしていきましょう。

「参考・CHECK（ふきだし）・サムネイル・影なし」の4種類のデザインでブログカードを作ることができます。

それぞれの完成図は以下のとおり。

「参考」のブログカード

「CHECK（ふきだし）」のブログカード

「サムネイルなし」のブログカード

「影なし」のブログカード

AFFINGER6でブログカードをカスタマイズする方法

AFFINGER6のブログカードは、ショートコード内の「""」に任意の値を入力することで、自分好みのデザインにカスタマイズすることが可能です。

カスタマイズできる項目は、以下のとおり。

それぞれ順番に写真付きで解説していきます。

ブログカードに文字入りラベルを付ける方法

「label=""」に任意の文字を入力すると、ブログカードに文字入りのラベルを付けることができます。

例「label="おすすめ"」と入力した場合

PC閲覧時のブログカードの高さを変更する方法

「pc_height=""」に任意の数値（px）を入力すると、パソコンで閲覧した時のブログカードの高さを設定できます（単位の入力は不要です）。

例：「pc_height="200"」と入力した場合

ブログカードのタイトル名を変更する方法

「name=""」に任意の文字を入力すると、ブログカードのタイトル名を入力した文字に変更できます 。

例：「name="AFFINGER6でサムネイル画像を設定する方法"」と入力した場合

ブログカードのラベルの背景色を変更する方法

「bgcolor=""」に任意のカラーコードを「#」付きで入力すると、ラベルの背景色を変更できます。

ちなみに、代表的なカラーコードは「タグ」から設定可能です。

例：「bgcolor="#f44336"」と入力した場合

ブログカードのラベルの文字色を変更する方法

「color=""」に任意のカラーコードを「#」付きで入力すると、ラベルの文字色を変更できます。

例：「color="#212121"」と入力した場合

ブログカードのラベルにWebアイコンを設定する方法

「webicon=""」に任意のWebアイコンを選ぶと、ラベルにWebアイコンを設定できます。

Webアイコンの設定方法は以下のとおり。

Webアイコンは全部で30種類あります。たくさんあるので便利ですよ。

「webicon=""」に初心者マークのWebアイコンを付ける場合

ブログカードに「続きを見る」ボタンの有無を設定する方法

「readmore=""」で「on」と「off」を切り替えることで、「続きを見る」ボタンの有無を設定できます。

例：「readmore="off"」で「続きを見る」を非表示にする場合

ブログカードのサムネイル画像の有無を設定する方法

「thumbnail=""」で「on」と「off」を切り替えることで、サムネイル画像の有無を設定できます。

ただ、サムネイル画像はクリック率を上げるために重要なので、offにするのはおすすめしません。

例：「thumbnail="off"」でサムネイル画像を非表示にする場合

ブログカードのラベルを「たすき掛け」から「タイトル表示」に変更する方法

「type="text"」と入力すると、ラベルを「たすき掛け」から「タイトル表示」に変更できます。

例：「type="text"」と入力した場合

AFFINGER6でブログカードのデザインを一括設定する方法

これまで解説してきたのは、個々のブログカードのデザインをカスタマイズする方法でした。

AFFINGER6では、ブログカードのデザインを一括で設定することもできます。

ブログカードのカスタマイズ画面

上記の外観カスタマイズ画面で、ブログカードの「枠線」「ラベル背景色」「ラベルテキスト色」「ラベルデザイン」を一括変更することができます。

ブログカードの枠線を一括変更する方法

「枠線」の項目では、ブログカードの枠線を好きな色に変更できます。

HTMLカラーコードを入力するか、好きな色を選ぶ。

黒色を選ぶと、以下のような感じになります。

「枠線を太くする（3px）」にチェックを入れると、以下のように枠線が太くなります。

ブログカードのラベル背景色を一括変更する方法

「ラベル背景色」の項目では、ラベル背景色を好きな色に変更できます。

HTMLカラーコードを入力するか、好きな色を選ぶ。

すると、以下のようにラベル背景色を一括で変更できます。

ブログカードのラベルテキスト色を一括変更する方法

「ラベルテキスト色」の項目では、ラベルテキスト色を好きな色に変更できます。

HTMLカラーコードを入力するか、好きな色を選ぶ。

すると、以下のようにラベルテキスト色を一括で変更できます。

ブログカードのラベルデザインを一括変更する方法

「ラベルデザイン」はデフォルトでは「たすき掛け」になっています。

「リボンデザイン」を選ぶと、以下のようにラベルがリボン形式で表示されるようになります。

ブログカードのクリック率を上げるための豆知識

ブログカードはクリック率が上がる便利な機能ですが、さらにクリックされやすくなる方法があります。

それは、テキストリンクとブログカードの2段構えで設置すること。たとえば以下のような感じです。

テキストリンクとブログカードを2段構えで設置した例

ブログカードは目立ちますが、いかにも「クリックして！」と促す感じがして、いやらしさが出る場合もあります。

それに対して、テキストリンクはあまり目立ちませんが、このようないやらしさはほとんどありません。

つまり、テキストリンクのほうをクリックしやすい人もいれば、ブログカードのほうをクリックしやすい人もいるわけで、人それぞれなんです。

なので、テキストリンクとブログカードのメリットを両取りすることで「取りこぼしを少なくする」、つまりクリック率が上がることが期待できるわけです。

まとめ：AFFINGER6ではブログカードを簡単かつ自由にカスタマイズできる！

というわけで、以上です。

AFFINGER6では、「カード」ボタンを押すだけで簡単にブログカードが作れちゃいます。そのままのデザインでもシンプルでキレイに表示できるので、おすすめです。

Webアイコンやラベルデザインを設定すれば、さらにおしゃれにカスタマイズできます。

ぜひあなた好みのデザインを設定してみてくださいね。

ではまた。