広告

AFFINGER6 ブログカードの作り方【徹底的に調べてみた!!】

5675_affinger6-how-to-blog-card-1

AFFNGER6でブログカードを作る!基本4パターン

ブロックとクラシック版で作成した場合の違いやポイントはココ!を解説。

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

Question

topページや記事にプログカードを貼り付けたいけどいろいろな形のパターンがあって良く解らない?
そもそも、ブログカードの作り方・貼り方が解らない?
作り方のパターンと表示パターンが知りたい!

\この様な問題を解決します!/

ブログカードを作って貼り付ける方法はいっぱいあるけど、基本
ブロックとクラシック版の2通りの方法を覚えておけば良いと思うよ!
簡単だから…すぐ出来るよ ^^

osaboo

こんな方におすすめ!

  • ブログカードをtopページや記事に追加したい。
  • ブログカードの作り方と表示タイプを知りたい。
  • 「記事」のサムネイル表示をカッコよくしたい。
  • 「カテゴリー」一覧のサムネイル表示をカッコよくしたい。

…と言う事で、今回は…

AFFINGER6の標準機能を使った、カードスタイルの内部リンク『ブログカード』の作り方をご紹介します。

ちょっとした細工で「サムネイルスライドショー」の機能を残したままスライドさせない方法も…

AFFINGER6 で「ブロックエディター」が標準化され、標準メニューから、記事やカテゴリーの「id」を入れるだけの簡単な操作で内部リンクを追加できるようになりました。
これは、使わないと!^^
なので…使い勝手の良い「ブログカード」の作り方・貼り方を「ブロックエディターを使ったパターン」と「クラシックエディターを使ったパターン」に分けて、その作り方と表示の違いを解説します。

\これで!!サイトと記事が思いのまま^^『グッとオシャレに…』/

ブロックエディターを使ったブログカードの作り方

desk-1024x681

自由度に欠ける所がデメリットですが…
ブロックエディターの標準メニューを使って
「ブログカード」を作成するのが、最も簡単で早いです。

-ps-
AFFINGER6 からの新機能になります。

 




それでは操作方法と表示タイプを見ていきましょう。

『STINGER: 記事一覧(ID)』を選択してブログカードを作る手順

osaboo

超簡単だよ!!^^

それでは 操作手順を見ていきましょう!!

ブログカードを挿入する記事(投稿)または、固定ページを選択します。

① 『WordPress管理 > 投稿 > 投稿一覧 > タイトル』を選択して編集をクリックします。
または
② 『WordPress管理 > 固定ページ > 固定ページ一覧 > タイトル』を選択して編集をクリックします。

※ ①または②のどちらかを選択して編集対象となるページを選択します。

次にページ内の「ブロックを追加」したい場所を選択します。

編集対象となるページの最上部に表示されている以下の画面の『+』 ボタンをクリックして「ブロック挿入ツールを切り替え」ます。

5675-1

※ 左側の画面を『WordPress編集』とします。

yajirusi-sita-001

ブロック挿入ツールが切り替わり、以下のブロック選択メニューが表示されるので…下側にスクロールします。

『WordPress編集 > ブロックタブ > STINGER:記事一覧(ID)』をクリックします。

5675-2
yajirusi-sita-001

編集対象ページに以下の画面(ブロック)が表示されるのでクリックしてブロックを選択します。

5675-3
yajirusi-sita-001

画面最上部の右側の『歯車マーク』をクリックします。

5675-4
yajirusi-sita-001

表示したい『記事ID』の番号を枠内に記入します。

5675-5

補足

記事を複数追加する場合は、『記事ID』をカンマで区切ります。
例えば『記事ID』を3個入力する場合は『 1,2,3 』の様に入力します。

記事IDを入力した「ブログカード」は以下の様にリスト型で表示されます。

記事IDを「 1,2,3 」と記入した場合

0922_wordpress-updraftplus-setup-0
UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非!

