AFFINGER

AFFINGER5【ブログカードのデザイン4種類】カスマイズも

2021年3月11日

AFFINGER5お知らせ

AFFINGER5で内部リンクに使用できる「ブログカード」の紹介です。

好みに合わせて使える4種類のデザインと使い方、カスタマイズ方法を解説していきます。

 

こんな人のお役に立てる記事です。

小豆
ブログ内で使用する内部リンクを、カード型にしたい。
デザインって、どんなものがあるの?
使い方とカスタマイズ方法を教えて。

AFFINGER5で表示可能な4種類のブログカード

内部リンクを使えば、記事を訪れたユーザーを関連する任意の記事へと誘導することができます。

サイトの滞在時間やPV数のUPにも、とても効果的なツールですね。

で、実際の内部リンクがこれ。

テキストリンク

小豆
よく見るスタイルだけど・・。
なんだか、パッとしないし見落とされてしまいそう。
いわゆる「テキストリンク」って呼ばれるタイプだね。
AFFINGER5なら、内部リンクをカード型で表示できるんだ。
大福

基本スタイル

U-NEXT
プライムビデオ一筋の僕がU-NEXT無料トライアルで感じた3つのこと

続きを見る

 

カードスタイル

スマホでの閲覧時に差が出ます。
PCで閲覧した場合は、カードスタイルカードスタイルBの見え方は同じです。

 

スライドショー

Windowsのパソコン

作業効率化

2022/12/7

Windows【スリープ状態になるのを一時的に解除する方法】ワンアクション

Windowsで、スリープ状態になるのを一時的に解除する方法です。 システム設定をその都度変更する必要なし! ワンアクションで、簡単にデスクトップ画面から設定ができます。   こんな人のお役に立てる記事です。 小豆ダウンロード中なんかに、気づくとPCがスリープ状態になっていることがある。 システム設定をその都度変更すればいいのは分かるけど、面倒すぎる。 これって、任意の時だけ簡単にスリープにならないように設定できないの? 目次 スリープ状態になるのを一時的に解除【ワンアクションで簡単】 Awak ...

ReadMore

Panasonicの子機

生活お役立ち

2022/12/4

Panasonicの子機を壁掛け【ネジ穴を開けずに設置する方法も】

Panasonicの電話機やインターホンの子機を、壁掛けにする方法です。 以下の内容で紹介していきます。 壁掛け設置に必要な専用ねじ 壁掛けにする手順 壁に大きなネジ穴を開けずに設置する方法   こんな人のお役に立てる記事です。 小豆机の上で場所をとる子機を壁掛けにしたい。 これって、素人でも簡単にできるの? 将来的に設置場所を変える可能性もあるから、壁に目立つねじ穴は開けたくない。 目次 Panasonicの子機を壁掛け設置 子機を壁掛けにする方法と必要なグッズ 壁に大きなネジ穴を開けずに子機 ...

ReadMore

Fire TV Stick

プライムビデオ

2022/11/30

プライムビデオ【2022年12月の配信予定作品】を画像で確認

Amazonプライムビデオで、2022年12月に配信予定の作品を画像付きでまとめました。    こんな人のお役に立てる記事です。 小豆12月のプライムビデオは、どんな作品が追加されるんだろう? タイトルだけでなく、画像でも確認したい。 目次 プライムビデオ【2022年12月の配信予定作品】一覧 配信予定作品と作品画像 プライムビデオをもっと楽しむためのグッズ まとめ:まずは無料トライアルから プライムビデオ【2022年12月の配信予定作品】一覧 2022年12月は、Amazonオリジナル作品の海 ...

ReadMore

WordPressテーマ

How To

2022/11/27

Easy FancyBoxでエラーが発生【以前の状態に戻す方法】AFFINGER

WordPressプラグイン【Easy FancyBox】アップデート時に、エラーが出たときの対処法です。 アップデート前の以前の状態に戻してエラーを解消します。   こんな人のお役に立てる記事です。 小豆Easy FancyBoxのアップデートをしたら、画像クリック時の挙動がおかしい。 これって、どうやったら直せるの? 元の状態に戻したいんだけど。 目次 プラグイン「Easy FancyBox」のアップデート時に起きたエラーと解決方法 ダウングレードでエラーを解決する方法 本来は最新バージョン ...

ReadMore

 

小豆
おぉ!
どれも目立つから、クリック率を上げることができそうだ。 

内部リンクをカード型にする方法

AFFINGER5で表示可能な「4種類のカード型内部リンク」の使い方を解説していきます。

4種類のカード型内部リンク

  1. 基本スタイル
  2. カードスタイル
  3. カードスタイルB
  4. スライドショー

 

① 基本スタイル

基本スタイル

横長表示のカードスタイルです。

基本スタイルの使い方

  1. カード をクリック
  2. id="" に表示したい記事のIDを入力

 

記事IDの調べ方

記事ID

