AFFINGER専用ブロック

ブログカードの使い方と設定方法!AFFINGER6(アフィンガー6)

今回はAFFINGER6の「ブログカード」についてのお話です。

テキストリンクでは目立ちにくいけどブログカードを使えばインパクトアップ!

ブログカードとはカード状のリンクのことです。みなさんも「合わせて読みたい」みたいな文章とともに記事が紹介されているのを見たことがあると思います。ただのテキストリンク(文字リンク)よりインパクトがありますよね!

ブログカードは有名な機能で、いろんなテーマに搭載されています。もちろんAFFINGER6にも搭載されています。今回はそんなAFFINGER6のブログカードについてまとめました。これを読んでみなさんもAFFINGER6のブログカードを使ってみてください!

注意!この記事で紹介するのはブロックエディタ(グーテンベルク)においての使い方のみです。クラシックエディタでの使い方は紹介しないのでご注意ください。

それでは行ってましょう!

解説に用いたAFFINGERのバージョンは"ver20221014"です。

「ブログカード」の使い方手順

それでは早速、ブログカードの使い方を紹介します。

使い方はとてもかんたんです!

この機能を使うにはAFFINGER専用のグーテンベルグプラグイン「Gutenbergプラグイン2」が必要です。まだ導入していない人はダウンロード手順インストール手順を参考にしてプラグインを有効化してください。

ブログカードの出し方(2通り)

「ブログカード」の出し方は2通りあります!好きな方を使ってください。

まずは編集ページを開きます。

方法1:URLを直にペーストする方法

AFFINGER6(アフィンガー6):ブロックエディタ(グーテンベルク)でのブログカードの出し方:URLを直にペーストする方法

好きなところにカーソルを合わせます(ブロックを選択するには「/」を入力という文が出たらOK)。そこにサイトの記事のURL(内部リンク)をペーストしてください。これだけです!URLが自動的にブログカードに変換されます。

ブログカードの自動変更を停止する方法はこちら。

こちらはラフなやり方!

方法2:「埋め込み」ブロックを出してURLをペーストする方法

AFFINGER6(アフィンガー6):ブロックエディタ(グーテンベルク)でのブログカードの出し方:「埋め込み」ブロックを出してURLをペーストする方法

左上のを押し、一覧の中から「埋め込み」ブロックを選択します。すると編集画面に「埋め込み」ブロックが反映されます。

空欄に記事のURL(内部リンク)を入力します。そして埋め込みボタンを押します。するとブログカードが出来上がります。

こちらはフォーマルなやり方!

注意事項!

ブログカード化できるのは内部リンク(自サイト内の記事)のみです。外部リンク(他者のサイト)をブログカードで表示するには別途 プラグインが必要になります。もしくはWordPress本体のブログカードを使う方法もあります。

編集時のブログカードは見た目が異なりますが公開時には正しく表示されるのでご安心を!


ラベル(飾り)を付ける!

ブログカードの右上に「合わせて読みたい」みたいのような文字入りのラベルを付け加えることができます。お好みでどうぞ!

AFFINGER6(アフィンガー6):ブロックエディタ(グーテンベルク)でブログカードにテープ状の文字入りラベルを追加する方法

ブログカードの下にキャプションを追加という部分があります。ここに好きな文字を入力してください(例:参考合わせて読みたい)

すると本番でブログカードの右上にテープ状のラベルが表示されます(編集画面では表示されません)。

ラベルの色を変える方法

AFFINGER6(アフィンガー6):ブログカードのラベル色を変える方法

ラベルの色はカスタマイズ画面で変更できます。

ダッシュボード】→【外観】 > "カスタマイズ" > "オプション(その他)" > "ブログカード/ラベル"

※ラベルデザイン(たすき掛け)はクラシックエディタ版用の設定です。ブロックエディタではたすき掛けは使用できません。

これでブログカードの使い方は一通り終了です!かんたんですね。

「ブログカード」に関する注意点!

ここからはブログカードを使う際に気をつけるポイントをいくつか紹介します。みなさんがつまずく可能性が高いポイントです!

クラシックエディタ版とブロックエディタ版のブログカードは別物だよ

クラシックエディタ版とブロックエディタ版のブログカードは似てるけど全くの別物なので気をつけてください!

実はAFFINGER6では「ブログカード」は二つ使えます!一つがクラシックエディタ版の旧式のもの(「AFFINGER5:WING」時代に使われていたやつ)。そして二つ目がブロックエディタ(グーテンベルグ)版の新式のものです。

