WORDPRESS

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

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

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

 

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

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

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

 

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

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

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

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

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

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

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

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

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

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

 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
【2023年2月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

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

 

注意

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

ステップ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」ボタンを忘れずにクリックしてカスタマイズ完了です🐥

 

人気記事

 

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

「全8章」の総合TOPページです

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

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

-WORDPRESS