画像クリックで鮮明に表示

WordPressメニュー → 投稿 → 投稿一覧 → 記事IDを確認

 

② カードスタイル / ③ カードスタイルB

カードスタイルB縦長表示のカードスタイルです。

「カードスタイル」と「カードスタイルB」は、デザインが異なるのみ。
設定手順は同じです。

カードスタイル表示方法

  1. スタイル → レイアウト → カードスタイル or カードスタイルB
  2. 表示された枠内に、カードを挿入
  3. id=""に表示したい記事のIDを入力

 

大福
カードスタイルは単体表示すると大きすぎるから、2列に並べて表示するのがおすすめだよ。

※2列に並べて表示する方法は、記事後半で解説しています。

 

④ スライドショー

スライドショー

新着記事や特定カテゴリーの記事を、スライドショー形式で表示することができます。

スライドショー表示

  1. タグ → 記事一覧/カード → カテゴリー一覧(スライドショー)
  2. cat="" に表示したいカテゴリーIDを入力

 

カテゴリーIDの調べ方

カテゴリーIDWordPressメニュー → 投稿 → カテゴリー → IDを確認

 

複数のカテゴリー記事を表示したい場合は、半角カンマで区切ってカテゴリーIDを入力します。
(例:cat="20,29")
カテゴリー記事ではなく「新着記事」を表示させたい場合は、デフォルトのcat="0"のままにしておきます。

自分好みに変更!ブログカードのカスタイマイズ方法

ブログカードは、デザインや設定を自分好みに変更することができます。

カスタマイズ

  • 基本スタイルのカスタマイズ
  • サムネイル画像のカスタマイズ
  • 横並び2列で表示させる方法

 

基本スタイルのカスタマイズ

基本スタイルのコード解説

[st-card myclass="" id="記事ID" label="ラベルテキスト" pc_height="カードの高さ" name="記事タイトル変更" bgcolor="ラベル背景色" color="文字色" fontawesome="アイコンを挿入" readmore="続きを見るの有無" thumbnail="サムネイル画像の有無" type="ラベルタイプ"]

 

ラベルをリボンデザインに変更

ラベルデザインの変更

デフォルトの「たすき掛け」から「リボンデザイン」に変更します。

ラベルデザイン設定

  1. WordPressメニュー → 外観 → カスタマイズ
  2. オプションカラー → ラベル → リボンデザインに

ラベルのカラー設定もここから行うことができます。

 

内部リンクカードにふきだしを追加

ふきだし追加

ふきだし追加をする場合は、カード ボタンは使用せず、タグ からカード型内部リンクを作成します。

ふきだし追加方法

  1. タグ → 記事一覧/カード → ブログカード → CHECK(ふきだし)
  2. id="" に表示させたい記事IDを入力
  3. 「こちらもCHECK」を任意のテキストに変更

 

大福
CHECH(ふきだし)ではなく、参考を選択した場合は以下のように表示されるよ。

参考

 

サムネイル画像のカスタマイズ

サムネイル画像のカスタマイズ

カード内に表示されるサムネイル画像は、以下の手順でカスタマイズできます。

サムネイル画像設定

WordPressメニュー → AFFINGER5管理 → デザイン → サムネイル画像設定

 

横並び2列で表示させる方法

横並び表示

ブログカードを横並び2列で表示する手順は以下の通りです。

 


  • レイアウト2列を挿入

    2列レイアウト

    タグ → レイアウト → 全サイズ → 左右50%

    PC、タブレットでのみ2列表示したい場合は、PCとTabを選択。
    スマホでは、1列表示されるようになります。


  • カードを挿入

    それぞれにカードを挿入する

    表示された左右のボックス内にカードを挿入 → 表示させたい記事IDを入力

    縦長のカードスタイル表示をしたい場合は、スタイル → レイアウト → カードスタイルも追加します。


  • デフォルトのテキストを削除

    テキストを削除

    最後に、デフォルトのこのテキストは最後に消して下さいを削除


 

まとめ:カード型の内部リンクを上手に使おう

内部リンクを目立たせるのに効果的な、カードスタイルの紹介でした。

関連する記事は、しっかりと内部リンクで繋いでブログの滞在時間をUPさせたいですね。

ただし、カード型内部リンクの使い過ぎには注意。

内部リンクしたい記事が複数に及ぶ場合は、テキストリンクの方がすっきり見えます。

個人的には、4記事を超えるときはテキストリンクがおすすめです。

 

  • AFFINGER5を検討中の人におすすめ
AFFINGER購入アイキャッチ
【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介

続きを見る

 

AFFINGER利用者向けオリジナル特典の販売

\ AFFINGER6にも対応済み /

オリジナル特典バナー

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ&役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選:2,980円 → 2,480円
・カスタマイズ&役立つテクニック 14選 4,980円 → 3,980円

 

特典詳細ページへ移動する

Sponsored Links

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER