自分流にブログカードのデザインをカスタマイズしたい！
そんな方向けの記事です。
リンクをカード風にして目立たせることができるブログカード。
多くのブログで使われていますが、この記事ではAFFINGER6（アフィンガー6）でのブログカードの作り方を画像つきで詳しく解説していきます。
ブログカードをカスタマイズする方法も合わせてご紹介するので、他とは違ったリンクの装飾をしたい！という方は最後まで読んで自身のブログに取り入れてみてくださいね。
目次（お好きなところからどうぞ！）
アフィンガー6でのブログカードの作り方
続きを見る
【AFFINGER6 豪華33特典付きレビュー】1年使ってわかったメリット・デメリット
↑
こんな感じのブログカードを作る方法を解説します。
ブロックエディタの場合
ブロックエディタでブログカードを作るには、表示したい箇所にURLを貼り付けるだけでOKです。
すると管理画面ではこんな風に表示され、
プレビューで見てみるとこんな感じ。
このままでもブログカードとして見栄えは悪くないかなと思うのですが、ラベルをつけたい場合は「キャプション」というところに任意の文字を入力すればOKです。
試しに「あわせて読みたい」と入力してプレビューしてみるとこんな感じ。
ラベルの色を変更したい場合は、「外観」→「カスタマイズ」→「オプション」→「ブログカード / ラベル」から変更できます。
ちなみに、本当はここからラベルのデザインもたすき掛けに変更できるはずなんですが、ブロックエディタでやるとなぜかリボンにしかできなかったので、ブログカードのラベルをたすき掛けにしたい人はクラシックエディタでやるのが良さそうです。
クラシックエディタの場合
クラシックエディタでブログカードを作る場合は、挿入したい場所でビジュアルエディタの「カード」をクリックします。
テキストエディタの場合は下記コードを挿入すればOKです。
「st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""」
※コピーして貼り付ける場合は「」を[]に変換してください。
あとは上記コードの「id=""」のところにブログカードにしたい記事のIDを入力すればOK。
IDは投稿一覧から確認できます。
IDを入力してプレビューしてみるとこんな感じ。
これでも全然いいんですが、たすき掛けを追加したい場合は「label=""」のところに文字を入力すればOKです。
試しに「関連記事」と入力してみるとこんな感じ。
より目立つようになりましたね。
アフィンガー6でのカードスタイルの作り方
↑
こんな感じのカードスタイルを作る方法を解説します。
ブロックエディタの場合
ブロックエディタでカードスタイルを作るのは難しそうだったので、この記事では割愛させていただきます。
- コードエディターを使う
- HTMLとして編集する
という手段でブロックエディタでもカードスタイルは作れるとは思いますが、その場合クラシックエディタでやる場合のコードを入力する形になるので、以下を参考にしてください。
クラシックエディタの場合
クラシックエディタでブログカードを作る場合は、挿入したい場所でビジュアルエディタの「カード」をクリックします。
テキストエディタの場合は下記コードを挿入すればOKです。
<div class="st-cardstyle"> 「st-card id=2 label="" name="" bgcolor="" color="" readmore="on"」 </div>
※コピーして貼り付ける場合は「」を[]に変換してください。
先ほど挿入したコードを選択した上で、「スタイル」→「レイアウト」→「カードスタイル」とクリックします。
カードスタイルにしたい記事IDを入力すると、このように表示されます。
画像が粗い場合は、「AFFINGER管理」→「全体設定」→「サムネイル画像設定」から「フルサイズにする」にチェックを入れ、「サムネイルの形状・サイズ・角丸設定からブログカードを除外（※一部、カードURL含む）」のチェックをはずせば解消されるかと思います。
ブログカードのカスタマイズ手順
デフォルトのままでもけっこう見栄えはいいのですが、ブログカードをカスタマイズする方法について解説します。
ラベルの色・デザインを変更する
「外観」→「カスタマイズ」→「オプション（その他）」→「ブログカード / ラベル」から、
- 枠線の色と太さ
- ラベルの背景色
- ラベルテキストの色
- ラベルのデザイン
を変更することができます。
コードの意味
ブログカードを表示するためのコードを変更することでもデザインをカスタマイズできます。
それぞれのコードの意味は以下の通り。
| 値 | 意味 |
|---|---|
| label="" | ラベルの文字 （例：label="関連記事"） |
| pc_height="" | パソコンで見た時のブログカードの高さ （例：pc_height="200"） |
| name="" | タイトルの文字 （※ここを入力するとタイトルを変更可能） |
| bgcolor="" | ラベルの背景色 （例：bgcolor="#1e73be"） |
| color="" | ラベルの文字色 （例：color="ffffff"） |
| readmore="" | onを削除すると「続きを見る」の表示が消える |
画像のサイズ・デザインを変更する
ブログカードに表示されるサムネイル画像のサイズやデザインは「AFFINGER管理」→「全体設定」→「サムネイル画像設定」から変更することができます。
サムネイルの位置やデザインも変更できるので、自分好みにカスタマイズしてみてくださいね。
抜粋文の文字数を変更する
ブログカードに表示される抜粋文の文字数は「AFFINGER管理」→「全体設定」→「抜粋設定」から変更できます。
抜粋文を任意の文字数にしたい時は「抜粋の文字数」に数字を入力すればOK。
抜粋文を消したい場合は「PC閲覧時の「ブログカード」及びコンテンツ内の「おすすめ記事」の抜粋を非表示にする」にチェックを入れればOKです。
ブログカードとテキストリンクはどっちがいい？
ブログカードもテキストリンクもどちらも同じリンクなのですが、使い分けることが重要だと思っています。
ブログカードは目立つので、クリックしてほしい内部リンクに使うといいですね。
逆に参考記事のリンクなど、便宜上載せているものなどはテキストリンクのほうが邪魔じゃなくていいです。
また、複数のリンクを貼る場合、ブログカードだと目立ちすぎるのでテキストリンクが適しているかなと思います。
外部リンクもブログカードにできる？
アフィンガーの場合、基本的には内部リンクしかブログカードにすることができませんが、「Pz-LinkCard」というプラグインを使えば外部リンクでも近しいブログカードにすることができます。
ただ、外部リンクを貼る場合は基本的に、
- 引用した記事
- アフィリエイトリンク
のどちらかだと思うので、そこまで目立たせる必要はないかなと考えています。
アフィリエイトリンクの場合はクリックしてほしいので目立たせたいですが、であればボタンにしたほうがクリック率は上がるかなと思います。
ブログカードをうまく使って回遊率の高いブログに
ブログカードはパッと目を引きますし、内部リンクのクリック率を上げる装飾として有効です。
ただし、目立つのであまり使いすぎると鬱陶しいというデメリットもあります。
なので、テキストリンクとうまく使い分けて適度に使用するようにしましょう。
アフィンガーの場合は簡単にブログカードが作れ、カスタマイズもできるので、ブログカードをうまく使って回遊率の高いブログを作成してくださいね。
その他アフィンガーの機能紹介や特典つきのレビューをまとめた記事もあるので、購入を検討している方は合わせて読んでもらえると幸いです。
-
【AFFINGER6 豪華33特典付きレビュー】1年使ってわかったメリット・デメリット
続きを見る
解説動画
動画でもブログカードの作り方を撮ったので、文章だとわかりづらいという方はぜひ参考にしてください。
