AFFINGER

【AFFINGER5】アフィンガー5で「ブログカード」を作成する方法

 

解決したい悩み

アフィンガー5で、オシャレなブログカードを作りたいんだけど、やり方を詳しく教えて欲しい。

 

このような悩みを、記事では解決していきます。

 

アフィンガーでは、内部リンク先を、下記のようなオシャレなブログカードにすることができます。

WordPressブログを初心者でも【10分で完了】できる「クイックスタート」の始め方解説

続きを見る

 

やり方もとても簡単で、手順はこんな感じです。

  1. 「カード」ボタンでショートコードを入力
  2. 記事の「ID」を調べる
  3. ショートコードに「ID」を入力

 

たったこれだけで、ブログカードが簡単に作成できます。

 

その他に、ブログカードの編集方法なども合わせて、画像付きで詳しくやり方を説明していきます。

 

アフィンガーで「ブログカード」の作り方

 

初めに、ブログカードを挿入する場合、記事の編集モードは「テキスト」ではなく、「ビジュアル」でおこないます。

 

 

ブログカード用の「ショートコード」を貼り付ける

 

記事の投稿画面に、「カード」というボタンがあるので、クリックすると、ブログカード用の「ショートコード」が自動で記入されます。

 

 

もし、「カード」がないという場合は、「ツールバーの切り替え」をクリックすることで表示されます。

 

 

「ショートコード」が記入されたら、あとは「id=""」という部分に、ブログカードにしたい「記事ID」を入力するだけです。

 

 

例えば、IDが「617」の記事をブログカードにしたいなら、「id="617"」と数字を入力するだけ。

 

記事IDの調べ方も簡単です。

 

記事IDの調べ方

 

記事IDの調べ方は2種類あります。

  • 投稿一覧から調べる
  • URLから調べる

 

投稿一覧から調べる方法

記事の投稿一覧を開くと、それぞれの記事IDを確認することができます。

 

 

URLから調べる方法

記事の編集ページの、アドレスバーに表示されているURLに、「post=〇〇」という箇所ががるので、〇〇の数字が記事の「ID」です。

 

 

もしくは、投稿一覧ページで、「記事タイトル」にカーソルを合わせると、下にURLが表示されるので、そこでも確認は可能です。

 

 

各コードの解説

 

ブログカードのショートコードでは、「英語=""」と繰り返し記入されていて、それぞれの「英語=""」部分に、指定の数字や文字を入れることで、カスタマイズが可能です。

 

[ st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore="on" thumbnail="on" type="" ]

 

以下が、それぞれの意味になります。(サムネイルに関する「Thumbnail」は、「AFFINGER5 EX」の限定機能となります。)

id 投稿又は固定記事ID
color ラベルの文字色をHTMLカラーコードで変更
bgcolor ラベルの背景色をHTMLカラーコードで変更
label ラベルに入れる文字
name 記事タイトルの変更
fontawesome 表示するフォントアイコン(fontawesome4のクラス名を指定)
pc_height PC閲覧時のカードの高さを指定
readmore 「続きを見る」ボタンの表示・非表示(例:readmore="off")
type ラベルタイプの変更(例: type="text")
thumbnail サムネイル画像の有無。(例:thumbnail="off")

 

ブログカードの文字数を変更

 

ブログカードに表示される、「抜粋文字数」を変更することも可能です。

 

変更したい場合は、WordPressのダッシュボードから、「AFFINGER5 管理」→「デザイン」→「抜粋設定」をクリック。

 

「抜粋の文字数」を変更することで、表示される文字数を調整できます。

 

 

また、PC、スマホ、それぞれの抜粋文字を「表示・非表示」にする設定も可能なので、好みの設定にしてみましょう。

 

まとめ

 

アフィンガーでは、ブログカードが簡単に作成できるうえに、カスタマイズも可能です。

 

カスタマイズが苦手という方は、IDを入力するだけでも、オシャレなブログカードを作成できますので、ぜひ利用してみてください。

 

  • この記事を書いた人

ヤマト

GoogleアナリティクスのGAIQ認定資格者。webマーケティングを得意としています。読書が生きがい。札幌在住。どこよりもわかりやすさを追求して記事を書いています。

-AFFINGER

Copyright © アフィリデザイン , All Rights Reserved.