AFFINGER5

【AFFINGER5】ブログカードをカスタマイズ設定する方法【ラベルや枠線の色も変更可能です】

AFFINGER5のブログカードをカスタマイズしたいけれど、どこをいじったらいいかわかりません。カスタマイズ方法を教えてください!

悩んでいる人

こんな悩みを解決します。

この記事を書いている人

Twitter(@you_blog2912)を運営中

この記事の内容

ブログカードの表示方法
吹き出しラベルの設定
各カスタマイズ項目の設定
当ブログで使用中のカスタマイズ例

今回は、AFFINGER5のブログカードをカスタマイズする方法を紹介します。

ブログカードは、以下のようなカード型の内部リンクです。

【限定特典付き】AFFINGER5(アフィンガー5)の評判・口コミを徹底解説

続きを見る

デフォルトのブログカード

これを少し工夫すると、以下のようにオシャレにカスタマイズできます。

アフィンガー5ブログカード

カスタマイズ後のブログカード

ブログカードのカスタマイズを網羅的に解説していくので、最後までじっくり読んでみてください。

【AFFINGER5】ブログカードの表示方法

ブログカードは、以下の手順で表示できます。

【AFFINGER5】ブログカードの表示方法

『タグ』→『記事一覧/カード』→『ブログカード』→『参考』

あるいは下の画像の『カード』からでも作ることができます。

【AFFINGER5】ブログカードの表示方法

カードからブログカードを作成できる

僕は「後者の方法」でブログカードを表示しています!

ゆーさく

ラベルの形も変更可能

下のように、ブログカードのラベルを『吹き出し』にすることもできます。

こちらもCHECK

【限定特典付き】AFFINGER5(アフィンガー5)の評判・口コミを徹底解説

表示の仕方は『タグ』→『記事一覧/カード』→『ブログカード』→『CHECK(吹き出し)』です。

【AFFINGER5】ブログカードの表示方法

『タグ』→『記事一覧/カード』→『ブログカード』→『CHECK(吹き出し)』

さきほどと④が違うだけなので、そこまで難しくはないですね。

【AFFINGER5】ブログカードカスタマイズ設定【個別に変更】

ブログカードのカスタマイズは以下のようになっています。

ブログカードのコード

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

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

※表は横にスライドできます

個人的には『id』『label』『readmore』の3つをよく使用します。

例えば、デフォルトから以下のように変えてみると、以下のようになります。

変更する項目入力する言葉
id自分の記事IDを入力
labellabel="関連記事"
readmorereadmore="off"(or 空欄)

『readmore』の項目をOFFにすることで、ブログカードがすっきりした印象になります。

他の項目も必要に応じて変更してみてください!

ゆーさく

【AFFINGER5】ブログカードカスタマイズ設定【すべてに適応】

ブログカード個別で変更できないカスタマイズが2つあります。

ブログカードの設定

その①:ラベルの種類と枠線の太さ
その②:サムネイル画像の大きさ

順番に解説します。

ブログカードの設定①ラベルの種類と枠線の太さ

『ラベルの形』『ブログカードの枠線の太さ』の2つを変更します。

『外観』→『カスタマイズ』→『オプションカラー』→『ブログカード/ラベル』の順番でクリックします。

アフィンガー5ブログカードの設定①
ラベルの種類と枠線の太さ

『外観』→『カスタマイズ』→『オプションカラー』→『ブログカード/ラベル』

『ブログカード/ラベル』の場所では、以下の項目を設定できます。

設定項目説明当ブログの設定
枠線枠線の色#C4C4C4
枠線を太くする枠線を3pxにするチェック
ラベル背景色一括でラベルの背景色を変更#4965B2
ラベルテキスト色一括設定はEX版のみ空欄
ラベルデザインリボン、たすき掛けから選択たすき掛け

※表は横にスライドできます

当ブログの設定も記載しておくので、ぜひ参考にしてみてください。

ブログカードの設定②サムネイル画像の大きさ

『サムネイル画像の大きさ』はAFFINGER5の管理設定から変更できます。

『AFFINGER5管理』→『デザイン』→『サムネイル画像設定』の順番でクリックしてください。

アフィンガー5サムネイル画像の大きさの設定

『AFFINGER5管理』→『デザイン』→『サムネイル画像設定』

この部分では、サムネイル画像の詳細設定が可能でして、僕は上の3ヶ所にチェックを入れています。

いろいろな場所にチェックを入れて、好みのサムネイル設定を模索してみてください!

ゆーさく

まとめ:ブログカードを使っておしゃれなブログを!

今回は、アフィンガー5でブログカードのカスタマイズ設定について紹介しました。

ブログカードは記事の中でも目立ちやすく、『ここぞ!』という場面で使うと効果的です。

この記事を参考に、自分好みのブログカードを作成してみてくださいね。

今回は以上です。

関連記事
【SEO最強ツール】Rank Trackerの価格・料金プランを徹底解説【導入手順あり】

アフィンガー5情報一覧

-AFFINGER5

© 2020 YusakuBlog Powered by AFFINGER5