AFFINGER 投稿記事のカスタマイズ

【AFFINGER6】内部リンク・外部リンクをブログカードで作る方法

2022年5月6日

当サイトのコンテンツには、広告を記載している場合があります。<景品表示法に基づく記載>

 

書いた記事のクリック率をもっとアップさせるために、ブログカードを作りたいなぁ…

 

内部リンクはもちらろん、外部リンクのブログカードも作成できますよ!

 

今回の記事はこんな疑問を解決していきます。ブログカードは、ユーザビリティを高め、クリック率の向上に効果的です。

 

AFFINGER6の機能を活用して、ブログカードの設置方法をご紹介しますので、ぜひ参考にしてみて下さい!

 

 

本記事の内容

AFFINGER6を使った内部リンクのブログカードを設置する方法について

外部リンクをブログカード風に設置する方法について

ブログカードをクリックしてもらうための工夫について

 

この記事を書いた人

 

\ 当ブログ使用テーマ /

  • 誰でも簡単オシャレなデザイン!
  • インフォトップ月間総合第1位!
  • SEO対策と収益UPを標準で搭載!

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです!

AFFINGER6の購入はこちら

 

AFFINGER6を使った内部リンクのブログカードを設置する方法について

イラスト

 

AFFINGER6のブログカードの作成方法はいくつかあります。

 

カスタマイズの設定や表示切り替えをするだけでも、見た目の結構切り替えることが可能です。

 

実際に作成したブログカードはこちら

参考ショート動画大量生成!AIツール「NoLang」でWebページを瞬時に動画化

続きを見る

 

こちらもCHECK

ショート動画大量生成!AIツール「NoLang」でWebページを瞬時に動画化

続きを見る

 

【AFFINGER6】クリック率UP!ブログカードを作る方法【超簡単に作成可能】

続きを見る

 

それぞれの設置方法を解説していきます!

 

AFFINGER6でブログカードを設置する方法

AFFINGER6にて、内部リンクをブログカードで表示する方法はとても簡単に設置できます。

 

WordPressの管理画面より、投稿編集画面を開きましょう

 

以下の画像のように「タグ」→「記事一覧/カード」→「ブログカード」の選択し、「参考」 or 「CHECK(吹き出し)」のお好みの方を選択してください。

 

 

 

ポイント

編集画面上部の「カード」を選択することでも、内部リンクをブログカードにすることができます。コードが出力されたら、希望の記事IDを記入しましょう。

 

 

記事のIDの確認方法は、WordPress管理画面から「投稿一覧」へ移動し、IDの項目にて確認しましょう!

 

 

また、ブログカードのコードか出力されたら、カードのカスタマイズもできるようにしておきましょう。

 

 

ブログカードのプログラムコード解説

label="〇〇" :ラベルのテキスト
name="〇〇": ブログカードタイトル
fontweight="〇〇" :bold(太い文字)、normal(通常の文字)のフォントの太さ
bgcolor="〇〇" :ラベルの背景色
color="〇〇": ラベルの文字色
radius="〇〇" :ブログカードのラベル角の丸み
id="〇〇" :表示させたい記事のid
readmore="〇〇":「続きを読む」ボタン表示を「on」 or 「off」で切り替え

 

これらの項目をお好みで設定して、カスタマイズしてみましょう!

 

AFFINGER6の内部リンクをオシャレに表示する方法

 

AFFINGER6では、内部リンクを表示させる方法はブログカードだけではありません!

 

他にも、オシャレな内部リンクを表示させて読者のユーザーの目を惹きつけるような表示をする方法がありますので、そちらも解説します。

 

 

おしゃれな内部リンクで代表的なものが投稿記事一覧のスライドショーです。

 

設定方法は簡単で投稿変数画面にて、「カテゴリ一覧(スライドショー)」を選択して下さい。

 

 

実際に表示される記事スライドショー

2024/5/24

ショート動画大量生成!AIツール「NoLang」でWebページを瞬時に動画化

  Webページの情報を簡単に動画化できるツールはないだろうか? AI動画作成ツール「NoLang」を使えば、一瞬でショート動画に変換できますよ!   こんにちは、ルーティンラボ管理人のせなお(@rutinelabo)です! 今回は、AIツール「NoLang」を活用してブログ記事やウェブページを簡単に動画に変換する方法について紹介していきます。   この記事を読むことで、Webページの情報をショート動画にする手間を大幅に削減し、コンテンツ制作の効率が向上します。   ...

ReadMore

2024/5/21

【レビュー】高機能かつシンプルな画面録画ソフト「EaseUS RecExperts」使ってみた感想

  パソコンで作業効率に画面収録ソフトってないかな?? EaseUS「RecExperts」なら、画面収録の作業効率が大幅にできますよ!   こんにちは、ルーティンラボ管理人のせなお(@rutinelabo)です! 今回はEaseUS様より提供いただき、パソコン用の画面録画ソフト「EaseUS RecExperts」について、その特徴と使い方、および具体的な使用感を紹介します。   このソフトは多機能でありながら、かなりシンプルなUIになっているので、初心者から上級者まで幅広 ...

ReadMore

2024/5/14

自動翻訳AI「Captions」がすごい!超自然に他言語への変換で英語動画が簡単に

  多言語コンテンツを作りたい!!けど、英語も話せないし、便利なツールも知らない… 超自然に翻訳してくれるAI「Captions」を使えば、翻訳動画がかなり簡単に作れますよ!   こんにちは、ルーティンラボ管理人のせなお(@rutinelabo)です! 今回は、AI翻訳ツール「Captions」の使い勝手と機能を詳しく紹介します。「Captions」を活用すれば、多言語対応のコンテンツ作成が効率的に行えるようになります。   この「Captions」は、英語は喋れないけど英語 ...

