アフィンガーでブログカードのデザインをカスタマイズする方法

悩む人

お洒落なデザインのブログカードをよく見かけますが、ブログカードをカスタマイズする方法が分かりません。

そんな悩みに答えます。

答える人

アフィンガーでブログカードをデフォルトの状態で設置した場合，下の画像のようにシンプルであまり目立ちません。

このブログカードは，好みのデザインにカスタマイズすることが出来ます。

今回は、アフィンガーでブログカードのデザインをカスタマイズする方法を紹介します。

今回の紹介する手順でカスタマイズした場合，ブログカードのデザインが下の画像のようになります。

また，ブログカードを設定する方法については，

アフィンガーでブログカードを設定する方法【超簡単】

で解説していますので，参考にしてください。

今回紹介するブログカードのカスタマイズ方法は以下の3つです。

それでは順に解説していきます。

AFFINGER5管理デザインでのカスタマイズ

AFFINGER5管理デザインでのカスタマイズ方法です。

管理画面から「AFFINGER5管理」をクリックします。

「デザイン」をクリックします。

ブログカードについては，「サムネイル画像設定」と「抜粋設定」になります。

サムネイル画像設定で，任意の設定をしてください。

今回当ブログでは

にしています。

次のようなデザインになります。

抜粋設定で任意の設定をしてください。

当ブログでは

にしています。

次のようなデザインになります。

ブログカード/ラベルのカスタマイズ

「ブログカード / ラベルのカスタマイズ」は，カスタマイズ画面で設定します。

管理画面から「外観」→「カスタマイズ」をクリックします。

「[+]オプションカラー」をクリックします。

「ブログカード / ラベル」をクリックします。

ここでは

を指定できますので，好みのデザインに設定しましょう。

今回，当ブログでは以下のように指定しています。

枠線

#0000ff

枠線を太くする （3px）

チェックをいれる

ラベル背景色

#ffc800

ラベルテキスト色　（EXのみ）

指定なし

ラベルデザイン

リボンデザイン

設定が完了したら「公開」をクリックします。

次のようなデザインになります。

追加CSSでのカスタマイズ

追加CSSでブログカードのデザインをカスタマイズする方法を紹介します。

今回は，ラベルテキストの影と大きさを設定しています。

管理画面から「外観」→「カスタマイズ」→「追加CSS」をクリックします。

CSSを入力する箇所に，

.kanren .st-cardbox-label-text {

text-shadow: 0 0 5px #555;

font-size: 14px;

}

というコードを入力します。

「公開」をクリックします。

次のようなデザインになります。

アフィンガーでブログカードのデザインをカスタマイズする方法まとめ

悩んでいた人

ブログカードをカスタマイズする方法がわかりました。

自分の好みのデザインにしていこうと思います。

はい。

ブログカードをうまくカスタマイズしていってたくさんクリックしてもらえるようなリンクを目指してください。

答える人

今回は以上になります。

それではまた！