PR AFFINGER6 ブログ運営 ワードプレス

【画像と動画で】AFFINGER6で記事カードを表示させる方法『3つ』を徹底解説!

2023年12月13日

おすすめ記事一覧

AFFINGER6 ブログ運営

2024年7月18日

【ブログアフィリエイト即戦力8大特典あり!】AFFINGER6初心者さん向けレビューでおすすめポイントを確認!

ブログアフィリエイトを強力に後押しする8大独自特典付きAFFINGER6レビューを大公開!自身の経験をもとにSEO効果など具体例を挙げて初心さん向けに優しく解説しています!

ReadMore

ブログ運営

2024年7月18日

【お友達5000円以上割引】エックスサーバーで超お得にサーバー契約&ドメインを取得する方法を解説!

お友達紹介プログラムを利用してエックスサーバーを超お得な割引価格で契約する方法と独自ドメインを永久無料で取得する方法を画像を使って徹底解説!キャンペーン時にはお友達紹介プログラムの倍の報酬でさらにお得になるセルフバックの方法も合わせて解説!

ReadMore

ブログ運営 ワードプレス 悩み

2024年7月18日

【ブロガー100人アンケート】ブログの収益化は何記事・何か月で出来る?現実とノウハウを徹底分析!

収益化にかかる期間はどれくらい?何記事で出来るの?ブロガー100人アンケートの結果と実体験から徹底的に分析!

ReadMore

ブログ運営 ワードプレス

2024年7月18日

【初心者必見】ワードプレスの無料テーマと有料テーマ、メリット・デメリットを徹底解説

ワードプレスで作ったサイトの見た目をガラッと変える『テーマ』には有料と無料が存在。それぞれのメリット・デメリットについて初心者さん向けに分かりやすく徹底的に解説します。

ReadMore

ブログ運営 ワードプレス

2024年7月18日

【戦略】ブログの方向性(3つのWHAT)とキーワード選定方法

漠然とブログを始めてみたいと思っている方はどんなジャンルで記事を書いていこうかということがまだ定まっていないかもしれません。 かく言う私もブログを最初に始めた時は、とりあえず始めてみてなんでもいいから興味のあることを記事にしたり、買った商品のレビュー記事を書いていました。 そのようないわゆる『雑記ブログ』でも稼げるようにはなるのですが、ある程度ブログの方向性を決めておくと稼げるようになるまでの時間が早かったり最終的な収益額も多くなることがあります。 というわけで今回の記事ではブログの方向性を決めるための3 ...

ReadMore

ブログ運営

2024年7月18日

キーワードプランナーを無料で使う方法を画像と動画で徹底解説!【初心者必見】

キーワードプランナーを無料で使う方法を画像と動画を使って初心者さん向けに優しく詳しく解説!

ReadMore

字幕動画解説

AFFINGER6をお使いのみなさんのトップページはどのようなスタイルになっているでしょうか。

デフォルトの状態では上の画像のように、左に小さいアイキャッチ画像が表示され、右にタイトルと抜粋が表示されています。

この状態でも悪くはないのですが、上の画像のようにアイキャッチが大きめの記事カードにすると見栄えがさらに良くなりますよね。

わぁ、こっちのほうがクリックしたくなるかも…!
後輩ネコ
後輩ネコ

ということで、今回の記事ではAFFINGER6トップページ記事カードを表示する方法を初心者さん向けに画像と動画を使って詳しく解説してみたいと思います。

解説ポイント

  • トップページの挿入コンテンツから記事カードを表示させる方法
  • 公式プラグイン『AFFINGERデザインカード』で記事カードを表示させる方法
  • AFFINGER6EX版で記事カードを表示させる方法
大きくて見やすいカードがいい!
後輩ネコ
後輩ネコ
とのぽん
とのぽん
クリック率も上がるといわれてるから頑張って設定してみよう!

