affinger-blog-card-20200322_ec

WordPress

AFFINGER5で、リンクの一種「ブログカード」を作る手順【WordPressブログ】



今回は、このブログでも愛用中のWordPressテーマ「WING(AFFINGER5)」における…

「ブログカード」の作成手順

をご紹介していきたいと思います

まず「ブログカード」とは、ブログにおける「リンク」の一種で…

affinger-blog-card-20200323_top-01

↑ こういったもの

通常の…

affinger-blog-card-20200323_top-02

↑ こういったテキストリンク(青字のとこ!)よりも、よりキャッチーかつ目立たせることができます

で、「WING(AFFINGER5)」なら、このブログカードの作成は「超簡単」です

具体的には、次の2ステップにわかれます

  1. ブログカードにしたい記事の、「ページID」をチェックする
  2. そのページIDを、「カード」ボタンでショートコード化する
30秒もかからないよ!

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

ブログカードにおける「抜粋文」の表示設定のカスタマイズ方法は、↓ をどうぞ♪

affinger-customize-blog-card-20200323_ec
AFFINGER5で、「ブログカード」の抜粋表示の設定をカスタマイズする手順【WordPressブログ】

続きを見る

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

AFFINGER5における、「ブログカード」の作成手順【WordPress】

【ステップ①】ブログカードにしたい記事の、「ページID」をチェックする

pc-work-202001_01

まずは、ブログカードにしたい記事の「ページID」を調べましょう

WING(AFFINGER5)」では…

affinger-blog-card-20200322_1-01

↑ WordPress管理画面 > 投稿一覧 をクリックすると…

affinger-blog-card-20200322_1-02

↑ この投稿一覧から、各記事の「ページID」が簡単にわかるようになってます

拡大すると…

affinger-blog-card-20200322_1-03

↑ ここです

今回は例として、このページIDが「1」の記事を、ブログカードにしていきたいと思います

次パートへ!

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

【ステップ②】そのページIDを、「カード」ボタンでショートコード化する

pc-work-202001_02

「ページID」が無事わかったら、新たに記事の編集画面を開きましょう

ちなみに編集エディタは、普通に「ビジュアルエディタ」のままでOKです

「そもそもエディタって何…?」という方は、↓ をどうぞ♪

wp-editor-visual-and-text-20200308_ec
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

ということで編集画面を開いたら、本文欄の…

affinger-blog-card-20200322_2-01

↑ ブログカードを作りたい場所に、まずその「ページID」を普通に入力しましょう

入力したら…

affinger-blog-card-20200322_2-02

↑ そのページIDを、丸ごと選択した状態で…

affinger-blog-card-20200322_2-03

↑ 画面上部の「カード」ボタンをクリックすると…

affinger-blog-card-20200322_2-04

↑ ブログカード用の「ショートコード」が、自動で挿入されます

編集画面だと実感は沸かないですが、これでもう「ブログカード」は完成してます

プレビューで見てみると…

affinger-blog-card-20200323_2-05

↑ こんな感じ

WING(AFFINGER5)」におけるブログカードの基本的な作成手順は、これでOKです🐥

ただ!

こちらのブログカードは、「抜粋文」の表示設定をカスタマイズすることで、例えば…

affinger-blog-card-20200323_2-06

↑ こんなふうに、スッキリしたデザインにすることも可能です

「抜粋文の表示設定」のカスタマイズ方法は、↓ をどうぞ♪

affinger-customize-blog-card-20200323_ec
AFFINGER5で、「ブログカード」の抜粋表示の設定をカスタマイズする手順【WordPressブログ】

続きを見る

今回の「AFFINGER5におけるブログカードの作成手順」は、これで以上となります

お疲れさまでした♪

あずき🐥

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.