こんにちは、ごー（@goo2929）です！
AFFINGER6でブログカードを使いたい！設置方法やカスタマイズ方法は？
このような悩みを解決します。
結論から言うと、本記事を読めばAFFINGER6で下記のようなブログカードを簡単に設置・カスタマイズできるようになります。
-
Contents
【これでOK！】ブログ初心者におすすめのASP11選を徹底解説！
続きを見る
内部リンクはSEOの上でも重要なので、おしゃれでユーザーが次の記事を読みたくなるようなブログカードを作ってみましょう！
本記事で分かること
- ブログカードの作り方2つ
- それぞれのカスタマイズ方法
最新情報
2021年1月5日より、AFFINGER6のβ版が一般公開されました。
すでにAFFINGER5を使用しているユーザーは無料でアップデートできるので、興味のある方は下記の記事を参考にしてみてください。
-
【神】徹底レビュー！AFFINGER6の詳細や導入方法を紹介！
続きを見る
-
【おすすめ特典あり】AFFINGER5の徹底レビュー&購入方法！
続きを見る
AFFINGER6でブログカードの作る方法を2つ紹介！
AFFINGER6でブログカードを作る方法はおもに以下の2つです。
- 「クラシック版の段落」を使う
- 「埋め込み」を使う
それぞれの特徴は下記のとおりなので、気になる項目だけ見るのもアリですよ。
設置方法の特徴
- 「クラシック版の段落」：少し難しさはあるが、カスタマイズ要素が多い
- 「埋め込み」：簡単に扱えるが、カスタマイズ要素が少ない
※クリックでそれぞれの設置方法までジャンプします。
それでは詳しく見ていきましょう！
「クラシック版の段落」を使う
まずは記事執筆画面で左上の「＋」を押してください。
利用できるブロックの一覧が表示されるので、「クラシック版の段落」をクリックします。
するとブロックの中にクラシックエディタのような段落が開かれます。
そのまま「カード」のボタンを押すと、下記のようなコードが表示されます。
このコードの一部分を「id="挿入したい記事ID"」に編集します。
ちなみに記事IDはWordPress管理画面の「投稿」→「投稿一覧」の右端で見ることができます！
そして実際に記事IDを挿入してプレビューで見てみると・・・
これで「クラシック版の段落」を使ったブログカード挿入方法は完了です！
もうひとつのブログカード挿入方法を見ていきましょう。
「埋め込み」を使う
こちらの方法はめちゃくちゃ簡単です。
まずは先ほどと同じく記事執筆画面の「＋」を押し、その後「埋め込み」のブロックを開きます。
そうすると下記のようなボックスが表示されるので、そこにあなたの挿入したい記事のURLを貼りつけて「埋め込み」を押してください。
なぜか異様に大きな画像が表示されていますが、気にせず「プレビュー」をクリックします。
すると・・・
無事、ブログカードが表示されました！
以上がAFFINGER6でブログカードを表示させる2つの方法です！
それでは表示したブログカードをカスタマイズしてみましょう！
AFFINGER6でブログカードをカスタマイズする方法
ここでは3つの項目に分けてブログカードをカスタマイズする方法を解説します。
- 「クラシック版の段落」で表示したブログカードをカスタマイズする方法
- 「埋め込み」で表示したブログカードをカスタマイズする方法
- 共通でカスタマイズできる部分（枠線の色・ラベルテキストの色など）
それぞれ見ていきましょう！
「クラシック版の段落」で表示したブログカードをカスタマイズする方法
正直、カスタマイズできることが多すぎるので、ここではよく使うカスタマイズを3つ紹介します。
紹介するのは以下の3つです。
- 抜粋を非表示にする方法
- ラベルのつけ方
- 「続きを見る」を消す方法
それぞれ見ていきましょう！
抜粋を非表示にする方法
抜粋とは下記のようにカードに記事の本文が記載されている部分のことです。
ちなみに当ブログでは抜粋を非表示にしています。
それでは実際にやってみましょう！
まずWordpress管理画面の「AFFINGER管理」→「デザイン」選択します。
少し下にスクロールすると「抜粋設定」の項目があります。
後は下記の画像のとおり2つのボックスにチェックして保存するだけです！
これで抜粋の表示はなくなりました！
めちゃくちゃ簡単ですね。
ラベルのつけ方
ここからはコードを少し変えることでカスタマイズしていきます。
とはいっても簡単なので安心してくださいね。
まずは「クラシック版の段落」を表示後、記事IDを入力した画面を見てみましょう。
この「label=""」の部分にあなたがラベルとして表示したい文章を入力します。
試しに「おすすめ記事」と入力してプレビューすると・・・
ラベルを表示させることができましたね！
ラベルの色の変更については後程解説します！
「続きを見る」を消す方法
次に下記の「続きを見る」の部分を削除します。
やり方はとても簡単で、クラシック版の段落の「readmore="on"」→「readmore="off"」にするだけです。
変更後、プレビューで見てみると・・・
「続きを見る」が消えてかなりすっきりした印象になりましたね！
以上紹介した3つのカスタマイズはかなり使用頻度が多いのでぜひ覚えてみてください。
「埋め込み」で表示したブログカードをカスタマイズする方法
ここでは「埋め込み」で表示したブログカードにラベルをつける方法を紹介します。
残念ながら現状ではこれしかカスタマイズができないようですが、その分めちゃくちゃ簡単なので初心者におすすめです！
まず、先ほどのURLを埋め込んだ状態でブロックの下のほうをクリックしてください。
現れた「キャプションを入力」の部分に「おすすめ記事」と入力してプレビューすると・・・
無事ラベルを表示することができました！
簡単なうえに「クラシック版の段落」で作ったラベルよりおしゃれ！
しかし抜粋の非表示ができないので、それが本当に惜しいです。
共通でカスタマイズできる部分（枠線・ラベルテキストの色など）
最後にブログカードの枠線やラベル・ラベルテキストの色をカスタマイズする方法を紹介します。
まずはWordpress管理画面の「外観」→「カスタマイズ」に移動します。
するとカスタマイズの設定画面が表示されるため、「オプション（その他）」→「ブログカード/ラベル」の順に進んでいきます。
そうするとブログカードの枠線やラベルの色が設定できる画面が開けます。
あとはあなたのお好みの色に調整すれば、カスタマイズ完了です。
以上でカスタマイズ方法の解説は終了です！お疲れさまでした！
AFFINGER6でブログカードを設置・カスタマイズする方法｜まとめ
2つのブログカードの特徴
- 「クラシック版の段落」：少し難しさはあるが、カスタマイズ要素が多い
- 「埋め込み」：簡単に扱えるが、カスタマイズ要素が少ない
ブログカードは小さいようで意外と大切な要素です。
ぜひ本記事で紹介した方法で読者が次のページに進みたくなるようなブログカードのカスタマイズをしてみてください。
今回は以上です。