AFFINGER

AFFINGER6のブログカードを完全攻略|設置やカスタマイズ方法を解説!

AFFINGER6のブログカードを完全攻略|設置やカスタマイズ方法を解説!
ごー

こんにちは、ごー(@goo2929)です!

AFFINGER6でブログカードを使いたい!設置方法やカスタマイズ方法は?

困っている人

このような悩みを解決します。

結論から言うと、本記事を読めばAFFINGER6で下記のようなブログカードを簡単に設置・カスタマイズできるようになります。

【これでOK!】ブログ初心者におすすめのASP11選を徹底解説!
【これでOK!】ブログ初心者におすすめのASP11選を徹底解説!

続きを見る

内部リンクはSEOの上でも重要なので、おしゃれでユーザーが次の記事を読みたくなるようなブログカードを作ってみましょう!

本記事で分かること

  • ブログカードの作り方2つ
  • それぞれのカスタマイズ方法

最新情報

2021年1月5日より、AFFINGER6のβ版が一般公開されました。

すでにAFFINGER5を使用しているユーザーは無料でアップデートできるので、興味のある方は下記の記事を参考にしてみてください。

【神】徹底レビュー!AFFINGER6の詳細や導入方法を紹介!
【神】徹底レビュー!AFFINGER6の詳細や導入方法を紹介!

続きを見る

【ブログ初心者向け】AFFINGER5の徹底レビュー&特典つき購入方法!
【おすすめ特典あり】AFFINGER5の徹底レビュー&購入方法!

続きを見る

AFFINGER6でブログカードの作る方法を2つ紹介!

AFFINGER6でブログカードの作る方法を2つ紹介!

AFFINGER6でブログカードを作る方法はおもに以下の2つです。

  • 「クラシック版の段落」を使う
  • 「埋め込み」を使う

それぞれの特徴は下記のとおりなので、気になる項目だけ見るのもアリですよ。

設置方法の特徴

※クリックでそれぞれの設置方法までジャンプします。

それでは詳しく見ていきましょう!

「クラシック版の段落」を使う

まずは記事執筆画面で左上の「+」を押してください。

左上の「+」をクリック
左上の「+」をクリック

利用できるブロックの一覧が表示されるので、「クラシック版の段落」をクリックします。

「クラシック版の段落」をクリック
「クラシック版の段落」をクリック

するとブロックの中にクラシックエディタのような段落が開かれます。

クラシック版の段落
クラシック版の段落

そのまま「カード」のボタンを押すと、下記のようなコードが表示されます。

「カード」のボタンを押すと、コードが表示される
「カード」のボタンを押すと、コードが表示される

このコードの一部分を「id="挿入したい記事ID"」に編集します。

記事IDを入力
挿入したい記事IDを入力

ちなみに記事IDはWordPress管理画面の「投稿」→「投稿一覧」の右端で見ることができます!

記事IDを見る方法
記事IDを見る方法

そして実際に記事IDを挿入してプレビューで見てみると・・・

ブログカードが表示されました!
ブログカードが表示されました!
ごー

これで「クラシック版の段落」を使ったブログカード挿入方法は完了です!

もうひとつのブログカード挿入方法を見ていきましょう。

>>「クラシック版の段落」のカスタマイズ方法までジャンプ

「埋め込み」を使う

こちらの方法はめちゃくちゃ簡単です。

まずは先ほどと同じく記事執筆画面の「+」を押し、その後「埋め込み」のブロックを開きます。

「埋め込み」をクリック
「埋め込み」をクリック

そうすると下記のようなボックスが表示されるので、そこにあなたの挿入したい記事のURLを貼りつけて「埋め込み」を押してください

挿入したい記事のURLを貼る
挿入したい記事のURLを貼る

なぜか異様に大きな画像が表示されていますが、気にせず「プレビュー」をクリックします。

「プレビュー」をクリック

すると・・・

ブログカードが表示されました
ブログカードが表示されました!

無事、ブログカードが表示されました!

ごー

以上がAFFINGER6でブログカードを表示させる2つの方法です!

それでは表示したブログカードをカスタマイズしてみましょう!

>>「埋め込み」のカスタマイズ方法までジャンプ

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

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

ここでは3つの項目に分けてブログカードをカスタマイズする方法を解説します。

  • 「クラシック版の段落」で表示したブログカードをカスタマイズする方法
  • 「埋め込み」で表示したブログカードをカスタマイズする方法
  • 共通でカスタマイズできる部分(枠線の色・ラベルテキストの色など)

それぞれ見ていきましょう!

「クラシック版の段落」で表示したブログカードをカスタマイズする方法

