ショートコード

カテゴリ一覧スライドショー機能

Gutenbergではショートコードのクイックタグはクラッシックブロックをご利用ください

カテゴリ記事一覧スライドショーは今までの「カテゴリ一覧ショートコード」をさらにスライドショーで表示する機能です

基本の使い方

従来どおり、「タグ」>「記事一覧」>「カテゴリ一覧」でショートコードを挿入します。

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="off"]

新しく追加されたslide="off"の部分のslide="on"に変更します。

no image

2024/11/1

ステップスタイルについて

見出しブロックの「ステップ」スタイルのデザインを一新致しました。 アップデートを行うと旧デザインも変更されますのでご了承ください。 新しいデザイン 以下のように見やすいスッキリしたデザインに変更致しました。 ステップA ステップA ステップA 各ステップ見出し下のコンテンツはグループブロックの「左ライン」スタイルを適応しています。 四角いデザインの例 ステップ及びカウントスタイルのカラー反映箇所の変更 ステップのデザインやカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(S ...

ReadMore

2024/7/22

会員(ログインユーザー)限定コンテンツのつくり方

グループブロックの「表示条件」を利用することでログインしているユーザーとしていないユーザーで表示を分けることができます。 これを活用することで会員(ログインユーザー)限定コンテンツを作ることができます。 会員登録機能はございません。「WP-Members Membership」プラグインなどをご検討ください 会員(ログインユーザー)限定コンテンツのつくり方 会員登録前のユーザーだけに見せたいコンテンツと、会員登録後(ログイン後)だけに見えるコンテンツをそれぞれグループブロックにまとめます。 コンテンツ表示 ...

ReadMore

2024/4/5

「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーについて

AFFINGERブロックプラグインで追加されるオリジナルブロックの「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーはカスタマイザーで一括設定できます。 ver20240320以上より(※AFFINGERブロックプラグインもver2.8.1にアップデートする必要があります) 設定方法 カスタマイザー「AFFINGERブロック」パネル カスタマイザー>「AFFINGERブロック」>各パネルをクリックしてください。 初期カラーについて カスタマイザーの値が設定されてい ...

ReadMore

no image

2024/3/14

ヘッダーナビゲーションを固定する

ヘッダーナビゲーション(PC)を固定する機能を追加 カスタマイザーの「ヘッダーナビゲーション(PC)」に固定する機能を追加しました。 固定時専用のカラー及び透過レベルも指定できます。 「ヘッダーナビゲーション」>「パソコン(PC)」 position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関するプラグインやカスタマイズ利用時は正常に動作しない場合がございます PC閲覧時(wp_is_mobile() による分岐)のみ 「すごいもくじ」利用時に関してjsの ...

ReadMore

2024/3/14

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する

「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能(※EX版限定) 「ヘッダーナビゲーション(PC)」に加え「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能を追加しました。 PCヘッダーメニュー 「PCヘッダーメニュー」を固定します。 ヘッダーインフォメーション 「ヘッダーインフォメーション」ウィジェットを固定します。(任意のテキストなどが挿入できるエリアです。) position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関す ...

ReadMore

上記のようにスライドショーで表示されます。

使用エリア

原則として、「ヘッダー画像エリア下のウィジェット」「サイドバートップ及びサイドバーウィジェット」「記事エリア内」での使用を想定しています。その他は確認しておりませんので各自、チェックの上でご利用下さいませ。

表示列数について

デフォルトの状態では

960px以上(大画面)3列
600px~959px(中画面)2列
599px以下(小画面)1列

となっています。

スライドショー専用引数

[st-catgroup cat="カテゴリID指定" page="読み込み数" order="desc" orderby="id" child="子カテゴリーの読み込み" slide="スライドショーのオンオフ" slides_to_show="列数の指定" slide_more="続きを読む"  slide_center="off"]

「カテゴリ一覧ショートコード」の基本的な使い方はコチラ

スライドショーには以下の専用引数を追加することでカスタマイズが可能です

slides_to_show

slides_to_showは各閲覧サイズ時の列数を指定できます。

各列数は「大画面,中画面,小画面」の順に「,(半角カンマ)」で区切って指定して下さい。

例えば

slides_to_show="3,3,3"

では、全サイズで3列表示

slides_to_show="3,3,2"

では大画面と中画面で3列、小画面では2列になります。

no image

2024/11/1

ステップスタイルについて

見出しブロックの「ステップ」スタイルのデザインを一新致しました。 アップデートを行うと旧デザインも変更されますのでご了承ください。 新しいデザイン 以下のように見やすいスッキリしたデザインに変更致しました。 ステップA ステップA ステップA 各ステップ見出し下のコンテンツはグループブロックの「左ライン」スタイルを適応しています。 四角いデザインの例 ステップ及びカウントスタイルのカラー反映箇所の変更 ステップのデザインやカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(S ...

ReadMore

2024/7/22

会員(ログインユーザー)限定コンテンツのつくり方

グループブロックの「表示条件」を利用することでログインしているユーザーとしていないユーザーで表示を分けることができます。 これを活用することで会員(ログインユーザー)限定コンテンツを作ることができます。 会員登録機能はございません。「WP-Members Membership」プラグインなどをご検討ください 会員(ログインユーザー)限定コンテンツのつくり方 会員登録前のユーザーだけに見せたいコンテンツと、会員登録後(ログイン後)だけに見えるコンテンツをそれぞれグループブロックにまとめます。 コンテンツ表示 ...

ReadMore

2024/4/5

「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーについて

AFFINGERブロックプラグインで追加されるオリジナルブロックの「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーはカスタマイザーで一括設定できます。 ver20240320以上より(※AFFINGERブロックプラグインもver2.8.1にアップデートする必要があります) 設定方法 カスタマイザー「AFFINGERブロック」パネル カスタマイザー>「AFFINGERブロック」>各パネルをクリックしてください。 初期カラーについて カスタマイザーの値が設定されてい ...

ReadMore

no image

2024/3/14

ヘッダーナビゲーションを固定する

ヘッダーナビゲーション(PC)を固定する機能を追加 カスタマイザーの「ヘッダーナビゲーション(PC)」に固定する機能を追加しました。 固定時専用のカラー及び透過レベルも指定できます。 「ヘッダーナビゲーション」>「パソコン(PC)」 position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関するプラグインやカスタマイズ利用時は正常に動作しない場合がございます PC閲覧時(wp_is_mobile() による分岐)のみ 「すごいもくじ」利用時に関してjsの ...

ReadMore

2024/3/14

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する

「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能(※EX版限定) 「ヘッダーナビゲーション(PC)」に加え「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能を追加しました。 PCヘッダーメニュー 「PCヘッダーメニュー」を固定します。 ヘッダーインフォメーション 「ヘッダーインフォメーション」ウィジェットを固定します。(任意のテキストなどが挿入できるエリアです。) position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関す ...

ReadMore

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2"]

注意ポイント

  • 指定できる列数は3~1です
  • 小さい画面の列数が大きい画面の列数より上になる指定はできません(自動で修正されます)
  • サイドバーや小画面にて3列を指定するとレイアウトが崩れやすいので御了承下さい
  • 記述ミスや漏れがある場合は自動修正されます

slide_date

「slide_date="off"」で投稿日(又は更新日)を非表示に出来ます。

no image

ステップスタイルについて

見出しブロックの「ステップ」スタイルのデザインを一新致しました。 アップデートを行うと旧デザインも変更されますのでご了承ください。 新しいデザイン 以下のように見やすいスッキリしたデザインに変更致しました。 ステップA ステップA ステップA 各ステップ見出し下のコンテンツはグループブロックの「左ライン」スタイルを適応しています。 四角いデザインの例 ステップ及びカウントスタイルのカラー反映箇所の変更 ステップのデザインやカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(S ...

ReadMore

会員(ログインユーザー)限定コンテンツのつくり方

グループブロックの「表示条件」を利用することでログインしているユーザーとしていないユーザーで表示を分けることができます。 これを活用することで会員(ログインユーザー)限定コンテンツを作ることができます。 会員登録機能はございません。「WP-Members Membership」プラグインなどをご検討ください 会員(ログインユーザー)限定コンテンツのつくり方 会員登録前のユーザーだけに見せたいコンテンツと、会員登録後(ログイン後)だけに見えるコンテンツをそれぞれグループブロックにまとめます。 コンテンツ表示 ...

ReadMore

「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーについて

AFFINGERブロックプラグインで追加されるオリジナルブロックの「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーはカスタマイザーで一括設定できます。 ver20240320以上より(※AFFINGERブロックプラグインもver2.8.1にアップデートする必要があります) 設定方法 カスタマイザー「AFFINGERブロック」パネル カスタマイザー>「AFFINGERブロック」>各パネルをクリックしてください。 初期カラーについて カスタマイザーの値が設定されてい ...

ReadMore

no image

ヘッダーナビゲーションを固定する

ヘッダーナビゲーション(PC)を固定する機能を追加 カスタマイザーの「ヘッダーナビゲーション(PC)」に固定する機能を追加しました。 固定時専用のカラー及び透過レベルも指定できます。 「ヘッダーナビゲーション」>「パソコン(PC)」 position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関するプラグインやカスタマイズ利用時は正常に動作しない場合がございます PC閲覧時(wp_is_mobile() による分岐)のみ 「すごいもくじ」利用時に関してjsの ...

ReadMore

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する

「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能(※EX版限定) 「ヘッダーナビゲーション(PC)」に加え「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能を追加しました。 PCヘッダーメニュー 「PCヘッダーメニュー」を固定します。 ヘッダーインフォメーション 「ヘッダーインフォメーション」ウィジェットを固定します。(任意のテキストなどが挿入できるエリアです。) position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関す ...

ReadMore

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="off"]

slide_more

「slide_more="テキスト"」でReadMoreを任意のテキストに変更できます

no image

ステップスタイルについて

見出しブロックの「ステップ」スタイルのデザインを一新致しました。 アップデートを行うと旧デザインも変更されますのでご了承ください。 新しいデザイン 以下のように見やすいスッキリしたデザインに変更致しました。 ステップA ステップA ステップA 各ステップ見出し下のコンテンツはグループブロックの「左ライン」スタイルを適応しています。 四角いデザインの例 ステップ及びカウントスタイルのカラー反映箇所の変更 ステップのデザインやカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(S ...

続きを読む

会員(ログインユーザー)限定コンテンツのつくり方

グループブロックの「表示条件」を利用することでログインしているユーザーとしていないユーザーで表示を分けることができます。 これを活用することで会員(ログインユーザー)限定コンテンツを作ることができます。 会員登録機能はございません。「WP-Members Membership」プラグインなどをご検討ください 会員(ログインユーザー)限定コンテンツのつくり方 会員登録前のユーザーだけに見せたいコンテンツと、会員登録後(ログイン後)だけに見えるコンテンツをそれぞれグループブロックにまとめます。 コンテンツ表示 ...

続きを読む

「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーについて

AFFINGERブロックプラグインで追加されるオリジナルブロックの「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーはカスタマイザーで一括設定できます。 ver20240320以上より(※AFFINGERブロックプラグインもver2.8.1にアップデートする必要があります) 設定方法 カスタマイザー「AFFINGERブロック」パネル カスタマイザー>「AFFINGERブロック」>各パネルをクリックしてください。 初期カラーについて カスタマイザーの値が設定されてい ...

続きを読む

no image

ヘッダーナビゲーションを固定する

ヘッダーナビゲーション(PC)を固定する機能を追加 カスタマイザーの「ヘッダーナビゲーション(PC)」に固定する機能を追加しました。 固定時専用のカラー及び透過レベルも指定できます。 「ヘッダーナビゲーション」>「パソコン(PC)」 position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関するプラグインやカスタマイズ利用時は正常に動作しない場合がございます PC閲覧時(wp_is_mobile() による分岐)のみ 「すごいもくじ」利用時に関してjsの ...

続きを読む

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する

「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能(※EX版限定) 「ヘッダーナビゲーション(PC)」に加え「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能を追加しました。 PCヘッダーメニュー 「PCヘッダーメニュー」を固定します。 ヘッダーインフォメーション 「ヘッダーインフォメーション」ウィジェットを固定します。(任意のテキストなどが挿入できるエリアです。) position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関す ...

続きを読む

[st-catgroup cat="0" page="5" order="desc" orderby="id" child="on" slide="on" slides_to_show="3,3,2" slide_date="off" slide_more="続きを読む"]

slide_center

スマホ閲覧サイズを「1」にしたときに「slide_center="on"」を設定すると両端が見切れるデザインになります。(※スマホ閲覧時のみ)

no image

2024/11/1

ステップスタイルについて

見出しブロックの「ステップ」スタイルのデザインを一新致しました。 アップデートを行うと旧デザインも変更されますのでご了承ください。 新しいデザイン 以下のように見やすいスッキリしたデザインに変更致しました。 ステップA ステップA ステップA 各ステップ見出し下のコンテンツはグループブロックの「左ライン」スタイルを適応しています。 四角いデザインの例 ステップ及びカウントスタイルのカラー反映箇所の変更 ステップのデザインやカラーはカスタマイザーの「オプション(その他)」>「ステップ・カウント/ポイント(S ...

ReadMore

2024/7/22

会員(ログインユーザー)限定コンテンツのつくり方

グループブロックの「表示条件」を利用することでログインしているユーザーとしていないユーザーで表示を分けることができます。 これを活用することで会員(ログインユーザー)限定コンテンツを作ることができます。 会員登録機能はございません。「WP-Members Membership」プラグインなどをご検討ください 会員(ログインユーザー)限定コンテンツのつくり方 会員登録前のユーザーだけに見せたいコンテンツと、会員登録後(ログイン後)だけに見えるコンテンツをそれぞれグループブロックにまとめます。 コンテンツ表示 ...

ReadMore

2024/4/5

「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーについて

AFFINGERブロックプラグインで追加されるオリジナルブロックの「メモ」「マイボックス」「タイトル付きフリーボックス」「バナー風ボックス」のデフォルトカラーはカスタマイザーで一括設定できます。 ver20240320以上より(※AFFINGERブロックプラグインもver2.8.1にアップデートする必要があります) 設定方法 カスタマイザー「AFFINGERブロック」パネル カスタマイザー>「AFFINGERブロック」>各パネルをクリックしてください。 初期カラーについて カスタマイザーの値が設定されてい ...

ReadMore

no image

2024/3/14

ヘッダーナビゲーションを固定する

ヘッダーナビゲーション(PC)を固定する機能を追加 カスタマイザーの「ヘッダーナビゲーション(PC)」に固定する機能を追加しました。 固定時専用のカラー及び透過レベルも指定できます。 「ヘッダーナビゲーション」>「パソコン(PC)」 position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関するプラグインやカスタマイズ利用時は正常に動作しない場合がございます PC閲覧時(wp_is_mobile() による分岐)のみ 「すごいもくじ」利用時に関してjsの ...

ReadMore

2024/3/14

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する

「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能(※EX版限定) 「ヘッダーナビゲーション(PC)」に加え「PCヘッダーメニュー」「ヘッダーインフォメーション」の固定機能を追加しました。 PCヘッダーメニュー 「PCヘッダーメニュー」を固定します。 ヘッダーインフォメーション 「ヘッダーインフォメーション」ウィジェットを固定します。(任意のテキストなどが挿入できるエリアです。) position:sticky で固定された要素とは被る可能性がございます jsやCSSの圧縮、キャッシュに関す ...

ReadMore

各パーツ説明

  1. 「カテゴリ」リンクは「テーマ管理」>「投稿・固定記事設定」>「記事一覧・関連記事一覧などにカテゴリを表示する」に連動しています。
  2. 表示されるコンテンツの高さは規定です(エリア以上の内容は表示されません)
  3. スライドアイコンはスライドに必要な数が無い場合は表示されません。また「テーマ管理」>「ヘッダー」>「スライドショーの矢印アイコンを非表示にする」に連動しています
  4. スライダーのドットは必要な数が無い場合は表示されません。また、10~11以上のスライドがある場合も非表示となります。

ご利用の注意

  • 多用されるほど処理に時間を要します。特に「page=""」にて記事数が多い場合はそのぶん、読み込みの処理が必要になります。
  • スマートフォンサイズ(小画面)でも一応3列表示は可能ですが幅が狭いためレイアウトが崩れる可能性が高くなりますので2列以下推奨です。
  • サムネイル画像の縦横比によっては余白ができる場合があります
  • 極端に多いカテゴリなどコンテンツによってはデザインが崩れる可能性がございますので適宜、調整ください。
  • AMPページには対応していません
  • テーマ管理の「ヘッダー」>”スライドショー機能の全停止”又は「SEO」>”表示速度優先(β)”が有効だと使用できません
  • 本機能と他プラグインが干渉する場合はどちらかを使用しないようにお願い致します。

サムネイル画像について

サムネイルサイズが合わない場合は無料「Regenerate Thumbnails」プラグインにてサムネイル画像を再生成をお試しください(Regenerate Thumbnailsの使い方

※他社製プラグインとなります。動作を保証するものではございません。

アイキャッチ画像スライドショー

「アイキャッチ画像」又は「アイキャッチ画像+記事タイトル」のみのスライドショー属性を追加しました。

アイキャッチ画像はフルサイズを読み込むので通常のスライダーよりも「画質が劣化しにくい」メリットがあります(その代り画像サイズの重いものを使用していると表示速度に影響が出る場合があります)

アイキャッチ画像のみ(fullsize_type="card")

no image

2024/11/1

2024/7/22

2024/4/5

no image

2024/3/14

2024/3/14

[st-catgroup cat="0" page="5" (略) fullsize_type="card"]

アイキャッチ画像+記事タイトル(fullsize_type="text")

no image

2024/11/1

ステップスタイルについて

2024/7/22

会員(ログインユーザー)限定コンテンツのつくり方

2024/4/5

「メモ」「マイボックス」「タイトル付きフリーボックス」...

no image

2024/3/14

ヘッダーナビゲーションを固定する

2024/3/14

「PCヘッダーメニュー」「ヘッダーインフォメーション」...

[st-catgroup cat="0" page="5"(略) fullsize_type="text"]

原則として「同じサイズの画像(縦横比)」による使用を推奨します。

横幅 100% (1 つのスライドの横幅いっぱい) で合わせています。上下は隠すようになっているのでサイズが異なる画像は以下のようになります。

  • 縦長の画像は上下が隠れる
  • 横長の画像は上下に隙間が空く

スライドショーサムネイル画像の縦横比は閲覧サイズや列数に応じて変化しています

※オリジナルサイズを読み込むため、設定しているアイキャッチ画像が重いと表示速度に影響が出る可能性があります。
※fullsize_typeでは日付・カテゴリ・ランキング(EX版)は表示されません

EX版では「タグ」「記事指定」のスライドショーにも対応してます

解決しないことは検索もしてみてね

人気の解析ツールをセットにしたお得なパックです。サイトの状況や改善点を視覚化することで目標達成のためやるべきことが明確になります。

  • シンプルでわかりやすいアクセス解析
  • クリック計測・広告管理機能
  • ABテスト機能

今ならお得なキャンペーン中!

さらに詳しくみる

AFFINGERデザインカード

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-ショートコード

【AFFINGER監修】 SEOを考慮したAI記事作成ツール

AFFINGER公式マニュアル

パスワードを入力してください

- 不明な方はコチラ -

PAGE TOP