お知らせ!AFFINGER6・EX・タグマネージャー4 を当サイトよりご購入いただいた方! \限定オリジナル特典/ 『 当サイトの初期設定をすべて公開!! 他 』をお付け致します!

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

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

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

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

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

Question

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

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

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

osaboo

こんな方におすすめ

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

今回の記事では…

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

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

AFFINGER6 で「ブロックエディター」が標準化され、標準メニューから、記事やカテゴリーの「id」を入れるだけの簡単な操作で内部リンクを追加できるようになりました。

これは、使わないと!^^

なので…使い勝手の良い「ブログカード」の作り方・貼り方を「ブロックエディターを使ったパターン」と「クラシックエディターを使ったパターン」に分けて、その作り方と表示の違いを解説します。

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

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

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

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

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

 




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

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

osaboo

超簡単だよ!!^^

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

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

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

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

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

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

WordPress編集

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

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

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

WordPress編集-STINGER:記事一覧(ID)

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

記事一覧-挿入

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

編集メニューopen

右側に以下のようなタブメニューが表示されます。

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

ブロック-記事一覧

補足

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

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

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

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

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

UpdraftPlusの設定を初心者がやってみた!Backupと復元が一発
UpdraftPlusの設定を初心者がやってみた!【バックアップと復元が一発!】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ちなみに…

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

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

これダメじゃん!!

osaboo

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

NGパターンのブログカード

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

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

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

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

osaboo

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

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

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

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

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

WordPress編集-STINGER:カテゴリ一覧

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

カテゴリ一覧-挿入

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

編集メニューopen

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

ブロック-カテゴリ一覧

補足

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

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

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

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

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

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


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

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

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

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

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

 

-ps-

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

 

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

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

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

補足

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

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

ブロック-クラシック版の段落

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

ブロック-クラシック版の段落-挿入

クラシック版のメニューが表示されます。

この画面から横1列.2列等のブログカードを作っていきます。

ブロック-クラシック版の段落-編集

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

横1列のリスト型ブログカードの完成イメージです。

サンプルブログカード
完成イメージ

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

クラシック-ブログカード作成手順-1

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

クラシック-ブログカード作成手順-2

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

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

クラシック-ブログカード作成手順-3

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

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

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

指示名内容
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の設定を初心者がやってみた!Backupと復元が一発
UpdraftPlusの設定を初心者がやってみた!【バックアップと復元が一発!】

続きを見る

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

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

横2列のカード型ブログカードの完成イメージです。

横2列のカード型ブログカード
完成イメージ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

※ 記事タイトルの長さとサイトの表示幅の関係で落差が生じる場合があります。

osaboo

高さが違う!!なんで…

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

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

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

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

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

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

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

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

横2列のカード型ブログカードを作る手順-8
その2「カードスタイルBを付加します。」

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

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

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

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

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

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

ブログカードの落差が生じた場合は 解消されて同じ高さで表示されます。
(タイトルの表示幅が広がります。)

※ 当サイトではこの方法で落差が生じた場合の回避をしています。
注意タイトルの文字数に差が大きい場合、落差は吸収できません。

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

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

横3列のカード型ブログカードの完成イメージです。

横3列のカード型ブログカードを作る手順-1
完成イメージ

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

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

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

…割愛いたします。

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

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

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

UpdraftPlusの設定を初心者がやってみた!【バックアップと復元が一発!】

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

ReadMore

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

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

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

ReadMore

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

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

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

ReadMore

完成イメージ

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

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

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

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

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

記事一覧(スライドショー)の作り方-1

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

記事一覧(スライドショー)の作り方-2

補足【記事一覧】

記事を複数追加する場合は、『記事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")(全て表示"")

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

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

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

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

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

補足【カテゴリ一覧】

カテゴリを複数追加する場合は、『カテゴリ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 ブログカードの作り方【徹底的に調べてみた!!】

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

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