当ページのリンクには広告が含まれています。"@osaboo_Bot"AFFINGER6でトップページにカード型の記事一覧を表示する方法をご紹介します。(STDとEX両方をそれぞれわかりやすく解説します)AFFINGER6-STDで、記事一覧をカード型で表示したい方!必見です。トップページに表示される記事一覧は、新着記事として「リスト形式」で表示されます。リスト型からカード型に変更する方法は以下のようになります。AFFINGER6-STDでは、クラシックエディターで作成した任意の記事一覧の表示が可能です。AFFINGER6-EXでは、カードデザインにAFFINGER管理画面で簡単に設定変更できます。注意AFFINGER6-STDでは、新着記事一覧を表示することはできません。手作りで任意の記事一覧を作成する必要があります。本記事の設定では『AFFINGER管理』のメニューを編集します。Error』が出た場合。Error』が出て対処方法がわからない方はこちらをご覧ください。トップページに記事一覧をカード型で表示したい。トップページに記事一覧をカード型で表示したい。増え続ける当サイトオリジナル特典付!-購入方法で迷ったら...こちらで確認【特典付きを購入しよう!】AFFINGER6-STDでトップページにカード型の記事一覧を設定する方法AFFINGER6-STDでは、AFFINGER管理の設定で挿入コンテンツにクラシックエディターを使って「カード型の記事一覧」を設定していきます。手順は以下の通りです。サムネイル画像の設定(記事一覧の設定)挿入コンテンツ(クラシックエディター)を作成トップページのコンテンツ内の新着記事一覧を非表示にするそれでは順番に見ていきましょう。STEP1サムネイル画像の設定(記事一覧の設定)サムネイル画像の表示形状を設定しておきます。おすすめは『フルサイズにする』にチェックを入れます。『AFFINGER管理>全体設定>サムネイル画像設定』をクリックします。以下の画面が表示さるところまで下側にスクロールします。記事一覧の『フルサイズにする』にチェックを入れます。補足サムネイルの表示が思うように表示できない場合は、サムネイル画像設定を変えてみましょう。アイキャッチ画像のサイズを統一していれば『メディア設定にする』を選択しても問題ありません。STEP2挿入コンテンツ(クラシックエディター)を作成AFFINGER管理のトップページの設定で、「挿入コンテンツ」にカード型の記事一覧を作っていきます。『AFFINGER管理>トップページ>挿入コンテンツ』をクリックします。以下の画面が表示されるところまで下側にスクロールします。挿入コンテンツの先頭にカーソルを置き『タグ>レイアウト>PCとTab(959px以上)>左右50%』の順にマウスオーバーでドロップダウンメニュを開いて『左右50%』をクリックします。以下の画面のようにレイアウトが挿入されます。テキストの末部にカーソルを置きます。カード>記事一覧』の順にマウスオーバーでドロップダウンメニュを開いて『記事一覧』をクリックします。以下の画面の黄色部のようにショートコードが入力されます。(前側の不要なテキストは削除します)続けて、右側の青色部も同様にショートコードを入力します。赤下線部の『投稿記事のID』に実際のID『半角数字』を入力します。rank=""]のように入力します。カードの左上にナンバーリングされます。?」という方のために...投稿記事のIDを調べる方法をご紹介します。『WordPress管理>ダッシュボード>投稿>投稿一覧』をクリックします。以下の画面が表示されます。赤枠部に『ID』の列に記載されている番号です。STEP3トップページのコンテンツ内の新着記事一覧を非表示にする挿入コンテンツで作成したカード型の記事一覧のみを表示する場合に、不要なリスト型の新着記事一覧を非表示にします。『AFFINGER管理>トップページ>記事一覧』をクリックします。以下の画面が表示さるところまで下側にスクロールします。設定箇所は、以下の画面を参考にしてください。補足この章で、ご紹介した挿入コンテンツの設定は、AFFINGER6-EXでも同じ手順で使えます。新着記事一覧とは別に任意の記事一覧を上手に配置することで色々な配置のトップページが作れます。チャレンジしてみてくださいね。...新着記事(リスト型)、任意の記事一覧(カード型)を合わせて表示させるのも面白いです。カード型のブログカードについて...以下の記事で詳しくご紹介しています。ブログカードの作り方!「徹底的に調べてみた」リニューアルAFFINGER6を使用したブログカードの作り方と表示の状態を細かく噛み砕いて紹介します。ブロック・クラシック両方のエディタに分けて画像付きで説明します。リスト型・カード型・スライドショー等また、スライドショーをスライドさせない方法も盛り込みました。AFFINGER管理:トップページの設定について...以下の記事で詳しくご紹介しています。表示イメージを画像付きでご紹介。「設定場所と表示イメージがわからない?」そんな悩みを解決します。AFFINGER6-EXでトップページにカード型の記事一覧を設定する方法AFFINGER6-EXでは、簡単なAFFINGER管理の設定だけで「カード型記事一覧」を作成できます。新着記事一覧をカード型の記事一覧として表示できます。(AFFINGER6-EXだけ!)手順は以下の通りです。カードデザイン(記事一覧のカードデザイン化[EX])注意AFFINGER6-STDにはメニュー項目はありません。記事一覧のカードデザイン化[EX]記事一覧のカードデザイン化を指示して、表示する列数を入力します。『AFFINGER管理>投稿・固定記事>カードデザイン』をクリックします。以下の画面が表示さるところまで下側にスクロールします。赤枠部の『トップページ及びアーカイブの記事一覧をカードデザインにする』にチェックを入れ、『列数設定』に表示数を入れます。以下の画面では、『2,2,1』→「PCで2列・タプレットで2列・スマホで1列」という指示になります。補足トップページとアーカイブページの表示を変えたい場合は、挿入コンテンツの設定と組み合わせます。面倒ですが...難しくないので、慣れてきたら検討してみてくださいね。...トップページはカード型でアーカイブページはリスト型で記事一覧を表示するなどの設定が可能です。トップページにカード型の記事一覧を表示するための方法について、STDとEXの両方に分けて詳しく解説しました。使ったWebサイト構築にお役立てください。「最後まで、ご観覧いただきありがとうございました。」また、次の記事で...お会いしましょう。WordPressテーマ】AFFINGER6とSWELL徹底比較「どっちにする?」両方使ってみた!WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。本音レビュー!メリット・デメリットを徹底解説AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。初心者がオススメする購入方法【特典付きを購入しよう!】WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。カスタマイズ【細かすぎる色の設定】わかりにくいを解決「まとめてみた!」AFFINGER6のカスタマイザー「全体カラー設定で、色設定に対する反映場所がわからない!」を解決。「キーカラー?メインカラー?サブカラー?テキスト(一部)?」の設定箇所と反映場所をサンプル画像でわかりやすく解説。デザイン済みデータの導入・設定方法「ポイントをまとめてみた!」AFFINGER6とEXのデザイン済みデータの導入手順と設定方法をご紹介。デザイン済みデータをベースにすることでカスタマイズ作業を短縮!「すぐにでも記事を書き始めたい」人向け。初心者さんでもOKです!AFFINGER6のブログの広告表記「ステマ規制対応「PR表記」機能が実装された!超簡単に処理しておこうAFFINGER6で「ブログの広告表記」をする方法を初心者さん向けに解説。ブログやWebサイトに対して景品表示法のステマ規制がスタートします。ver.20230921β版から実装された「PR表記」機能を使った簡単設置補法をご紹介。カスタマイズ【タイトルや画像を「ふわっと表示」フェードイン設定方法】AFFINGER6のページ内でタイトルや画像をふわっと表示させるフェードインの設定方法をご紹介。AFFINGER6の拡張機能を使った初心者さんでも安心して使える設定方法です。CSS等の難しい追記や編集は一切不要で設定時間は!一瞬です。カスタマイズ【ヘッダー画像にサイト情報とヘッダーメニューを表示】おしゃれなサイトの定番!?AFFINGER6のカスタマイズでヘッダー画像にサイトの「ロゴ・タイトル・キャッチフレーズ・ヘッダーメニュー」を表示する方法をご紹介。AFFINGER6の標準機能を使った初心者さんでも簡単に!おしゃれで!安心して使える!ヘッダーのカスタマイズ手順をお届けします。使った基本的なヘッダー画像の設定方法を「おすすめ設定」を含めて詳しく!わかりにくいメニューの意味も付け加えました。徹底した初心者目線でお届け!!\\お役立ち情報を発信しています。原則リンクフリーです。リンクを行う場合の許可や連絡は不要です。リンクである旨を明示ください。引用についても、出典元の明記とリンクをしていただければ問題ありません。見出しタグのカスタマイズ!キャッチコピーを使う。