トップページの挿入コンテンツから記事カードを表示させる方法

  • 『AFFINGER管理』⇒『全体設定』⇒『サムネイル画像設定』
    • 『フルサイズにする』にチェック
    • 『PC(960px以上)のサムネイル画像を大きくする』にチェック
    • 『スマホ(599px以下)でもサムネイル画像を大きくする』にチェック
    • 『サムネイル画像をさらに大きく(β)』にチェック
  • 『AFFINGER管理』⇒『トップページ』⇒『挿入コンテンツ』に記事一覧を挿入する
    • 『タグ』⇒『レイアウト』⇒『PC・Tab(959px)以上』⇒『左右50%』を挿入
    • 左右に『タグ』⇒『記事一覧/カード』⇒『カテゴリー記事一覧』を挿入
    • カテゴリIDとページ数を入力
    • 『このテキストは最後に消して下さい(50%)』は最後に削除

まずはAFFINGER管理のトップページ設定の『挿入コンテンツ』を使って記事カードを表示させる方法を解説していきます。

大まかな流れは上記のようになっています。

それでは詳しくみていきましょう。

『AFFINGER管理』⇒『全体設定』⇒『サムネイル画像設定』

まずは、ワードプレスサイドバーより『AFFINGER管理』⇒『AFFINGER管理』⇒『全体設定』とすすみましょう。

続いて、『サムネイル画像設定』をクリックし、

  • 『PC(960px以上)のサムネイル画像を大きくする』にチェック
  • 『スマホ(599px以下)でもサムネイル画像を大きくする』にチェック
  • 『サムネイル画像をさらに大きく(β)』にチェック

していきましょう。

最後に『Save』をクリックしましょう。

『AFFINGER管理』⇒『トップページ』⇒『挿入コンテンツ』に記事一覧を挿入

まずはAFFINGER管理の『トップページ』タブをクリックしましょう。

一番上に『挿入コンテンツ』に記事カードを入れていきます。

テキストモードになっている場合はまず『ビジュアルモード』に切り替えましょう。

『タグ』をクリック

  • レイアウト
  • PCとTab(959px以上)
  • 左右50%

とクリックしていきましょう。

すると上の画像のように左右に半々で分割する枠ができます。

左の枠内をクリックし、『タグ』をクリックします。

続いて、

タグのドロップダウンメニューから

  • 記事一覧/カード
  • カテゴリー記事一覧

とクリックしていきましょう。

続いて、カテゴリー記事一覧のタグ内の『cat="0"』に、表示したい記事のカテゴリーIDを入力しましょう。

例えばカテゴリーIDが『36』であれば『cat="36"』というふうになります。

右の枠にも同様にして記事カテゴリー一覧を入れましょう。

『このテキストは最後に消してください(50%)』は消しておきましょう。

最後に『Save』をクリックして設定を保存しましょう。

以上の操作で、上の画像のような記事カードがトップページに表示されます。

公式プラグイン『AFFINGERデザインカード』で記事カードを表示させる方法

  • 購入者専用公式サイトからプラグインをダウンロード
  • プラグインをインストール
    • 続けて有効化する
  • 『デザインをセットする』ボタンをクリック
    • これでデザインが簡単に適用される
  • カスタマイズは固定ページの『AFFINGERデザイン TOPページ(default)』から行う
トップページの挿入コンテンツで記事カードを表示させるのは面倒くさい!
後輩ネコ
後輩ネコ

という人は、AFFINGERシリーズをリリースしているONSPEEDさんが購入者向け公式サイトで無料配布している『AFFINGERデザインカード』というプラグインを使うのもいいでしょう。

設定は上記の流れになります。

それでは詳しく見ていきましょう。

ONSPEEDさんはAFFINGERデザインカードプラグインの個別サポートは行っていません。

プラグインをダウンロード

まずはAFFINGERシリーズ購入者のみログインできるAFFINGERデザインカードプラグインダウンロードサイトにアクセスしましょう。

ダウンロードページには様々なデザインが用意されているので気に入ったものを『ダウンロード』しましょう。

プラグインをインストール&有効化

AFFINGERデザインカードプラグインがダウンロードできたら

  • 『プラグイン』⇒『新規プラグインを追加』と進む
  • 『プラグインのアップロード』をクリック
  • 『ファイルの選択』からダウンロードしたAFFINGERデザインカードプラグインをアップロード
  • 『今すぐインストール』をクリック
  • 『プラグインを有効化』をクリック

