Customize AFFINGER

AFFIBGER6でトップページにカード型の記事一覧を設定する方法!STDとEX両方を解説

36669_affibger6-card-articles-top-page-std-ex-guide

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6でトップページにカード型の記事一覧を表示する方法をご紹介します。
(STDとEX両方をそれぞれわかりやすく解説します)

AFFINGER6-STDで、記事一覧をカード型で表示したい方!必見です。

AFFINGER6では、STDとEX両方とも トップページに表示される記事一覧は、新着記事として「リスト形式」で表示されます。

リスト型からカード型に変更する方法は以下のようになります。

  • AFFINGER6-STDでは、クラシックエディターで作成した任意の記事一覧の表示が可能です。
  • AFFINGER6-EXでは、カードデザインにAFFINGER管理画面で簡単に設定変更できます。

注意AFFINGER6-STDでは、新着記事一覧を表示することはできません。手作りで任意の記事一覧を作成する必要があります。

リスト型の記事一覧

yajirusi-sita-80x40

カード型の記事一覧

リスト型の記事一覧

yajirusi-sita-80x40

カード型の記事一覧

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

こんな方におすすめ!

  • AFFINGER6-STDで トップページに記事一覧をカード型で表示したい。
  • AFFINGER6-EXで トップページに記事一覧をカード型で表示したい。

この記事でわかること!

  • AFFINGER6-STDでトップページにカード型の記事一覧を設定する方法
  • AFFINGER6-EXでトップページにカード型の記事一覧を設定する方法
  • まとめ

それではご覧ください!

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

AFFINGER6-STDでトップページにカード型の記事一覧を設定する方法

AFFINGER6-STDでは、AFFINGER管理の設定で挿入コンテンツにクラシックエディターを使って「カード型の記事一覧」を設定していきます。

手順は以下の通りです。

  • サムネイル画像の設定(記事一覧の設定)
  • 挿入コンテンツ(クラシックエディター)を作成
  • トップページのコンテンツ内の新着記事一覧を非表示にする

それでは順番に見ていきましょう。

STEP1サムネイル画像の設定(記事一覧の設定)

サムネイル画像の表示形状を設定しておきます。おすすめは『フルサイズにする』にチェックを入れます。

『AFFINGER管理>全体設定>サムネイル画像設定』をクリックします。

36669-4a:AFFINGER管理|全体設定タブ|top

以下の画面が表示さるところまで下側にスクロールします。

記事一覧の『フルサイズにする』にチェックを入れます。

36669-3a:AFFINGER管理|全体設定タブ|サムネイル画像設定

補足

  • サムネイルの表示が思うように表示できない場合は、サムネイル画像設定を変えてみましょう。
  • アイキャッチ画像のサイズを統一していれば『メディア設定にする』を選択しても問題ありません。

STEP2挿入コンテンツ(クラシックエディター)を作成

AFFINGER管理のトップページの設定で、「挿入コンテンツ」にカード型の記事一覧を作っていきます。

『AFFINGER管理>トップページ>挿入コンテンツ』をクリックします。

36669-6-1:AFFINGER管理|トップページ|top

以下の画面が表示されるところまで下側にスクロールします。

挿入コンテンツの先頭にカーソルを置き『タグ>レイアウト>PCとTab(959px以上)>左右50%』の順にマウスオーバーでドロップダウンメニュを開いて『左右50%』をクリックします。

36669-7:AFFINGER管理|トップページ|挿入コンテンツ

以下の画面のようにレイアウトが挿入されます。

テキストの末部にカーソルを置きます。

36669-8:AFFINGER管理|トップページ|挿入コンテンツ|レイアウト

『タグ>記事一覧 / カード>記事一覧』の順にマウスオーバーでドロップダウンメニュを開いて『記事一覧』をクリックします。

36669-9:AFFINGER管理|トップページ|挿入コンテンツ|レイアウト2

以下の画面の黄色部のようにショートコードが入力されます。(前側の不要なテキストは削除します)
続けて、右側の青色部も同様にショートコードを入力します。

36669-10:AFFINGER管理|トップページ|挿入コンテンツ|レイアウト3

赤下線部の『投稿記事のID』に実際のID『半角数字』を入力します。複数の場合は半角カンマ→『,』 で区切ります。
[st-postgroup id=”1,2,3,4,5” rank=""]のように入力します。

36669-11:AFFINGER管理|トップページ|挿入コンテンツ|レイアウト4
  • rank="on" → カードの左上にナンバーリングされます。