ReadMore

2024/5/9

Elevenlabs完全ガイド:AIでテキストを自然な音声に変換し、収益化する方法

  音声に変換する最新AIツールって、何ができるの? 「ElevenLabs」なら、テキストから自然に話す音声生成や声の収益化までできます!   こんにちは、ルーティンラボ管理人のせなお(@rutinelabo)です! 今回の記事ではAI音声生成ツール「Elevenlabs」に焦点を当て、その機能と活用法について深く掘り解説していきます!   このツールは、テキストから音声への変換、他人の声への声変換、動画の言語翻訳機能など、多様な機能を持っており、特にアフィリエイト収益化に ...

ReadMore

2024/5/4

動画生成AI「PIKA」がアップデート!リップシンクとサウンドエフェクトの使い方とその活用方法を解説!

  今流行りのAI を使って人を喋らせる動画ってどうやって使うの?? 動画生成 AI PIKAの「リップシンク」の機能を使えば簡単に作れるよ!   こんにちは、ルーティンラボ管理人のせなお(@rutinelabo)です! 今回は画生成AI 「PIKA」に新しく追加されたリップシンクの機能について紹介していきます。このリップシンクの機能ですが、最近AIに関するコンテンツ作成では、かなり人気になっている機能です。   この機能を使うことで、キャラクターや人物が自然な話している動画 ...

ReadMore

 

具体的な編集方法は、以下の記事より解説しております。

 

【AFFINGER6】トップページのカスタマイズ方法を解説【見た目が整う!】

続きを見る

 

外部リンクをブログカード風に設置する方法について

イラスト

 

次は、AFFINGER6で外部のリンクをブログカードにする方法をご紹介します。

 

こちらに関してはデフォルトでAFFINGER6には標準で外部リンクのブログカード作成する機能は備わっていません。

 

そのため、WordPressのプラグインをインストールすることで作成可能となります。

 

Pz-LinkCardのインストール

外部リンクをブログカードに表示するプラグイン「Pz-LinkCard」をインストールしていきます

 

WordPressの管理画面から「プラグイン」→「新規追加」に移動し、「Pz-LinkCard」で検索をしましょう。

 

 

今すぐインストール」→「有効化」して、Pz-LinkCardを使えるように設定を完了させましょう。

 

外部リンクをブログカードで表示する手順

Pz-LinkCardをインストール・有効化でできたら、投稿編集画面に移動してみましょう。

 

以下のような編集画面上部にカードのアイコンが表示されていると思います。

 

 

あとは、こちらのアイコンをクリックして、表示されるウィンドに外部リンクにしたいURLを貼り付けましょう!

 

 

実際に作成したものがこちら

[blogcard url="https://amzn.to/3MTvfZC"]

 

最近購入した骨伝導イヤホンがかなりおすすめです!

 

 

Pz-LinkCardのブログカードをデザイン変更する方法

Pz-LinkCardで設置したブログカードは大きさや配色などのデザインをカスタマイズすることも可能です。

 

WordPress管理画面の「定」→「Pzカード設定」に移動しましょう。

 

 

 

 

サムネイルの表示設定や余白・ホバー効果のカスタマイズまで、細かい設定が可能です

 

設定項目を工夫することでかなりオシャレにブログカードが簡単に作成できるので、ぜひカスタマイズしてみて下さい。

 

ブログカードをクリックしてもらうための工夫について

イラスト

 

ブログカードの作成も完了です。

 

あとは読者のユーザーにいかにクリックしてもらえるかが重要なポイントになってきます

 

具体的な工夫は以下のポイントにまとめておきました。

 

クリック率UPのポイント

  • アイキャッチ画像とタイトルがマッチしているか
  • 見るだけで記事内容がイメージできるタイトル
  • 記事のリンクが前後の内容と関連しているか

 

ただ単に、ブログカードや内部リンクに誘導するのではなく、ユーザーの方がついついクリックしてしまうような工夫を考えてみましょう。

 

何事も工夫が大切ですね!

 

まとめ:AFFINGER6で内部・外部リンクをブログカードでオシャレに作る

イラスト

 

以上、AFFINGER6で内部・外部リンクをブログカード作成し、カスタマイズ方法の紹介でした。

 

今回のポイントは以下の通り

 

AFFINGER6で内部・外部リンクをブログカードで作る

  • AFFINGER6で内部リンクは簡単にブログカードで作成できる
  • AFFINGER6で外部リンクはプラグインを利用することで作成可能
  • 外部リンクはプラグイン「Pz-LinkCard」を活用
  • Pz-LinkCardはカスタマイズすることでオシャレな外部リンクが作成可能

 

今回はAFFINGER6でブログカードの設置方法の解説でした。

 

ブログカードを活用することは、ユーザービリティを高め、ブログ運営においても重要な要素になってきます。

 

標準機能に加え、プラグインを使用しながら、より良いコンテンツを作成してみて下さい!

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.7万PV|YouTubeチャンネル収益化達成!|最新のAIとITに関する情報発信|ガジェットレビュー|Webデザイン| 動画編集スキル|X, Instagram、TikTokで情報発信|月3万円から副業術

-AFFINGER, 投稿記事のカスタマイズ
-,