4111_affinger6-how-to-use-google-search-console-1
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で!】

Googleサーチコンソール(Google Search Console)を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分!」1つ1つできる事を増やそう。

3909_affinger6-how-to-set-google-search-console-1
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】

AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説!初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。

横1列3個の表示になります。

ランキングを”ON"にした場合

0922_wordpress-updraftplus-setup-01
UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非!

4111_affinger6-how-to-use-google-search-console-12
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で!】

Googleサーチコンソール(Google Search Console)を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分!」1つ1つできる事を増やそう。

3909_affinger6-how-to-set-google-search-console-13
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】

AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説!初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。

横1列3個の表示になります。

※ ブログカードは、1列のリスト型に限定されます。(横2列等の表示はできません。)← 別途方法はあるので記事後半でご紹介します。

AFFINGER6EXを使用すると『カード化』『スライドショー』の2種類が表示可能になります。

(EX)カード化を”ON"にした場合

0922_wordpress-updraftplus-setup-0
UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非!

4111_affinger6-how-to-use-google-search-console-1
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で!】

Googleサーチコンソール(Google Search Console)を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分!」1つ1つできる事を増やそう。

3909_affinger6-how-to-set-google-search-console-1
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】

AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説!初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。

AFFINGER管理>投稿・固定記事>記事一覧のカードデザイン化[EX]で
設定した表示条件が影響するので表示数の設定と記事表示数を考慮する必要があります。
横2列設定で3個の記事を表示すると上の様になります。←列は任意に変更できます。

(EX)スライドショーを”ON"にした場合

0922_wordpress-updraftplus-setup-0

UpdraftPlusの設定を初心者がやってみた!Ba...

4111_affinger6-how-to-use-google-search-console-1

AFFINGER6【Googleサーチコンソールの導入...

3909_affinger6-how-to-set-google-search-console-1

AFFINGER6【GoogleサーチコンソールのHT...

