AFFINGER6を使うなら欠かせないのが「[st-card]」ショートコード。
関連記事やおすすめ記事をカード形式で美しく表示でき、クリック率や滞在時間の向上に役立ちます。
しかし、「パラメータが多くて難しい」「EX版との違いが分からない」という声も少なくありません。
この記事では、初心者でも迷わず使える基本設定から、EX版限定の応用テク、SEOやデザイン最適化のポイントまでを完全網羅。
すぐ使えるテンプレートとFAQも用意しました。
AFFINGER6「st-card」とは？機能と魅力を一言で解説
AFFINGER6の「st-card」は、ブログ記事をカードデザインで視覚的に表示するためのショートコードです。
シンプルな呼び出しで、投稿IDを指定するだけで関連記事や人気記事をカード形式に変換。内部リンクのクリック率を上げ、サイト全体の回遊率を向上させる効果があります。
さらにEX版では、サムネイルデザインやカスタムクラス、ラベルの配色などを細かく制御可能。SEOにもデザインにも優れた万能ツールといえます。
基本の使い方｜初心者でも迷わないst-card設定方法
最もシンプルな使い方
AFFINGER6でカードを挿入する最小コードはこれだけです。
[st-card id="123"]
「ｉｄ」には、表示したい投稿や固定ページのＩＤを指定します。投稿ＩＤはWordPressの編集画面URLの「ｐｏｓｔ＝数字」で確認可能です。
エディタでの挿入手順
クラシックエディタの場合はテキストモードにコードを貼り付け、ブロックエディタ（Gutenberg）の場合は「ショートコードブロック」を選択して入力します。
これだけで、カードデザインの内部リンクが完成します。
全パラメータ一覧と意味｜デフォルト値・EX版機能の違いも解説
AFFINGER6のst-cardには多くのパラメータが存在します。
以下の表で、デフォルト値と用途をまとめました。
| パラメータ | デフォルト値 | 説明 |
|---|---|---|
| ｉｄ | 0 | 必須。表示する投稿のID |
| label | 空 | カード上部にラベルを表示 |
| name | 空 | カスタムタイトル（指定なしの場合は投稿タイトル） |
| bgcolor | #ffa520 | ラベル背景色 |
| color | #ffffff | ラベル文字色 |
| pc_height | 空 | PC表示時のカード高さ（px単位） |
| readmore | off | 「続きを見る」リンクの表示（on/off） |
| fontawesome | 空 | Font Awesomeアイコンのクラス |
| webicon | 空 | Webアイコンのクラス（fontawesomeより優先） |
| thumbnail | on | サムネイル画像表示（EX版のみ） |
| myclass | 空 | カスタムCSSクラス（EX版のみ） |
| type | 空 | 表示タイプ（EX版のみ） |
通常版とEX版の違い
EX版では、デザイン自由度が大幅にアップします。
特に「type」「myclass」「thumbnail」など、カードデザインやCSS制御が可能です。
主要パラメータの使い方
- label：カードに小さな見出しをつける
- bgcolor / color：ラベルの背景色と文字色を変更
- pc_height：カード高さを固定してレイアウト崩れを防止
- readmore：CTAを強調してクリック率をアップ
タイプ別デザイン例とテンプレート集
標準カード
[st-card id="123"]
ラベル付きカード
[st-card id="123" label="おすすめ記事" bgcolor="#ff0000" color="#ffffff"]
アイコン付きラベル
[st-card id="123" label="人気記事" webicon="fa-star" bgcolor="#ffa520"]
サムネイルなし（EX版）
[st-card id="123" thumbnail="off"]
ワイド表示（EX版）
[st-card id="123" type="wide" readmore="on"]
実践テク｜SEO・UXを高めるst-card設定のポイント
内部リンクSEOを強化する
st-cardは内部リンク構造を明確にし、Googleに関連性を示す効果があります。
特に関連記事を文中でカード化することで、テーマ性と回遊率を高められます。
画像alt属性の最適化
EX版でサムネイルを表示する際は、カード内の画像に適切なalt属性を設定しましょう。
例：「AFFINGER6 st-cardの使用例」など、コンテンツ内容を簡潔に示す文言が理想です。
readmore=onの効果的な使い方
「readmore=on」を使うと、「続きを見る」ボタンが自動で表示されます。
内部リンク誘導を強化したいときや、特集ページ・ランキング記事との相性が良い設定です。
スマホ表示最適化（pc_height）
pc_heightはPCでのみ有効。スマホでは自動調整されるため、PCで高さを統一したい場合のみ設定しましょう。
よくあるトラブルと解決法（FAQ）
Q1. 同一ページでカードが表示されない（無限ループ）
→ 自分自身の記事IDを指定すると、ループ回避のため自動で非表示になります。別記事IDを指定してください。
Q2. サムネイルが出ない
→ 投稿にアイキャッチが設定されていない場合は表示されません。もしくはEX版でのみ有効なパラメータを使用している可能性があります。
Q3. アイコンが表示されない
→ 「fontawesome」より「webicon」の方が優先されます。両方を指定している場合、webiconを空にしてください。
Q4. パラメータが反映されない
→ キャッシュやテーマバージョンの影響もあるため、AFFINGER管理画面からキャッシュ削除・再保存を行ってください。
まとめ｜st-cardを使いこなしてブログの印象と回遊率をアップ！
AFFINGER6の「st-card」は、デザインとSEOを両立できる非常に強力なショートコードです。
基本パラメータを理解し、EX版機能やテンプレートを活用することで、ブログカードをあなたのサイトの「魅せる導線」に変えられます。
カードリンクを使いこなせば、関連記事の誘導・シリーズ記事の整理・ランキング表示などにも応用可能です。
最後に、本記事で紹介した設定をまとめた「st-cardパラメータ早見表」も活用してください。
