WORDPRESS

AFFINGER6「ブログカード」の作り方とカスタマイズ方法を初心者向けに解説。サムネイル画像つきリンクの作成方法【ACTION/WordPressブログ】

AFFINGER6「ブログカード」の作り方とカスタマイズ方法
 

あずきです🐥

 

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

「ブログカード」の作り方とカスタマイズ方法

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

 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-01

↓(カスタマイズ後の例)

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-02

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 top-03

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

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

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

  1. ブログカードの作り方
  2. ブログカードのカスタマイズ方法:「個別」設定編
  3. ブログカードのカスタマイズ方法:「共通」設定編

さっそく見ていきましょー🐥

 

 

AFFINGER6「ブログカード」の作り方とカスタマイズ方法を初心者向けに解説。サムネイル画像つきリンクの作成方法【ACTION/WordPressブログ】

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで
【2021年】WordPressのクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで1から解説

続きを見る

 

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

WordPress ヘッダー c-01

 

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

 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-1-01-a

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

 
 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-1-01-b

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

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

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-1-01-c

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-1-01-d

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

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

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-1-02

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

 

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

 

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

WordPress ヘッダー c-02

 

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

 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-top-01

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

左から順に見ていくよ!
 

st-card myclass=""

st-card myclass=""

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

 

id=""

id=""

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

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

label=""

label=""

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-03

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

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

pc_height=""

pc_height=""

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

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

name=""

name=""

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-05

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

 

例えば…

このリンク先ページは「記事タイトルの文字数」がちょっと長めだから、ブログカード上では簡略表示させたい!

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

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

bgcolor=""

bgcolor=""

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

 

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

カラーコードは、先頭に必ず # を付けるのを忘れずに!
AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-06

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

 

color=""

color=""

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-07

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

 

webicon=""

webicon=""

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-08

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

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

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

Webアイコン(クラス)

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

 

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

そのアイコン専用のコード(例 st-svg-oukan )

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

 

ちなみに!

 

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

外観 > カスタマイズ

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

オプション(その他) > 記事内のWebアイコン(スタイル)

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

 

readmore=""

readmore=""

ブログカード内の…

続きを見る

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

 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-09

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

 

thumbnail=""

thumbnail=""

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

 

type=""

type=""

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-11-a

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-2-11-b

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

 

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

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

ということで!

 

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

 

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

WordPress ヘッダー c-03

 

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

全ブログカード共通

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

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

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

外観 > カスタマイズ

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

オプション(その他) > ブログカード / ラベル

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-3-01-a

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

 

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

デフォルト(たすき掛け) → リボンデザイン

に変更してみます

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

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-3-01-b

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

 

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

  • ラベル背景色
  • ラベルテキスト色

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

 

そしてもう1点!

 

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-3-02-a

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

 

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

AFFINGER管理 > 「全体設定」タブ

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

AFFINGER6「ブログカード」の作り方とカスタマイズ方法 1-3-02-b

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

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

ということで…

 

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

 
 

今回の記事はこちらの章に属しています

 第7章 記事投稿 編          

次の章はこちらからどうぞ

 第8章 収益化 編           

全9章のTOPページです

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

 

-WORDPRESS