この二つは似ていますが別物です。使い方や設定の仕方が違います!特に理由がないならブロックエディタ版のブログカードを使うのがいいと思います。

AFFINGER6(アフィンガー6):ブロックエディタ(グーテンベルク)版とクラシックエディタ版のブログカード比較:実物編
デザインがちょっと違う
AFFINGER6(アフィンガー6):ブロックエディタ(グーテンベルク)版とクラシックエディタ版のブログカード比較:編集画面編
クラシックエディタはショートコードを使うので難しい

2つの違い

ブロックエディタ版クラシックエディタ版
デザイン「>」がある「続きを読む」がある
使い方手軽難しい
ラベル1種類2種類
要素P(段落)扱いH5(見出し5)扱い

外部リンクを貼る場合は別途 純正のプラグインが必要になります。

AFFINGER6のブログカードは内部リンクにしか適用されない仕様になっています。外部リンクをブログカード形式で紹介したい場合は別途 純正のプラグインが必要になります。

AFFINGER純正プラグイン「ブログカード外部URL対応プラグイン」:外部リンクをブログカードで紹介するときに必要

「ブログカード」に関するいろいろな設定

ここからはブログカードに関する設定のあれこれをまとめて紹介します。

「ブログカード」機能の停止に関する設定

ブログカードの機能の停止に関する設定です。

設定場所はこちら↓

ダッシュボード】→【AFFINGER管理】 > "Gutenberg設定" > "埋め込みURL"

AFFINGER6(アフィンガー6):ブログカード機能の停止に関する設定画面:埋め込みURL

 URLの自動ブログカード化をテキストリンクに変更する

AFFINGER6(アフィンガー6):ブログカード機能の停止に関する設定:URLの自動ブログカード化をテキストリンクに変更する

「ブログカード」が編集画面からプレビュー画面に移るときにテキストリンクに変更されます。編集画面では「ブログカード」状態ですがプレビュー画面(完成画面)に移るとそれが自動的にテキストリンクに置き換えられます。

編集画面と完成画面で見た目が違うから戸惑うかも

 URLの自動ブログカード化を停止する

AFFINGER6(アフィンガー6):ブログカード機能の停止に関する設定:URLの自動ブログカード化を停止する

「ブログカード」の機能が停止します。使おうとするとエラー扱いに。リンクへ変換を押すとテキストリンク(文字リンク)に変換されます。

ブログカードを使う予定のない人はこちら!

ブログカードの外部リンクをどう扱うかに関する設定です。

先ほども言ったようにAFFINGERのブログカードには外部リンクに対応していないという欠点があります(外部リンクを表示する際はプラグインが別途必要)。

ところで、実はブログカードの機能はWordPress本体にも用意されているんです。こちらは外部リンクにも対応しています。表にするとこう↓

内部リンク外部リンク
AFFINGER専用デザインのブログカード対応×(要プラグイン)
WordPress本体のブログカード対応対応

以上を踏まえると、外部リンクをどう扱うかでいろんな組み合わせができることになります。

  1. プラグインを買って内部リンク、外部リンクをAFFINGERのブログカードで統一する
  2. プラグインは買わない。内部リンク、外部リンクをWordPress本体のブログカードで統一する
  3. プラグインは買わない。内部リンクはAFFINGERのを使い外部リンクはWordPress本体のを使う
  4. プラグインは買わない。内部リンクはAFFINGERのを使い外部リンクはテキストリンクを使う

1.に関してはプラグインを購入すればOKなので省略することにして、これから2.3.の設定方法についてお話しします。4.はデフォルトの状態を指します。

設定場所は引き続きこちら↓

ダッシュボード】→【AFFINGER管理】 > "Gutenberg設定" > "埋め込みURL"

AFFINGER6(アフィンガー6):外部リンクの扱いに関する設定画面:埋め込みURL

デフォルトの状況はこのようになっています。

内部リンク外部リンク
AFFINGER専用デザインのブログカード利用中×(要プラグイン)
WordPress本体のブログカード××

デフォルトの埋め込みURL(ブログカード)の変換を停止

AFFINGER6(アフィンガー6):デフォルトの埋め込みURL(ブログカード)の変換を外部リンクのみ停止:内部リンク、外部リンクをWordPress本体のブログカードに統一する設定

