【AFFINGER6】で「合わせて読む」のブログカードを設定する方法

今回の記事は、AFFINGER6で「合わせて読む」の作り方を解説していきます。

AFFINGER6を導入したけど設定方法がわからない、と言う初心者の方向けにわかりやすく説明します。

ブログでは使用している方がほとんどの「合わせて読む」と言うブログカードですが、AFFINGER6ですと簡単に設定する事ができます。

こんな感じで他の記事を紹介するカードですね。

AFFINGER6でブログカードを設定する方法

AFFINGER6ではGutenbergの「ブロックエディタ」を使用する方法と「クラシックエディタ」を使用する方法があります。

当サイトはクラシックエディタを使用していますが、ブロックエディタの方も合わせてご紹介します。

AFFINGER6でブログカードを作るには、「埋め込み」を使います。

Gutenbergの左上の＋ボタンをクリックし、「埋め込み」アイコンを選択します。

埋め込みたい記事のURL画面が出てきますので、ブログカードとして表示させたい記事のURLを貼り付けます。

編集画面ではこのように表示されました。

キャプションを追加の部分に「合わせて読む」と入力してみましょう。

皆さんが思い描いていた通りになったかと思います。

簡単ですね。

「合わせて読む」を記事途中で埋め込みできたら、他の記事も読んでもらえる可能性が高くなりますので、是非作ってみて下さい。

クラシックエディタで作るメリットとしては、タイトルだけを表示させることができます。

まず、先ほどと同じように左上の＋メニューから「クラシック」を選択します。

そして赤枠のツールバー切り替え→カードを選択します。

そうすると下にショートコードが表示されます。

項目ごとに必要な内容を入力すれば、ブログカードをカスタマイズすることができます。

今回は私も含め、初心者の方向けですので、3か所だけ変更します。

id=""　ブログカードに表示させたい記事のIDを入力します。IDは「ダッシュボード」→「投稿」→「投稿一覧」で確認できます。

label=""　「合わせて読む」などの表示させたい文字を入力します。

readmore="on"　on→off　でタイトルだけの表示となります。

このように表示されました、当サイトと同じブログカードです。

私は触っていませんが、各項目についての説明をします。

項目	内容
st-card my class=""	基本的に空欄で大丈夫です
id=""	ブログカードに表示させたい記事IDを入力します
label=""	「合わせて読む」などの表示させたい文字を入力します
pc_height=""	パソコンでブログを見た時にどれくらいの高さでブログカードを表示するかを設定します
name=""	nameを入れることで、タイトルを自由に変える事が出来ます。通常は空欄で大丈夫です
bgcolor=""	ブログカードの背景色を変えることができます
color=""	文字色を変える事ができます
webicon=""	「合わせて読む」などのラベルの先頭にアイコンを入れることができます
readmore="on"	onにしていると続きを読むボタンが表示されoffにすると非表示になります
thumbnail="on"	記事のサムネイル画像を使用するかどうかを決めることができます
type=""	ラベルの種類を変える事が出来ます。(type="text"）と入力すると変わります

稼ぐに特化したWordPressテーマ【AFFINGER6】

ブログカードを使うと、訪問者に今読んでいる記事以外の関連記事も読んでもらえる可能性が高くなります。

色んな記事にアクセスしてもらうとブログの評価も上がります。

評価が上がると収益も上がる可能性があります。

訪問者も知りたかったことが一つのサイトで理解でき、また、運営者もたくさんの記事にアクセスしてもらえ、両方にメリットがあると思います。

以上が今回の記事内容になります。

「合わせて読む」のブログカードは非常に簡単に作ることができ、訪問者・管理者双方にメリットがあります。

是非、使って頂きたい機能です。

お読み頂きまして、ありがとうございました。