ブログカードのコード見てもカスタマイズ方法がよくわからない…
こんな悩みに答えます。
本記事では、ブログカード3種類の設置方法・見た目のカスタマイズ方法を全てご紹介します。
最終的にはこんな感じにします。
-
-
目次
AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
この記事で分かること
- AFFINGER5 ブログカード３種類の設置方法をご紹介
- AFFINGER5 ブログカードのカスタマイズ【カード別の設定】
- AFFINGER5 ブログカードのカスタマイズ【テーマ設定】
- AFFINGER5 当サイトのブログカード設定【最終形】
AFFINGER5 ブログカード３種類をご紹介
まず、アフィンガーのブログカードには現在3種類まで用意されていまして、それが以下です。
- デフォルト
- カードスタイル
- カードスタイルB
参考までに見た目がどんな感じになるか載せておきます。
※AFFINGER5管理の設定によっては、まったく同じにならないので注意
①デフォルト 続きを見る
▼「タグ」⇒「記事一覧/カード」⇒「ブログカード」⇒「参考」
WordPressおすすめプラグインは5個だけです【減らすべき】
▼「タグ」⇒「記事一覧/カード」⇒「ブログカード」⇒「CHECK（ふきだし）」
こちらもCHECK
-
-
ココナラでアイコンを作成する流れを徹底解説【依頼内容の実例つき】
続きを見る
②カードスタイル
▼「スタイル」⇒「レイアウト」⇒「カードスタイル」
※「タグ」⇒「レイアウト」⇒「PCとTab」⇒「左右50%」を使用。
※「続きを見る」をオフにして、2枚並べています。
③カードスタイルB
▼「スタイル」⇒「レイアウト」⇒「カードスタイルB」
※「タグ」⇒「レイアウト」⇒「PCとTab」⇒「左右50%」を使用。
※「続きを見る」をオフにして、2枚並べています。
いくつかありますが、結局使うのはデフォルトタイプかなと
-
-
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」にチェックすると確認できます。
サンプル変更前： 続きを見る 続きを見る
AFFINGER5 目次の作り方3パターン【簡単に無料で作る】
サンプル変更後：
記事タイトル書き換え
FontAwesomeでチェックマーク等を表示したい時は、下記の記事が参考になります。
関連記事FontAwesomeの使い方【オシャレなアイコンを表示する】
AFFINGER5 ブログカードのカスタマイズ【テーマ設定】
ブログカードごとの設定では変えられないオプションもあります。
- ラベルデザインや枠線の太さ
- サムネイルの大きさ
それぞれ設定方法を説明します。
①ラベルデザインや枠線の太さ
▼「外観」⇒「カスタマイズ」⇒「オプションカラー」⇒「ブログカード／ラベル」から変更できます。
※全てのブログカードに反映されるので注意
| オプション | 説明 |
| 枠線 | 枠線の色 |
| 枠線を太くする | 枠線を3pxにする |
| ラベル背景色 | 個別の背景色がない場合に反映 |
| ラベルテキスト色 | 個別設定もあるが、一括設定はEX版のみ |
| ラベルデザイン | リボン、たすき掛けから選べる |
②サムネイルの大きさ
▼「AFFINGER5 管理」⇒「デザイン」⇒「サムネイル画像設定」から変更できます。
※全てのサムネイルに反映されるので注意
個人的にチェックしておくべき項目を上げておきます（見た目重視）
フルサイズにする
サムネイル画像を大きくする（タブレット以上は1.5倍）
これらは一括でしか変えられず、一部ブログカード以外にも影響するので注意です。
AFFINGER5 当サイトのブログカード設定【最終形】
これと同じにしたいという方向けに設定方法を書いておきます。
-
-
AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
| オプション | 説明 |
| label | "関連記事" |
| fontawesome | "fa-check"を指定 |
| readmore | "off" |
| ラベルデザイン | リボン |
| サムネイル画像 | フルサイズにする サムネイル画像を大きくする |
※ラベルは「label=""」にすれば消えます。
関連記事AFFINGER5 ヘッダーカードの設定方法＆最適な画像サイズ
関連記事AFFINGER5 会話吹き出しの設定方法＆アイコンの作り方３選