正直、カスタマイズできることが多すぎるので、ここではよく使うカスタマイズを3つ紹介します。

紹介するのは以下の3つです。

  • 抜粋を非表示にする方法
  • ラベルのつけ方
  • 「続きを見る」を消す方法

それぞれ見ていきましょう!

抜粋を非表示にする方法

抜粋とは下記のようにカードに記事の本文が記載されている部分のことです。

抜粋が表示された状態
抜粋が表示された状態
ごー

ちなみに当ブログでは抜粋を非表示にしています。

それでは実際にやってみましょう!

まずWordpress管理画面の「AFFINGER管理」→「デザイン」選択します。

「AFFINGER管理」→「デザイン」を選択
「AFFINGER管理」→「デザイン」を選択

少し下にスクロールすると「抜粋設定」の項目があります。

抜粋表示
抜粋設定までスクロール

後は下記の画像のとおり2つのボックスにチェックして保存するだけです!

2つの項目にチェック
2つの項目にチェック

これで抜粋の表示はなくなりました!

ごー

めちゃくちゃ簡単ですね。

ラベルのつけ方

ここからはコードを少し変えることでカスタマイズしていきます。

ごー

とはいっても簡単なので安心してくださいね。

まずは「クラシック版の段落」を表示後、記事IDを入力した画面を見てみましょう。

「クラシック版の段落」

この「label=""」の部分にあなたがラベルとして表示したい文章を入力します。

ラベル文字を入力
ラベル文字を入力

試しに「おすすめ記事」と入力してプレビューすると・・・

ラベルが表示されました
ラベルが表示されました!

ラベルを表示させることができましたね!

ごー

ラベルの色の変更については後程解説します!

「続きを見る」を消す方法

次に下記の「続きを見る」の部分を削除します。

「続きを見る」
「続きを見る」を削除します

やり方はとても簡単で、クラシック版の段落の「readmore="on"」→「readmore="off"」にするだけです。

"on"→"off"にします
"on"→"off"にします

変更後、プレビューで見てみると・・・

「続きを見る」が消えました
「続きを見る」が消えました!

「続きを見る」が消えてかなりすっきりした印象になりましたね!

ごー

以上紹介した3つのカスタマイズはかなり使用頻度が多いのでぜひ覚えてみてください。

「埋め込み」で表示したブログカードをカスタマイズする方法

ここでは「埋め込み」で表示したブログカードにラベルをつける方法を紹介します。

ごー

残念ながら現状ではこれしかカスタマイズができないようですが、その分めちゃくちゃ簡単なので初心者におすすめです!

まず、先ほどのURLを埋め込んだ状態でブロックの下のほうをクリックしてください。

キャプションを表示させる
キャプションを表示させる

現れた「キャプションを入力」の部分に「おすすめ記事」と入力してプレビューすると・・・

ラベルが表示されました
ラベルが表示されました!

無事ラベルを表示することができました!

ごー

簡単なうえに「クラシック版の段落」で作ったラベルよりおしゃれ!

しかし抜粋の非表示ができないので、それが本当に惜しいです。

共通でカスタマイズできる部分(枠線・ラベルテキストの色など)

最後にブログカードの枠線やラベル・ラベルテキストの色をカスタマイズする方法を紹介します。

まずはWordpress管理画面の「外観」→「カスタマイズ」に移動します。

「外観」→「カスタマイズ」に移動
「外観」→「カスタマイズ」に移動

するとカスタマイズの設定画面が表示されるため、「オプション(その他)」→「ブログカード/ラベル」の順に進んでいきます。

「オプション(その他)」→「ブログカード/ラベル」
「オプション(その他)」→「ブログカード/ラベル」

そうするとブログカードの枠線やラベルの色が設定できる画面が開けます。

ブログカード/ラベル設定画面
「ブログカード/ラベル」設定画面

あとはあなたのお好みの色に調整すれば、カスタマイズ完了です。

ごー

以上でカスタマイズ方法の解説は終了です!お疲れさまでした!

AFFINGER6でブログカードを設置・カスタマイズする方法|まとめ

AFFINGER6でブログカードを設置・カスタマイズする方法|まとめ

2つのブログカードの特徴

  • 「クラシック版の段落」:少し難しさはあるが、カスタマイズ要素が多い
  • 「埋め込み」:簡単に扱えるが、カスタマイズ要素が少ない

ブログカードは小さいようで意外と大切な要素です。

ぜひ本記事で紹介した方法で読者が次のページに進みたくなるようなブログカードのカスタマイズをしてみてください。

今回は以上です。

-AFFINGER
-,