AFFINGER

AFFINGER5 ブログカードのカスタマイズ設定【見た目重視】

WING(AFFINGER5)_アイキャッチ
悩む人
「AFFINGER5(アフィンガー5)」の「ブログカード」ってどうやって出すの?
ブログカードのコード見てもカスタマイズ方法がよくわからない…

こんな悩みに答えます。

本記事では、ブログカード3種類の設置方法・見た目のカスタマイズ方法を全てご紹介します。

レイ
少し工夫すればオシャレなブログカードになりますよ

最終的にはこんな感じにします。

関連記事
AFFINGER5_アイキャッチ
AFFINGER5を使ってみた感想レビュー【他テーマとも比較】

この記事で分かること

  • AFFINGER5 ブログカード3種類の設置方法をご紹介
  • AFFINGER5 ブログカードのカスタマイズ【カード別の設定】
  • AFFINGER5 ブログカードのカスタマイズ【テーマ設定】
  • AFFINGER5 当サイトのブログカード設定【最終形】

AFFINGER5 ブログカード3種類をご紹介

まず、アフィンガーのブログカードには現在3種類まで用意されていまして、それが以下です。

  1. デフォルト
  2. カードスタイル
  3. カードスタイルB

参考までに見た目がどんな感じになるか載せておきます。
※AFFINGER5管理の設定によっては、まったく同じにならないので注意

レイ
アフィンガー推奨のClassic Editorでの説明になります。

①デフォルト
▼「タグ」⇒「記事一覧/カード」⇒「ブログカード」⇒「参考」

▼「タグ」⇒「記事一覧/カード」⇒「ブログカード」⇒「CHECK(ふきだし)」

こちらもCHECK

Coconala(ココナラ)_アイキャッチ
ココナラでアイコンを作成する流れを徹底解説【依頼内容の実例つき】

続きを見る

②カードスタイル
▼「スタイル」⇒「レイアウト」⇒「カードスタイル」

※「タグ」⇒「レイアウト」⇒「PCとTab」⇒「左右50%」を使用。
※「続きを見る」をオフにして、2枚並べています。

③カードスタイルB
▼「スタイル」⇒「レイアウト」⇒「カードスタイルB」

※「タグ」⇒「レイアウト」⇒「PCとTab」⇒「左右50%」を使用。
※「続きを見る」をオフにして、2枚並べています。

PCでご覧の方は、カードスタイルとカードスタイルBは何が違うんだとなると思いますが、スマホ表示にした際の見た目が変わります。
レイ
Windowsの場合、F12を押してから、Ctrl+Shift+Mを同時押しするとスマホ表示にできます

いくつかありますが、結局使うのはデフォルトタイプかなと

Local by FlyWheel
LocalbyFlyWheelの開発サイトを共有する【本番化不要】

続きを見る

これはデフォルトで参考ラベルを消した例です。基本はこれを覚えておけばOK。

AFFINGER5 ブログカードのカスタマイズ【カード別の設定】

ブログカードごとの個別設定は以下です。

オプション 説明
myclass クラス名 ※個別CSSを反映したい時
id 記事idを指定 ※投稿一覧で表示オプション「ID」にチェック
label ラベルの文字列
pc_height PC閲覧時のカードの高さ指定
name 記事タイトル書き換え
bgcolor ラベルの背景色
color ラベルの文字色
fontawesome ラベルのアイコン ※fontawesome4を使用
readmore 続きを読むのON/OFF
thumbnail サムネイルのON/OFF ※EX版のみ有効
type type="text"でラベルがテキストタイプになる

よく使うのは「id」「label」「readmore」でしょうか。

※記事idは▼「投稿」⇒「投稿一覧」⇒右上の表示オプションから「ID」にチェックすると確認できます。

サンプル変更前:


サンプル変更後:
ラベルの文字列
WING(AFFINGER5)_アイキャッチ
記事タイトル書き換え

続きを見る

FontAwesomeでチェックマーク等を表示したい時は、下記の記事が参考になります。

関連記事FontAwesomeの使い方【オシャレなアイコンを表示する】

AFFINGER5 ブログカードのカスタマイズ【テーマ設定】

ブログカードごとの設定では変えられないオプションもあります。

  1. ラベルデザインや枠線の太さ
  2. サムネイルの大きさ

それぞれ設定方法を説明します。

①ラベルデザインや枠線の太さ
▼「外観」⇒「カスタマイズ」⇒「オプションカラー」⇒「ブログカード/ラベル」から変更できます。
※全てのブログカードに反映されるので注意

オプション 説明
枠線 枠線の色
枠線を太くする 枠線を3pxにする
ラベル背景色 個別の背景色がない場合に反映
ラベルテキスト色 個別設定もあるが、一括設定はEX版のみ
ラベルデザイン リボン、たすき掛けから選べる

②サムネイルの大きさ
▼「AFFINGER5 管理」⇒「デザイン」⇒「サムネイル画像設定」から変更できます。
※全てのサムネイルに反映されるので注意

個人的にチェックしておくべき項目を上げておきます(見た目重視)
フルサイズにする
サムネイル画像を大きくする(タブレット以上は1.5倍)

これらは一括でしか変えられず、一部ブログカード以外にも影響するので注意です。

AFFINGER5 当サイトのブログカード設定【最終形】

これと同じにしたいという方向けに設定方法を書いておきます。

関連記事
AFFINGER5_アイキャッチ
AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
オプション 説明
label "関連記事"
fontawesome "fa-check"を指定
readmore "off"
ラベルデザイン リボン
サムネイル画像 フルサイズにする
サムネイル画像を大きくする

※ラベルは「label=""」にすれば消えます。

関連記事AFFINGER5 ヘッダーカードの設定方法&最適な画像サイズ
関連記事AFFINGER5 会話吹き出しの設定方法&アイコンの作り方3選

-AFFINGER
-

© 2021 ReiCodeBlog