の順に操作していきましょう。

デザインをセットする

AFFINGERデザインカードプラグインが有効化されると左サイドバーに表示されます。

  • サイドバーの『AFFINGERデザインカード』をクリック
  • 『デザインをセットする』をクリック

と操作しましょう。

これで選択したデザインがトップページに反映されます。

固定ページ『AFFINGERデザインTOP』からカスタマイズ

AFFINGERデザインカードのカスタマイズは固定ページにある『AFFINGERデザイン TOPページ』から行えます。

レイアウトなどを好みにカスタマイズしてみてください。

AFFINGER6EX版で記事カードを表示させる方法

  • 『AFFINGER管理』⇒『投稿・固定記事』と進む
  • 『カードデザイン』をクリック
  • トップページ及びアーカイブの記事一覧をカードデザインにする』にチェック
    • 適宜、列数の設定をする(列数は左からPC・タブレット・スマホで表示するカードの列数)

別途購入する必要がありますが、AFFINGER6EX版では標準でトップページを記事カード化する機能がついていて、上の画像にあるような記事カードが簡単設定で表示できます。

AFFINGER管理のトップページ挿入コンテンツで作ったものよりも見栄えがいい記事カードが表示できる仕様となっています。

EX版の設定方法は上記のようにとても簡単なので、お金に余裕がある人はEX版を手に入れてみてもいいでしょう。

参考
【8大独自購入特典あり】AFFINGER6EX版とAFFINGER6はどっちを選ぶべき?分かりやすい機能チラ見せレビュー!

AFFINGER6の上位互換バージョンAFFINGER6EXの機能を画像付きで分かりやすくチラ見せレビューしちゃいます!どちらを買った方がいいのか迷っている初心者さん必見!当サイトから購入した場合の強力な独自特典もご用意しています!

続きを見る

『AFFINGER管理』⇒『投稿・固定記事』

  • ワードプレスダッシュボードサイドバーより『AFFINGER管理』⇒『AFFINGER管理』と進
  • 『投稿・固定記事』タブをクリック

と操作していきましょう。

『カードデザイン』をクリック

上部にある『カードデザイン』をクリックしましょう。

トップページ記事デザインをカード化

  • 『トップページ及びアーカイブの記事一覧をカードデザインにする』にチェック
  • 『列数設定』を入力

列数設定は(PCでの表示列数,タブレットでの表示列数,スマホでの表示列数)となっています。(2,2,1)ならPCで2列表示、タブレットで2列表示、スマホで1列表示。

と操作していきましょう。

以上の操作でトップページに記事カードが表示されます。

AFFINGER6で記事カードを表示させる方法まとめ

  • トップページの挿入コンテンツでカテゴリー記事一覧を使って表示させる
  • 公式配布のプラグイン『AFFINGERデザインカード』で表示させる
  • AFFINGER6のEX版で簡単に表示させる

AFFINGER6でトップページに記事カードを表示させる方法として上記3つをご紹介してきました。

やや面倒ではありますが、節約したいという人は挿入コンテンツで表示させてしまいましょう。

サポートが受けられないデメリットはあるものの、最初から洗練されたデザインをワンボタンで設定できるAFFINGERデザインカードプラグインもおすすめです。

サポートもあってしかも簡単なEX版は別途購入する必要がありますが、お金に余裕があるよという人には一番おすすめです。

参考【8大独自購入特典あり】AFFINGER6EX版とAFFINGER6はどっちを選ぶべき?分かりやすい機能チラ見せレビュー!

AFFINGER6の上位互換バージョンAFFINGER6EXの機能を画像付きで分かりやすくチラ見せレビューしちゃいます!どちらを買った方がいいのか迷っている初心者さん必見!当サイトから購入した場合の強力な独自特典もご用意しています!

続きを見る

  • この記事を書いた人
  • 最新記事

とのぽん

ブログアフィリエイトで月収10万円達成ブロガー。 ネコとお酒が好きなアラフォーサラリーマンのとのぽんです。 メインは資産ブログ形成ノウハウの発信ですが、その他40代ならではの悩みをみなさんと共有して解決していければと思います。

-AFFINGER6, ブログ運営, ワードプレス
-,