36669-13:カードスタイル|ランキングのイメージ

「投稿記事のID」を調べる方法

「投稿記事のID ?」という方のために…投稿記事のIDを調べる方法をご紹介します。

『WordPress管理>ダッシュボード>投稿>投稿一覧』をクリックします。

以下の画面が表示されます。

赤枠部に『ID』の列に記載されている番号です。

36669-12:WordPress管理|投稿投稿一覧|IDの確認

STEP3トップページのコンテンツ内の新着記事一覧を非表示にする

挿入コンテンツで作成したカード型の記事一覧のみを表示する場合に、不要なリスト型の新着記事一覧を非表示にします。

『AFFINGER管理>トップページ>記事一覧』をクリックします。

36669-6-2:AFFINGER管理|トップページタブ|top2

以下の画面が表示さるところまで下側にスクロールします。

  • 投稿ページがトップページの場合
    • トップページのコンテンツ内の新着記事一覧を非表示にする『ON』
  • 固定ページがトップページの場合
    • 新着一覧を表示する『OFF』

設定箇所は、以下の画面を参考にしてください。

36669-5:AFFINGER管理|トップページタブ|記事一覧

補足

この章で、ご紹介した挿入コンテンツの設定は、AFFINGER6-EXでも同じ手順で使えます。
新着記事一覧とは別に任意の記事一覧を上手に配置することで色々な配置のトップページが作れます。
チャレンジしてみてくださいね。

例えば…新着記事(リスト型)、任意の記事一覧(カード型)を合わせて表示させるのも面白いです。

AFFINGER6 ブログカードの作り方【徹底的に調べてみた!!】
【2024年版】AFFINGER6 ブログカードの作り方!「徹底的に調べてみた」リニューアル

AFFINGER6を使用したブログカードの作り方と表示の状態を細かく噛み砕いて紹介します。ブロック・クラシック両方のエディタに分けて画像付きで説明します。リスト型・カード型・スライドショー等また、スライドショーをスライドさせない方法も盛り込みました。

34825_affinger6-top-page-settings-2
AFFINGER 管理【トップページ】タブのメニュー設定を完全解説!AFFINGER6

AFFINGER6の管理画面で行う『トップページ』の各設定項目を完全解説。設定項目と表示イメージを画像付きでご紹介。「設定場所と表示イメージがわからない?」そんな悩みを解決します。

AFFINGER6-EXでトップページにカード型の記事一覧を設定する方法

AFFINGER6-EXでは、簡単なAFFINGER管理の設定だけで「カード型記事一覧」を作成できます。

  • 新着記事一覧カード型の記事一覧として表示できます。(AFFINGER6-EXだけ!)

手順は以下の通りです。

  • カードデザイン(記事一覧のカードデザイン化[EX])

注意AFFINGER6-STDにはメニュー項目はありません。「EX専用です」

記事一覧のカードデザイン化[EX]

記事一覧のカードデザイン化を指示して、表示する列数を入力します。

『AFFINGER管理>投稿・固定記事>カードデザイン』をクリックします。

36669-14:AFFINGER管理|投稿・固定記事タブ|top

以下の画面が表示さるところまで下側にスクロールします。

赤枠部の『トップページ及びアーカイブの記事一覧をカードデザインにする』にチェックを入れ、『列数設定』に表示数を入れます。
以下の画面では、『2,2,1』→「PCで2列・タプレットで2列・スマホで1列」という指示になります。

36669-15:AFFINGER管理|投稿・固定記事タブ|記事一覧カードデザイン化[EX]

補足

トップページとアーカイブページの表示を変えたい場合は、挿入コンテンツの設定と組み合わせます。

ちょっと面倒ですが…難しくないので、慣れてきたら検討してみてくださいね。

例えば…トップページはカード型でアーカイブページはリスト型で記事一覧を表示するなどの設定が可能です。

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

まとめ!AFFIBGER6でトップページにカード型の記事一覧を設定する方法!STDとEX両方を解説

AFFIBGER6 でトップページにカード型の記事一覧を表示するための方法について、STDとEXの両方に分けて詳しく解説しました。

AFFIBGER6 を使ったWebサイト構築にお役立てください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

AFFINGER6_おすすめ記事!

26239_affinger6-swell-comparison-4a 1

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

19298_affinger6-honest-review-2a 2

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。

3969_affinger6-how-to-buy-2 3

WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

15446_AFFINGER6-how-to-use-tag-ma-1 4

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。

-Customize AFFINGER
-