AFFNGER6でブログカードを作る！基本4パターン
ブロックとクラシック版で作成した場合の違いやポイントはココ！を解説。
こんにちは "osaboo"
です。"@osaboo_Bot"
topページや記事にプログカードを貼り付けたいけどいろいろな形のパターンがあって良く解らない？
そもそも、ブログカードの作り方・貼り方が解らない？
作り方のパターンと表示パターンが知りたい！
＼この様な問題を解決します！／
ブログカードを作って貼り付ける方法はいっぱいあるけど、基本
ブロックとクラシック版の2通りの方法を覚えておけば良いと思うよ！
簡単だから…すぐ出来るよ ^^
今回の記事では…
AFFINGER6の標準機能を使った、カードスタイルの内部リンク『ブログカード』の作り方をご紹介します。
ちょっとした細工で「サムネイルスライドショー」の機能を残したままスライドさせない方法も…
AFFINGER6 で「ブロックエディター」が標準化され、標準メニューから、記事やカテゴリーの「id」を入れるだけの簡単な操作で内部リンクを追加できるようになりました。
これは、使わないと！^^
なので…使い勝手の良い「ブログカード」の作り方・貼り方を「ブロックエディターを使ったパターン」と「クラシックエディターを使ったパターン」に分けて、その作り方と表示の違いを解説します。
＼これで！！サイトと記事が思いのまま^^『グッとオシャレに…』／
ブロックエディターを使ったブログカードの作り方
自由度に欠ける所がデメリットですが…
ブロックエディターの標準メニューを使って
「ブログカード」を作成するのが、最も簡単で早いです。
-ps-
AFFINGER6 からの新機能になります。
それでは操作方法と表示タイプを見ていきましょう。
この章では、ブロックエディターを使ったブログカードの作り方をご紹介します。
『STINGER: 記事一覧（ID）』を選択してブログカードを作る手順
超簡単だよ！！^^
それでは 操作手順を見ていきましょう！！
ブログカードを挿入する記事（投稿）または、固定ページを選択します。
❶または❷のどちらかを選択して編集対象となるページを選択します。
- 『WordPress管理＞投稿＞投稿一覧＞タイトル』を選択して編集をクリックします。
- 『WordPress管理＞固定ページ＞固定ページ一覧＞タイトル』を選択して編集をクリックします。
次にページ内の「ブロックを追加」したい場所を選択します。
編集対象となるページの最上部に表示されている以下の画面の『＋』 ボタンをクリックして「ブロック挿入ツールを切り替え」ます。
※ 左側の画面を『WordPress編集』とします。
ブロック挿入ツールが切り替わり、以下のブロック選択メニューが表示されるので…下側にスクロールします。
『WordPress編集＞ブロックタブ＞STINGER：記事一覧（ID）』をクリックします。
編集対象ページに以下の画面（ブロック）が表示されるのでクリックしてブロックを選択します。
画面最上部の右側の『』をクリックします。
右側に以下のようなタブメニューが表示されます。
表示したい『記事ID』の番号を枠内に記入します。
補足
記事を複数追加する場合は、『記事ID』をカンマで区切ります。
例えば『記事ID』を3個入力する場合は『 1,2,3 』の様に入力します。
記事IDを入力した「ブログカード」は以下の様にリスト型で表示されます。
記事IDを「 1,2,3 」と記入した場合
-
-
UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】
WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！
-
-
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で！】
Googleサーチコンソール（Google Search Console）を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分！」1つ1つできる事を増やそう。
-
-
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】
AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説！初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。
横1列3個の表示になります。
ランキングを”ON"にした場合
-
1
-
UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】
WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！
-
2
-
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で！】
Googleサーチコンソール（Google Search Console）を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分！」1つ1つできる事を増やそう。
-
3
-
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】
AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説！初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。
横1列3個の表示になります。
※ ブログカードは、1列のリスト型に限定されます。（横2列等の表示はできません。）← 別途方法はあるので記事後半でご紹介します。
AFFINGER6EXを使用すると『カード化』『スライドショー』の2種類が表示可能になります。
（EX）カード化を”ON"にした場合
UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】
WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！
AFFINGER6【Googleサーチコンソールの導入・設定・使い方を初心者目線で！】
Googleサーチコンソール（Google Search Console）を初心者が噛み砕いて解説。サイト運営に欠かせないツールなので是非、早いうちに覚えておきましょう。画像付きで丁寧に解説「とっかかりはこれで十分！」1つ1つできる事を増やそう。
AFFINGER6【GoogleサーチコンソールのHTMLタグを確認・設定する方法】
AFFINGER6への「アナリティクスコード」と「サーチコンソールHTMLタグ」の設定方法をご紹介。アナリティクスのセットアップ手順やコードの確認方法を解説！初心者向には解りずらいサーチコンソールHTMLタグを確認する手順を全画像付きで解説。
AFFINGER管理＞投稿・固定記事＞記事一覧のカードデザイン化[EX]で
設定した表示条件が影響するので表示数の設定と記事表示数を考慮する必要があります。
横2列設定で3個の記事を表示すると上の様になります。←列は任意に変更できます。
（EX）スライドショーを”ON"にした場合
※ 記事をスライドショーの表示形式でスライドせずに表示できるようになっています。表示数の設定が自在にできるので表示画面の大きさによって好みに合わせて列数の表示が選べます。
横3列3個の表示になります。（管理人はこれが好き ^^" )
ちなみに…
クラシック版のイメージでカードスタイルで2列表示しようとすると…（3列表示も同等）
『2カラム』にして『STINGER：記事一覧（ID）』を貼り付けてみました。
これダメじゃん！！
AFFINGER6 でカラムを利用して2列を作ると下の画面のように文字が縦表示になってしまいます。
AFFINGER6EXではカード設定をすればきれいに仕上がります。
この使い方はNG ！ 参考までに…
AFFINGER6 のブロックエディターを使ったID入力によるブログカードに表示パターンは1列のリスト型に限定されている様で、カードスタイルにしようとすると縦文字表示になる弊害が出る様です。（マニアルに記載あり）
ID入力による『STINGER：記事一覧（ID)』メニューが追加されブログカードを追加するのは容易なっていますが自由度がイマイチのようです。
となると…ブロックエディターを使用してカードスタイルのブログカードを各ページに入れるには、EX版 or JET子テーマにアップデートする方法を選択するのが無難かと…（CSSで加工するのはむずいby初心者）
現状（AFFINGER6 ）のまま！となると…クラシックエディターを使って、ブログカードをカードスタイルにして貼り付けるしかない？！
こっちで解説するよ！←ここをクリックすると飛びます！！
『STINGER: カテゴリ一覧』を選択してブログカードを作る手順
STINGER：記事一覧（ID）を追加した手順と同じ様に以下の画面を開きます。
『WordPress編集＞ブロックタブ＞STINGER. カテゴリ一覧 』をクリックします。
編集対象ページに以下の画面（ブロック）が表示されるので『領域』をクリックしてブロックを選択します。
画面最上部の右側の『歯車マーク』をクリックします。
表示したい『カテゴリ ID』と『ページ』を記入します。（表示順序は『投稿ID』etcを変更します。）
補足
記事を複数追加する場合は、『カテゴリID』をカンマで区切ります。
例えば『カテゴリID』を3個入力する場合は『 1,2,3 』の様に入力します。
カテゴリIDを入力した「ブログカード」は以下の様にリスト型で表示されます。
カテゴリIDを「〇〇」ページを「5」と記入した場合
-
-
AFFINGER6 テーブルブロックの使い方！商品比較と対比表を簡単作成
AFFINGER6のエディター機能 テーブルブロックの使い方！を初心者さん向けに解説。テーブル（表）は商品比較や対批表を作る時に便利です。おしゃれで便利なAFFINGER6の拡張機能を使って「かっこよく・見やすい」テーブル（表）を作る基礎を画像盛り沢山でお届け！
-
-
AFFINGER6 リストブロックの使い方！記事を「わかりやすく・読みやすく」グレードアップ
AFFINGER6の拡張機能を備えたリストブロックの使い方をご紹介。記事を「わかりやすく・読みやすく」グレードアップするためには必須のブロックエディター機能です。記事にメリハリと見やすさを求めている初心者さん必見です。メニュー項目の表示イメージをすべて掲示！！
-
-
AFFINGER6 マイブロックで「カテゴリー・タグ」ページをカスタマイズ【クラシックエディターは使わない】
AFFINGER6のマイブロックを使った「カテゴリー・タグ」ページのカスタマイズ方法をご紹介。AFFINGER６の「カテゴリー・タグ」ページはクラシックエディターにしか対応していませんが、マイブロックを使えばブロックエディターを使ったカスタマイズが可能です。クラシックエディターが苦手な初心者さん向けにご紹介。
-
-
AFFINGER6 段落ブロックから「 / 」で簡単に他のブロックを挿入する方法【記事がすらすら書けちゃうテクニック】
AFFINGER6で段落ブロックから「ブロック挿入ツールを使わず」直接ブロックを呼び出して挿入する方法をご紹介。記事が爆速ですらすら書けちゃうテクニックです！！ブロック挿入ツールを切り替えるのが面倒という方必見です。ブロックを呼び出すキーワード一覧画像添付付きです！
-
-
AFFINGER6 段落ブロックの使い方！【トップツールバーのブロック・文章ツールも併せて解説】
AFFINGER6の段落ブロックの使い方をご紹介。初心者さん向けにメニューと表示イメージをわかりやすく解説。段落ブロックの投稿（記事）挿入から装飾方法までに表示される各所メーニューを全て理解できるようにイメージ（画像等）を添付して説明しています。初心者必見です。
横1列5個の表示になります。
※ ブログカードは、1列のリスト型に限定されます。（横2列等の表示はできません。）← 別途方法はあるので記事後半でご紹介します。
スライドショータイプの表示もできるのでご紹介します。
カテゴリの選択を同じ条件としてスライドショーを”ON"にすると以下の様に表示されます。
同じ条件でスライドショーを"ON"にした場合
横3列で5ページ（5個の記事）の表示になります。
※ スライドタイプ :「表示設定は画像のみ ＋ タイトル」で表示しています。
ブロックエディターを使ったブログカードの作り方は以上です。
「いろいろお好みで試してください^^」
クラシックエディターを使ったブログカードの作り方
自由度が高く色々なパターンを表示可能！
リスト型・カード型・スライドショーを作成する事が出来ます。
カード型の自由度が広く様々な配置が可能です。（2列・3列・非対称）
-ps-
初心者的には少し面倒…！？
それでは操作方法と表示タイプを見ていきましょう。
この章では、クラシックエディターを使ったブログカードの作り方をご紹介します。
『クラシック版の段落』を選択してブログカードを作る手順
※ ブログカードを記事に貼り付ける場合は『クラシック』と『クラシック版の段落』のどちらを使用しても支障はありませんが…本記事では『クラシック版の段落』を使用した解説になります。
補足
『クラシック』は使い回し機能『再利用ブロック』に追加できません。
『クラシック版の段落』は使い回し機能『再利用ブロック』に追加できます。←こちらを使う方が無難
『WordPress編集＞ブロックタブ＞クラシック版の段落 』をクリックします。
クラシック版の段落（グレー部分）をクリックします。
クラシック版のメニューが表示されます。
この画面から横1列.2列等のブログカードを作っていきます。
横1列のリスト型ブログカードを作る手順
横1列のリスト型ブログカードの完成イメージです。
『クラシック版のメニュー＞カード』タブをクリックしてデフォルトのコードを呼び出します。
デフォルトのコードが表示されたら赤矢印部に『記事ID』を入力します。
※ id="〇〇" 記事のIDは1個のみ有効です。→ id="〇〇,△△" はNGです。（先頭のID番号しか認識しません。）
連続してブログカードを並べる場合はコードを下行にコピーして『記事ID』を変更します。
または、再度『カード』タブをクリックしてデフォルトコードを呼び出して『記事ID』を入力します。
※ この様なイメージです。
補足『ブログカードコード』
ブログカードのコードの内容を簡単に表にまとめてみました。
| 指示名 | 内容 |
|---|---|
| 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管理＞固定ページ一覧・投稿一覧』で確認後に入力します。
横1列のリスト型ブログカードは以下の様に表示されます。
記事IDを「〇〇」とした場合
-
-
UpdraftPlusの設定を初心者がやってみた！【バックアップと復元が一発！】
WordPressプラグイン「UpdraftPlus」のおすすめな理由・導入方法・初期設定・使い方等を初心者の目線で解説。バックアップ用のプラグインで「バックアップと復元」が一発で簡単にできます。バックアッププラグイン初心者向けの一押しです。是非！
続きを見る
※ 「表示設定は画像のみ ＋ タイトル ＋ 抜粋」で表示しています。
横2列のカード型ブログカードを作る手順
横2列のカード型ブログカードの完成イメージです。
ページ幅を2等分にしてカード型ブログカードを貼り付けます。
『クラシック版のメニュー＞タグ＞レイアウト＞PCとTab（959px以上）＞左右50%』
①から④の順にマウスオーバーでメニューを開いて④でクリックします。←ちょっとやりにくい？！
ブログカードを配置する画面が表示されます。
①カードを挿入する側の領域を選択して→②カードをクリックします。
カードスタイルのコード（命令文）が挿入されます。（右側も同様に処理します。）
同じスタイルが左右に挿入できたら、不要部分を削除します。（赤枠部のテキスト）
左右各々に『 id="" → id="〇〇" 』の様に「記事ID」を入力します。
横2列のカード型ブログカードは以下の様に表示されます。
カードスタイルを変更していない場合
※ 記事タイトルの長さとサイトの表示幅の関係で落差が生じる場合があります。
高さが違う！！なんで…
ちょっと小細工するとこうなります。
カードスタイルを変更していない場合（背景処理による表示幅制限）
※ クラシックブロックを他のブロックとグループ化して背景に色とか枠を入れると記事内での表示幅が狭くなる仕組みを利用した小細工です。^^
左右の記事のタイトルが行が揃わなかった時に使うと重宝します。
裏技っぽくてお勧めしにくいですが…こんなこともできるっという事でご紹介しておきます。^^
タイトルの長さによって、並びのカードに落差が生じる場合があります。（表示画面幅に追従してカードが表示されるのが原因）修正方法は高さを強制的に固定する方法とかカードスタイルを変更するなどの方法があります。
ブログカードが表示される範囲を狭める又は広げる…等
CSSで整える方法もありますが…支障も出る可能性があるので…お勧めできません。なので…
＼ 簡単な方法をご紹介します。／
その1「カードスタイルを付加します。」
「サイトの表示幅」・「記事の幅」・「記事タイトルの文字数」の設定で表示の落差がどの様に出るかはまちまちの様です。
当サイトの場合は『カードスタイルB』がマッチしています。
変更するカードの領域を選んで『クラシック版のメニュー＞スタイル＞レイアウト＞カードスタイル』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。
その2「カードスタイルBを付加します。」
落差が出たりカード枠ギリギリまでタイトルを広げて縦幅を小さくしたい時には以下の様にレイアウトのスタイルを変更します。← ここポイント！
レイアウトスタイルを変更してタイトル文字数によるカードの落差を抹消します。
変更するカードの領域を選んで『クラシック版のメニュー＞スタイル＞レイアウト＞カードスタイルB』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。
コードの表示が少し変わります。
ブログカードの落差が生じた場合は 解消されて同じ高さで表示されます。
(タイトルの表示幅が広がります。）
※ 当サイトではこの方法で落差が生じた場合の回避をしています。
注意タイトルの文字数に差が大きい場合、落差は吸収できません。
今回ご紹介した方法を織り交ぜてお好みの配置にお役立てください。^^
横3列のカード型ブログカードを作る手順
横3列のカード型ブログカードの完成イメージです。
操作方法は、2列配置と同等で以下のメニューから始めます。
『クラシック版のメニュー＞タグ＞レイアウト＞PCとTab（959px以上）＞3分割』
手順の詳細は、こちらです。始めのメニュー選択（④左右50%→3分割）が違うだけで要領は同じです。
…割愛いたします。
クラシックエディターを使ったブログカードの作り方は以上です。
「サムネイルスライドショー」の機能を残したままスライドさせない方法
完成イメージ
『クラシック版の段落』を使った『記事一覧（スライドショー）』と『カテゴリ一覧（スライドショー）を使用したカード型ブログカードの作り方をご紹介します。
スライドショーに表示する記事数と表示する記事数の指示を同じにすればスライドは固定できます。←管理人が大好きな表示スタイルです.。^^")
現段階（2022年1月11日）ではこの方法しかない様ですが…（EXなら表示はブロックエディターで可能です。）
記事一覧（スライドショー）の作り方【AFFINGER6EX】
説明画像は「AFFINGER6EX」になっています。選択項目に多少違いがあるのでご注意ください。
「AFFINGER6の場合カテゴリ一覧（スライドショー）を選択します。」
『クラシック版のメニュー＞タグ＞記事一覧／カード＞記事一覧（スライドショー）』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。
記事一覧（スライドショー）のデフォルトコードが表示されたら赤矢印部に『記事ID』を入力します。
補足【記事一覧】
記事を複数追加する場合は、『記事ID』をカンマで区切ります。
例えば『記事ID』を3個入力する場合は『 1,2,3 』の様に入力します。
補足【記事一覧】
記事一覧（スライドショー）のコード内容を簡単に表にまとめてみました。
| 指示名 | 内容 |
|---|---|
| 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"）（全て表示""） |
カテゴリ一覧（スライドショー）の作り方
『クラシック版のメニュー＞タグ＞記事一覧／カード＞カテゴリ一覧（スライドショー）』
①から③の順にマウスオーバーでメニューを開いて③でクリックします。
カテゴリ一覧（スライドショー）のデフォルトコードが表示されたら赤矢印部に『カテゴリID』を入力します。（デフォルトでは"0"→全てのカテゴリ）
補足【カテゴリ一覧】
カテゴリを複数追加する場合は、『カテゴリID』をカンマで区切ります。
例えば『カテゴリID』を3個入力する場合は『 1,2,3 』の様に入力します。
補足【カテゴリ一覧】
カテゴリ一覧（スライドショー）のコード内容を簡単に表にまとめてみました。
| 指示名 | 内容 |
|---|---|
| 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"）（全て表示""） |
「サムネイルスライドショー」の機能を残したままスライドさせない方法は以上です。
まとめ！AFFINGER6 ブログカードの作り方【徹底的に調べてみた！！】
今回は「ブログカードの作り方と表示状態」をブロックエディターとクラシックエディターに分けてご紹介しました。「サイト作りがもっと楽しくなる！？」のにお役に立てば幸いです。お疲れ様でした！^^
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