※ 記事をスライドショーの表示形式でスライドせずに表示できるようになっています。表示数の設定が自在にできるので表示画面の大きさによって好みに合わせて列数の表示が選べます。
横3列3個の表示になります。(管理人はこれが好き ^^" )

ちなみに…

クラシック版のイメージでカードスタイルで2列表示しようとすると…(3列表示も同等)

『2カラム』にして『STINGER:記事一覧(ID)』を貼り付けてみました。

これダメじゃん!!

osaboo

AFFINGER6 でカラムを利用して2列を作ると下の画面のように文字が縦表示になってしまいます。
AFFINGER6EXではカード設定をすればきれいに仕上がります。

5675-6

この使い方はNG ! 参考までに…

AFFINGER6 のブロックエディターを使ったID入力によるブログカードに表示パターンは1列のリスト型に限定されている様で、カードスタイルにしようとすると縦文字表示になる弊害が出る様です。(マニアルに記載あり)

ID入力による『STINGER:記事一覧(ID)』メニューが追加されブログカードを追加するのは容易なっていますが自由度がイマイチのようです。

となると…ブロックエディターを使用してカードスタイルのブログカードを各ページに入れるには、EX版 or JET子テーマにアップデートする方法を選択するのが無難かと…(CSSで加工するのはむずいby初心者)

osaboo

現状(AFFINGER6 )のまま!となると…クラシックエディターを使って、ブログカードをカードスタイルにして貼り付けるしかない?!

こっちで解説するよ!←ここをクリックすると飛びます!!

『STINGER: カテゴリ一覧』を選択してブログカードを作る手順

STINGER:記事一覧(ID)を追加した手順と同じ様に以下の画面を開きます。

『WordPress編集 >ブロックタブ > STINGER. カテゴリ一覧 』をクリックします。

5675-7
yajirusi-sita-001

編集対象ページに以下の画面(ブロック)が表示されるので『領域』をクリックしてブロックを選択します。

5675-8
yajirusi-sita-001

画面最上部の右側の『歯車マーク』をクリックします。

5675-4
yajirusi-sita-001

表示したい『カテゴリ ID』と『ページ』を記入します。(表示順序は『投稿ID』etcを変更します。)

5675-9

補足

記事を複数追加する場合は、『カテゴリID』をカンマで区切ります。
例えば『カテゴリID』を3個入力する場合は『 1,2,3 』の様に入力します。

カテゴリIDを入力した「ブログカード」は以下の様にリスト型で表示されます。

カテゴリIDを「〇〇」ページを「5」と記入した場合

15280_affinger6-how-to-set-ranking-1
AFFINGER6▶︎ランキングの作り方【わかりにくい?を完全解説】

AFFINGER6に標準装備されているランキング機能を使ったランキングの作り方を詳しくご紹介。標準装備なので、プラグインをダウンロードして使うものとは違い 初心者でも安心して使えます。また、サイトの何処にでも自由自在にランキングが設置できる優れものです。アフィリエイトでも有利に働くランキングを作りましょう。

15047_affinger6-how-to-use-widget-1b
AFFINGER6▶︎利用できるウィジェット【WordPress widget】"虎の巻"

AFFINGER6にはテーマ専用のウイジェットとWordPress標準ウィジェットを1つ1つすべて解説。設定方法と削除方法もしっかり解説。わかりにくいウイジェットの用途を初心者目線で説明。各ウィジェットの用途が把握できる"虎の巻"を作ってみました!!

15010_affinger6-how-to-show-sidebar-smartphone-1b
AFFINGER6▶︎サイドバーウィジェットをスマホで表示させる方法!

AFFINGER6でサイドーバーのウィジェット「プロフィール・サイドバーメニュー・おすすめ記事一覧・広告」等をスマホでも表示させる方法をご紹介します。デフォルトの設定では非表示となっていて見落としがちな箇所の設定です。せっかく作ったサイドバーのウィジェットをスマホでも表示しましょう!

14883_wordpress-siteguard-wp-plugin-setup-1
WordPressプラグイン【SiteGuard WP Plugin】導入・設定方法

無料のWordPressプラグイン『SiteGuard WP Plugin』の導入・設定方法をご紹介。インストール後の簡単なおすすめ設定を図解で全項目を解説。分かりにくい設定も簡単に!真似するだけで基本設定ができるよう丁寧に初心者目線で全てを解説。サイトのセキュリティはお早めに!!

14668-wordpless-xml-sitemaps-setup
WordPress▶︎必須プラグイン【XML Sitemaps】 導入・設定方法

WordPressの必須プラグイン!XML Sitemaps(旧:Google XML Sitemaps)の導入と設定方法をご紹介。シンプルな機能のみが、AFFINGER6ととても相性が良く公式サイトでもおすすめされている無料のプラグインです。初心者目線で図解・解説しました。

横1列5個の表示になります。

※ ブログカードは、1列のリスト型に限定されます。(横2列等の表示はできません。)← 別途方法はあるので記事後半でご紹介します。

スライドショータイプの表示もできるのでご紹介します。
カテゴリの選択を同じ条件としてスライドショーを”ON"にすると以下の様に表示されます。

※ スライドタイプ :「表示設定は画像のみ + タイトル」で表示しています。

ブロックエディターを使ったブログカードの作り方は以上です。
「いろいろお好みで試してください^^」



クラシックエディターを使ったブログカードの作り方

macbook-1024x680

自由度が高く色々なパターンを表示可能!

リスト型・カード型・スライドショーを作成する事が出来ます。

カード型の自由度が広く様々な配置が可能です。(2列・3列・非対称)

 

-ps-

初心者的には少し面倒…!?

 

それでは操作方法と表示タイプを見ていきましょう。

『クラシック版の段落』を選択してブログカードを作る手順

※ ブログカードを記事に貼り付ける場合は『クラシック』と『クラシック版の段落』のどちらを使用しても支障はありませんが…本記事では『クラシック版の段落』を使用した解説になります。

補足

『クラシック』は使い回し機能『再利用ブロック』に追加できません。
『クラシック版の段落』は使い回し機能『再利用ブロック』に追加できます。←こちらを使う方が無難

『WordPress編集 > ブロックタブ > クラシック版の段落 』をクリックします。

5675-10
yajirusi-sita-001

クラシック版の段落(グレー部分)をクリックします。

5675-11
yajirusi-sita-001

クラシック版のメニューが表示されます。
(この画面から横1列.2列等のブログカードを作っていきます。)

5675-12

横1列のリスト型ブログカードを作る手順

5675-13
完成イメージ

『クラシック版のメニュー>カード』タブをクリックしてデフォルトのコードを呼び出します。

5675-14
yajirusi-sita-001

デフォルトのコードが表示されたら赤矢印部に『記事ID』を入力します。

5675-15

※ id="〇〇" 記事のIDは1個のみ有効です。→ id="〇〇,△△" はNGです。(先頭のID番号しか認識しません。)

連続してブログカードを並べる場合はコードを下行にコピーして『記事ID』を変更します。
または、再度『カード』タブをクリックしてデフォルトコードを呼び出して『記事ID』を入力します。

5675-16

※ この様なイメージです。

補足『ブログカードコード』

ブログカードのコードの内容を簡単に表にまとめてみました。

指示名内容
st-card myclass="〇〇"通常デフォルトのまま!無記入
id="〇〇"投稿又は固定記事IDを入力(数字)
label="〇〇"ラベルが出現する(4文字程度テキスト文字)
pc_height="〇〇"PC閲覧時のカードの高さを指定(数字)
name="〇〇"ここに入力した文字がタイトルになる(テキスト文字)
bgcolor="〇〇"ラベル背景色をHTMLカラーコード指定(#000000)等
color="〇〇"ラベル文字色をHTMLカラーコード指定(#000000)等
webicon="〇〇"アイコン用テキスト(st-svg-oukan)等
readmore="〇〇""on"=表示 / "off"=非表示(リードモア)
thumbnail="〇〇"(EX版のみ)"on"=表示 / "off"=非表示(サムネイル)
type="〇〇"”text" (襷掛け以外の表示)通常デザインは無記入

※ 記事IDは、『WordPress管理 > 固定ページ一覧・投稿一覧』で確認後に入力します。

yajirusi-sita-001

横1列のリスト型ブログカードは以下の様に表示されます。

記事IDを「〇〇」とした場合

0922_wordpress-updraftplus-setup-0
UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発

続きを見る

※ 「表示設定は画像のみ + タイトル」で表示しています。

横2列のカード型ブログカードを作る手順

5675-17
完成イメージ

ページ幅を2等分にしてカード型ブログカードを貼り付けます。

『クラシック版のメニュー>タグ>レイアウト>PCとTab(959px以上)>左右50%』
①から④の順にマウスオーバーでメニューを開いて④でクリックします。←ちょっとやりにくい?!

5675-18
yajirusi-sita-001

ブログカードを配置する画面が表示されます。

5675-19
yajirusi-sita-001

①カードを挿入する側の領域を選択して→②カードをクリックします。

5675-20
yajirusi-sita-001

カードスタイルのコード(命令文)が挿入されます。(右側も同様に処理します。)

5675-21
yajirusi-sita-001

同じスタイルが左右に挿入できたら、不要部分を削除します。(赤枠部のテキスト)

5675-22
yajirusi-sita-001

左右各々に『 id="" → id="〇〇" 』の様に「記事ID」を入力します。

5675-23
yajirusi-sita-001
5675-24
yajirusi-sita-001

横2列のカード型ブログカードは以下の様に表示されます。

カードスタイルを変更していない場合

※ 記事タイトルの長さで落差が生じる

osaboo

高さが違う!!なんで…

ちょっと小細工するとこうなります。

カードスタイルを変更していない場合(背景処理による表示幅制限)

※ クラシックブロックを他のブロックとグループ化して背景に色とか枠を入れると記事内での表示幅が狭くなる仕組みを利用した小細工です。^^
左右の記事のタイトルが3行に揃って落差がなくなっています。
裏技っぽくてお勧めしにくいですが…こんなこともできるっという事でご紹介しておきます。^^

タイトルの長さによって、並びのカードに落差が生じる場合があります。(表示画面幅に追従してカードが表示されるのが原因)修正方法は高さを強制的に固定する方法とかカードスタイルを変更するなどの方法があります。
ブログカードが表示される範囲を狭める又は広げる…等
CSSで整える方法もありますが…支障も出る可能性があるので…お勧めできません。なので…

簡単な方法をご紹介します。

その1「カードスタイルを付加します。」

「サイトの表示幅」・「記事の幅」・「記事タイトルの文字数」の設定で表示の落差がどの様に出るかはまちまちの様です。
当サイトの場合は『カードスタイルB』がマッチしています。

変更するカードの領域を選んで『クラシック版のメニュー>スタイル>レイアウト>カードスタイル』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。

5675-25
その2「カードスタイルBを付加します。」

落差が出たりカード枠ギリギリまでタイトルを広げて縦幅を小さくしたい時には以下の様にレイアウトのスタイルを変更します。← ここポイント!

レイアウトスタイルを変更してタイトル文字数によるカードの落差を抹消します。

変更するカードの領域を選んで『クラシック版のメニュー>スタイル>レイアウト>カードスタイルB』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。

5675-26
yajirusi-sita-001

コードの表示が少し変わります。

5675-27
yajirusi-sita-001

ブログカードの落差が解消されて同じ高さで横2列に表示されます。

当サイトではこの方法で落差が生じた場合の回避をしています。

今回ご紹介した方法を織り交ぜてお好みの配置にお役立てください。^^

横3列のカード型ブログカードを作る手順

5675-28
完成イメージ

操作方法は、2列配置と同等で以下のメニューから始めます。

『クラシック版のメニュー>タグ>レイアウト>PCとTab(959px以上)>3分割』

手順の詳細は、こちらです。始めのメニュー選択(④左右50%→3分割)が違うだけで要領は同じです。

…割愛いたします。

クラシックエディターを使ったブログカードの作り方は以上です。

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

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

「サムネイルスライドショー」の機能を残したままスライドさせない方法

1 0922_wordpress-updraftplus-setup-0

UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発

WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非!

ReadMore

2 4111_affinger6-how-to-use-google-search-console-1

AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で!】

Googleサーチコンソール(Google Search Console)を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分!」1つ1つできる事を増やそう。

ReadMore

3 3909_affinger6-how-to-set-google-search-console-1

AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】

AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説!初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。

ReadMore

完成イメージ

『クラシック版の段落』を使った『記事一覧(スライドショー)』と『カテゴリ一覧(スライドショー)を使用したカード型ブログカードの作り方をご紹介します。

スライドショーに表示する記事数と表示する記事数の指示を同じにすればスライドは固定できます。←管理人が大好きな表示スタイルです.。^^")
現段階(2022年1月11日)ではこの方法しかない様ですが…(EXなら表示はブロックエディターで可能です。)

記事一覧(スライドショー)の作り方【AFFINGER6EX】

説明画像は「AFFINGER6EX」になっています。選択項目に多少違いがあるのでご注意ください。
「AFFINGER6の場合カテゴリ一覧(スライドショー)を選択します。」

『クラシック版のメニュー>タグ>記事一覧/カード>記事一覧(スライドショー)』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。

5675-29
yajirusi-sita-001

記事一覧(スライドショー)のデフォルトコードが表示されたら赤矢印部に『記事ID』を入力します。

5675-30

補足【記事一覧】

記事を複数追加する場合は、『記事ID』をカンマで区切ります。
例えば『記事ID』を3個入力する場合は『 1,2,3 』の様に入力します。

ポイント

記事の表示数をスライドショー数に合わせることでスライドは停止します。
例えば、記事IDを3個選択して『slides_to_show="3,2,1"』→("pc,tab,iphone")と
設定値を入れると「pcでは停止、tabでは2個ずつスライド、iphoneでは1個ずつスライド」という動作になります。

補足【記事一覧】

記事一覧(スライドショー)のコード内容を簡単に表にまとめてみました。

指示名内容
postgroup id = "〇〇"投稿又は固定記事IDを入力(数字)
rank="〇〇"ランク表示(on/off)
slide = "〇〇"スライドショー(on/off)
slides_to_show = ",,"スライド列数 "pc,tab,iphone" (数字・カンマ)
slide_date = "〇〇"日付(on/off)
slide_more = "ReadMore"続きを読む=ReadMore (テキスト入力)
slide_center = "〇〇"表示画面に対する列表示を中央に揃える(on/off)
fullsize_type = ""表示タイプ(画像のみ表示"card")(画像とテキスト表示"text")(全て表示"")

カテゴリ一覧(スライドショー)の作り方

『クラシック版のメニュー>タグ>記事一覧/カード>カテゴリ一覧(スライドショー)』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。

5675-31
yajirusi-sita-001

カテゴリ一覧(スライドショー)のデフォルトコードが表示されたら赤矢印部に『カテゴリID』を入力します。(デフォルトでは"0"→全てのカテゴリ)

5675-32

補足【カテゴリ一覧】

カテゴリを複数追加する場合は、『カテゴリID』をカンマで区切ります。
例えば『カテゴリID』を3個入力する場合は『 1,2,3 』の様に入力します。

ポイント

記事の表示数をスライドショー数に合わせることでスライドは停止します。
例えば、『page="3"』『slides_to_show="3,2,1"』→("pc,tab,iphone")と
設定値を入れると「pcでは停止、tabでは2個ずつスライド、iphoneでは1個ずつスライド」という動作になります。

表示条件を工夫すると記事の並びを変更できます。条件が少なく制限がありますが…ダミーカテゴリを作ってカテゴリを複数にしてカテゴリ条件を絞り込む…とか方法はいろいろあるかと…

補足【カテゴリ一覧】

カテゴリ一覧(スライドショー)のコード内容を簡単に表にまとめてみました。

指示名内容
cat= "〇〇"カテゴリIDを入力(数字)
page="〇〇"表示するページ数(数字)
order="〇〇"表示条件順序(新しい順"desc")(古い順"asc")
orderby="〇〇"表示条件(記事ID"id")(タイトル"titel")(タイプ”type”)
(日付"date")(更新日”modified")
child="〇〇"子カテゴリID表示(on/off)
slide = "〇〇"スライドショー(on/off)
slides_to_show = ",,"スライド列数 "pc,tab,iphone" (数字・カンマ)
slide_date = "〇〇"日付(on/off)
slide_more = "ReadMore"続きを読む=ReadMore (テキスト入力)
slide_center = "〇〇"表示画面に対する列表示を中央に揃える(on/off)
fullsize_type = ""表示タイプ(画像のみ表示"card")(画像とテキスト表示"text")(全て表示"")

「サムネイルスライドショー」の機能を残したままスライドさせない方法は以上です。

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

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

価格:14,800円(税込)

今なら漏れなく特典付き!!

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

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!AFFINGER6 ブログカードの作り方【徹底的に調べてみた!!】

今回は「ブログカードの作り方と表示状態」をブロックエディターとクラシックエディターに分けてご紹介しました。「サイト作りがもっと楽しくなる!?」のにお役に立てば幸いです。お疲れ様でした!^^

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