こちらは「2:プラグインは買わない。内部リンク、外部リンクをWordPress本体のブログカードに統一する」人の設定です。AFFINGERのブログカードを機能を停止して全てのブログカードをWordPress本体のものに統一します。

表にするとこうです↓

内部リンク外部リンク
AFFINGER専用デザインのブログカード停止×
WordPress本体のブログカード利用利用

プラグインを使いたくなくて、内部リンクと外部リンクのデザインを統一感を持たせたい人はこちら

デフォルトの埋め込みURL(ブログカード)の変換を外部リンクのみ停止

AFFINGER6(アフィンガー6):デフォルトの埋め込みURL(ブログカード)の変換を停止:内部リンクはAFFINGERのを使い、外部リンクはWordPress本体のを使う設定

こちらは「3:プラグインは買わない。内部リンクはAFFINGERのを使い 外部リンクはWordPress本体のを使う」人の設定です。

ブログカードを使い分ける設定です。内部リンクに関してはそのままAFFINGERのブログカードを使用。外部リンクにはWordPress本体のブログカードを使用するようにします。ハイブリッドなスタイルです。

表にするとこうです↓

内部リンク外部リンク
AFFINGER専用デザインのブログカード利用×
WordPress本体のブログカード×利用

内部リンクと外部リンクのデザインがチグハグになるけど気にしない人はこちら。

WordPressのブログカードは外部リンクを貼った時に必ずしもカードになるわけではないので注意してください。相手側の記事がoEmbed?という技術に対応していないとカードにならないみたいです。

サムネイルに関する設定

ブログカードのサムネイル画像に関する設定です。

設定場所はこちら↓

ダッシュボード】→【AFFINGER管理】 > "全体設定" > "サムネイル画像設定" > "ブログカード・埋め込みURL"

AFFINGER6(アフィンガー6):サムネイルに関する設定画面:ブログカード・埋め込みURL

 内部リンクのサムネイル画像をそのまま表示する

表示される画像が正方形からサムネイル画像に変わります。サムネイル画像とは(設定メディア設定サムネイルのサイズ)で指定したサイズに保存された画像のことです。

サムネイル画像を右側に変更する

AFFINGER6(アフィンガー6):サムネイルに関する設定:サムネイル画像を右側に変更する

サムネイル画像がブログカードの右側に表示されます。場所が被るためラベルを使う際には気をつけてください。

サムネイル画像を角丸に変更する

AFFINGER6(アフィンガー6):サムネイルに関する設定:サムネイル画像を角丸に変更する

サムネイル画像が角丸で表示されます。つられて枠も角丸になります。

PC(960px以上)のサムネイル画像を大きくする

AFFINGER6(アフィンガー6):サムネイルに関する設定:PC(960px以上)のサムネイル画像を大きくする

パソコンで見るときサムネイル画像が大きく表示されます(横幅が2倍)。サムネイル画像をさらに大きく(β)にチェックを入れると横幅が3倍に。

内部リンクのサムネイル画像をそのまま表示すると同時に使うといいかも。

サムネイル画像を表示しない

AFFINGER6(アフィンガー6):サムネイルに関する設定:サムネイル画像を表示しない

サムネイル画像が消えます。

抜粋に関する設定

ブログカード内の抜粋に関する設定です。

抜粋に表示される文章は「"抜粋"で指定した文章」です。"抜粋"が空欄だったら記事の冒頭の文章が表示されます。

現在、ブロックエディタ版のブログカードでは抜粋の設定はできません。

「抜粋」に関する設定は現在(ver20221014)、クラシックエディタ版のブログカードにのみ反応するようです。今後のアップデートに期待。

設定場所はこちら↓

ダッシュボード】→【AFFINGER管理】 > "全体設定" > "抜粋設定"

AFFINGER6(アフィンガー6):抜粋に関する設定画面:抜粋設定

抜粋の文字数

抜粋で表示される文字数を変更できます。デフォルトは100。

PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする

デフォルトではパソコン閲覧時、抜粋が表示されていますがそれを非表示にできます。

スマホ(960px未満)閲覧時でも「ブログカード」の抜粋を表示する

デフォルトではスマホ、タブレット閲覧時、抜粋が非表示になっていますがそれを表示させます。


公式サイトの解説も合わせて読むといいよ!

以上!AFFINGER6のブログカード(ブロックエディタ版)に関するまとめでした。参考になれば嬉しいです!

-AFFINGER専用ブロック
-,