AFFINGER6「ブログカード」の作り方＆カスタマイズ設定方法。サムネ画像付きの記事リンク【ワードプレスブログ「完全初心者」ガイド／第７章／No.17】

専業ブロガー５年目のあずきです🐥

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

について、ブログ初心者さん向けに１からわかりやすく解説していきます

まずACTION AFFINGER6における「ブログカード」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

↓（カスタマイズ後の例）

このように、「カード型」のデザインで作成できる機能です

本来の「リンク」機能としてはもちろん、記事のなかで「メリハリ」の役割にもなってくれるよ！

そんなACTION AFFINGER6における「ブログカード」について、３つのステップで丁寧に解説していきます

ということで、さっそく見ていきましょー🐥

AFFINGER6「ブログカード」の作り方＆カスタマイズ設定方法。サムネ画像付きの記事リンク【ワードプレスブログ「完全初心者」ガイド／第７章／No.17】

ステップ１：ACTION AFFINGER6における「ブログカード」の作り方

まずは、ブログカードで「リンク先URL」として設定したい記事ページの「ID」をチェックする必要があります

WordPress管理画面から「投稿一覧」もしくは「固定ページ一覧」を開いたら…

↑ 記事ごとで割り振られているID（上画像では75！）が一覧の右列に表示されているので、こちらの番号をコピーなどしておきましょう

該当記事の「ID」を確認できたら、これからブログカードを設置したい記事の編集画面を開き…

↑ 任意の箇所に貼り付けてから、そのID番号を上画像のように「選択」した状態にします

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK！

ID番号を選択できたら、画面上部の…

↑「カード」というボタンをクリックすることで…

↑ このように、ブログカード専用の「ショートコード」が生成されます

これでもうブログカードは作れてるよ！

プレビュー画面で確認してみると…

↑ このようなブログカードが表示されました

つづいて、このブログカードの各種デザインを【カスタマイズ】していきましょう🐥

ステップ２：ACTION AFFINGER6における「ブログカード」のカスタマイズ方法：「個別」設定編

ACTION AFFINGER6で作成した「ブログカード」は、その表示デザインを「カードごとで個別にカスタマイズ」することが可能です

具体的には、ブログカードを作成した際に編集画面上に生成される…

↑ こちらの「ショートコード」を、任意の内容にカスタマイズしていきます🐣（編集エディタは、引き続き「ビジュアル」のままで大丈夫です）

左から順に見ていくよ！

st-card myclass=""

こちらは通常、デフォルトの「空欄」のままでOKです

id=""

【ステップ１】でご紹介した、ブログカードのリンク先となる記事ページの「ID」を指定する項目になります（例　id="51"　）

ブログカードの「ショートコード」を生成したあとでリンク先を変更したい場合は、この「ID」番号を差しかえよう！

label=""

ブログカード内の左上に装飾される…

↑ こちらのラベルデザイン（黄色い帯のところ！）を指し、上画像のように「5文字以内」程度で任意のラベルタイトルを入力します（例　label="オススメ！"　）

ラベルを付けたくない場合は、「空欄」のままにすればOK！

pc_height=""

PC画面にブログカードが表示された場合の「高さの数値」を、　px　というサイズ単位で指定できます（例　pc_height="150"　）

「px」は入力不要で、数値だけ入力すれば大丈夫だよ！

name=""

ブログカード内の上部に「太字」で表示される…

↑「リンク先ページのタイトル名」を指定できます（例　name="このタイトル名も自由に変更可能です"　）

例えば…

といった場合などに便利な項目です

元々の記事タイトルで問題なければ、「空欄」のままでOK！

bgcolor=""

さきほどご紹介したラベルデザイン（例　label="オススメ！"　）を付けた場合の「背景色」を、カラーコードで指定できます（例　bgcolor="#f54e6a"　）

このカラーコードについては、「WEB色見本 原色大辞典」様を始めとした各種「色見本サイト」でカラーコードを確認可能です

カラーコードは、先頭に必ず　#　を付けるのを忘れずに！

↑ ラベル背景色のカスタマイズ例です

color=""

