AFFINGER

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

2021年3月11日

AFFINGER5お知らせ

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

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

 

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

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

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

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

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

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

テキストリンク

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

基本スタイル

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

続きを見る

 

カードスタイル

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

 

スライドショー

パソコンとスマホ

How To

2023/5/14

画質の荒い画像をなめらかで鮮明な高画質に変換【WEB上で簡単】

画質の荒い画像を、AIが自動でなめらか且つ鮮明な画像に変換してくれるツールの紹介です。 PCへのソフトのインストール等不要!WEB上で完結します。   こんな人のお役に立てる記事です。 小豆 ブログで使いたい画像が荒くて使い物にならない。 鮮明な状態の元データはないんだけど、これって何とかならない? 目次 画質の荒い画像をWEB上で高画質に変換 画像変換ツールの使い方とダウンロードする際の注意点 類似サービス【kakudai AC】との比較と使い分け まとめ:荒さが目立つ画像の補正はAIにお任せ ...

ReadMore

Fire TV Stick

プライムビデオ

2023/4/29

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

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

ReadMore

パソコンの前で頭を抱える女性

生活お役立ち

2023/4/25

離れた場所のPCを遠隔操作【Windows標準機能】自宅から実家の両親をお助け

離れた場所にあるPCを、遠隔で操作する方法の紹介です。 使用するのはWindows標準の機能だから、安心・簡単。 自宅にいながら、離れて暮らす両親の「パソコンの困った」を解決できます。   こんな人のお役に立てる記事です。 小豆 離れて暮らす親から、パソコンの操作方法でよく電話がかかってくる。 自分で直接やれば5分の内容を伝えるのに、1時間くらいかかるんだけど・・。 これって、もっとお互いに効率のいい方法はないの? 目次 離れて暮らす親のパソコンを自宅から遠隔操作 クイックアシストの使い方 リモ ...

ReadMore

スピーカーネットのほこり

生活お役立ち

2023/4/17

サウンドバーやスピーカーに溜まったホコリを掃除【撫でるだけ】

ホコリの溜まりやすいサウンドバーやスピーカーの「サランネット※」の掃除方法です。 ※スピーカー部を覆っている網目状のカバー 色々な掃除方法を試してたどり着いた、おすすめの方法を紹介します。   こんな人のお役に立てる記事です。 小豆 サウンドバーがホコリだらけで、見た目が悪い。 常に目に入る場所にあるから、いつもきれいな状態にしておきたいんだけど・・。 短時間でサッと簡単に掃除できる方法はない? 目次 サウンドバーやスピーカーネットの掃除にはエチケットブラシが効果的だった エチケットブラシを使っ ...

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