WordPress

AFFINGER6でブログカードを作るやり方

2021-10-05

困ってる人

今までテキストリンクで記事に飛んでもらっていたけど、みんなが表示しているブログガードを作ってみたいんだけど?

AFFINGER6でどうしたら作れるの?

そうですね。

テキストリンクもシンプルで綺麗なので好きですが、あまり目立たないのがデメリットですよね。

例:Googleへはこちらからどうぞ

そこで、簡単で目立つ「ブログカード」を使用するとユーザーさんへの誘導につながるので効果的です。

それでは「いってみよう~」

AFFINGER6でブログカードを作るやり方

K

ブログカードを作る手順は以下の3つの手順で作る事ができます。

  • ご自身の記事IDを確認する
  • 投稿記事内ブロックでクラシックを選択
  • カードを選択してブログカードコードを表示して記事IDを入力

ご自身の記事IDを確認

記事IDを確認

サムネイル右のID「記事ID」となりますので、表示したい記事IDをメモしておいてください。

ここでは例として一番上の「271」をブログカードで表示したいと思います。

投稿記事内ブロックでクラシックを選択

ブロックのクラシックを選択

カードを選択してブログカードコードを表示して記事IDを入力

クラシックブロックのカードをクリックしてください。

カードをクリックすると「赤枠内のコード」が表示されます。

ブログカードのコード

st-card myclass="" id="271" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""

コード内id= "記事ID" をいれて下さい。特にこだわらない場合はコードをいれて終了です。

出来上がりがこちら↓

ACTION(AFFINGER6)でFontAwesome5(ver5.9以降)を使えるようにする

そうですね。 AFFINGER6 からFontAwesome 5へ正式対応となったんですが少し設定が必要となります。 その設定方法をご紹介いたします。それでは「いってみよう~」 FontAwesome ...

続きを見る

いかがしたでしょうか?一度作ってしまえば覚えてしまいますのでご活用下さい。

K

ブログカードをもう少し目立たせる方法

K

先ほの手順で制作したデフォルトのブログカードでも十分ですが、もうすこし目立たせる方法をご紹介します。

まずはコードの説明から

ブログカードのコード

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

設定項目 説明
myclassクラス名 ※個別CSSを反映したい場合
id基本(デフォルト)投稿一覧で「ID」をメモして記事IDを指定
labelラベルに表記したい文字を入力
pc_heightPC閲覧時のカードの高さ指定
name記事タイトル書き換え
bgcolorラベルの背景色 例)#ff0000など
colorラベルの文字色  例)#ff0000など
fontawesomeラベルのアイコン ※fontawesomeを使用
readmore「続きを読む」の表示on/off
thumbnailサムネイルのon/off ※AFFINGER6EX版のみ有効
typetype="text"でラベルがテキストタイプになる

それでは先程のデフォルトブログカードから「 label 」「 readmore 」を変更してみます。

ブログカードのコード

st-card myclass="" id="271" label="おすすめ" pc_height="" name="" bgcolor="" color="" webicon="" readmore="off" thumbnail="on" type=""

おすすめ
ACTION(AFFINGER6)でFontAwesome5(ver5.9以降)を使えるようにする

そうですね。 AFFINGER6 からFontAwesome 5へ正式対応となったんですが少し設定が必要となります。 その設定方法をご紹介いたします。それでは「いってみよう~」 FontAwesome ...

いかがでしたでしょうか?

まだまだ変更できる箇所がありますので、ご自身の好みで調整して「効果的」なブログカードを作ってみてください。

Thank you for reading to the end!

WordPressテーマ 「今すぐ入手!ACTION(AFFINGER6)」
  • この記事を書いた人

K

ご覧いただき有り難うございます。ブロガーの「K」です。現在はアパレルの生産管理を主にグラフィック・DTPデザイナー・自社WEB管理と幅広くお仕事させていただいております。 WEB関連を中心にガジェットやPC関連・趣味のスキューバダイビングなどこのブログで発信。

-WordPress
-,