同じくラベルデザイン（例　label="オススメ！"　）を付けた場合の「文字色」を、カラーコードで指定できます（例　bgcolor="#1001b2"　）

↑ ラベル文字色のカスタマイズ例です

webicon=""

ラベルデザインの先頭に…

↑ このように、指定した「アイコン」を追加できる項目です

上の画像例だと、左端に表示されてる「王冠」アイコンの部分！

具体的には、編集画面上部の　タグ　＞　ショートコード補助　を開いたなかにある…

というところを開くと、「Webアイコン」のバリエーションが一覧表示されるので、そのなかから任意のWebアイコンを選択しましょう（例：王冠）

使用したいWebアイコンを選択すると…

が本文欄に貼り付けられるので、このコードを　webicon="●●●●●"　の　●●●●●　にあたる部分へ貼り付ければOKです（例　webicon="st-svg-oukan"　）

ちなみに！

各種Webアイコンの「色設定」については、WordPress管理画面の左側一覧から…

を開き、さらにそのなかの左側一覧から…

という順に開いたタブ内にて、自由にカスタマイズできます

readmore=""

ブログカード内の…

というボタンデザインの「表示 or 非表示」を指定できる項目です

「続きを見る」ボタンを表示させたくない場合は、デフォルトで入力されている　on　を　空欄　に変えれば…

↑ このように、ボタンを非表示にできます（例　readmore=""　）

thumbnail=""

こちらはAFFINGERの「EX版」向け機能（デフォルトの　on　→　off　に変更で「サムネ画像表示」をオフ！）なので、通常版のAFFINGERであれば「空欄のまま」でOKです

type=""

さきほどご紹介した「ラベル」のデザインを、デフォルトの「たすき掛け」から…

↑ このように、「テキスト表示（記事タイトルの左側への表示スタイル！）」に変更するかどうかを指定できる項目になります

もしも上画像のようなラベルデザインに変更したい場合は、デフォルトの　空欄　から　text　と入力すればOKです（例　type="text"　）

通常のデザインでいい場合は、「空欄」のままで大丈夫だよ！

ということで！

最後に、こうしたブログカードの各種デザインを【共通設定】からカスタマイズする方法について見ていきましょう🐥

ステップ３：ACTION AFFINGER6における「ブログカード」のカスタマイズ方法：「共通」設定編

ACTION AFFINGER6では、ブログカードの表示デザインを「カードごとで個別にカスタマイズできる」だけでなく…

で一括反映される設定項目というのが、いくつか用意されています

この「共通設定」からじゃないと作れないデザインもあるから、サクッとチェックしておこう！

まずは、WordPress管理画面の左側一覧から…

を開き、さらにそのなかの左側一覧から…

という順にタブを開くと…

↑ このようなブログカードの設定項目が用意されているので、こちらで全カードの「共通設定」をカスタマイズしましょう

今回は例として、「ラベルデザイン」という項目だけ…

に変更してみます

設定を変えたら、左上の「公開」ボタンを忘れずにクリック！

実際の画面上で確認してみると、「たすき掛け」スタイルのラベルデザインが…

↑ このような「リボン」スタイルに変更されました🐥

ちなみに、同じ設定画面に表示されている…

ですが、【ステップ２】でご紹介したラベルの「背景色」と「文字色」を個別に指定しなかったブログカードについては、ここの「共通設定」で決めた配色がデフォルトカラーとして自動的に反映されます

そしてもう１点！

ブログカード上にデフォルトで表示される…

↑ こちらの「抜粋」エリアについて

この抜粋表示（リンク先記事の冒頭から「自動で抜粋」されるテキスト！）については…

を開いたなかの、「抜粋設定」というエリア内にある…

↑ こちらの２項目にて、表示 or 非表示をカスタマイズできます

参考までにこのブログでは、ブログカードの抜粋はPCもスマホも「非表示」にしてるよ！

ということで…

こちらも設定を変更したら、画面右上の「Save」ボタンを忘れずにクリックしてカスタマイズ完了です🐥

あずきのワードプレスブログ「完全初心者」ガイド