【ブログ時短】アフィンガー6記事装飾を図解入りで解説（カスタムボタン編）

悩む

アフィンガー6のタグ機能について詳しく教えてほしいです....
時間も限られているので自分にピッタリな機能をいち早く見つけたいです！

時間は有限ですもんね。この記事では装飾（カスタムボタン）について一目でわかるように図解入りで解説しています。記事作成の情報として参考にしてください。

rikuパパ

ブログ初心者の皆さんに多い悩みかもしれません。
この記事ではそんな悩みを解決します。

本記事の内容

タグ機能の「カスタムボタン」の呼び出し方が分かる
実際のプレビューが画像付きで分かる
カスタムボタンの中からお気に入りを見つけられる

僕はドキドキしながら、ブログを始めた2年前、アフィンガーも購入して「いざ！ブログを書こう！」とテンションで模索しましたが、自分の欲しい答えがなかなか見つからず…

そんなブログ初心者の方のお役に立てれば。という思いで、アフィンガーの使い方の記事を書きました。

この記事でそんなアフィンガー迷子の方が一歩前に進められるきっかけになれば幸いです。

カスタムボタン→ノーマル

カスタムボタンの「ノーマル」について図解入りで解説します。

▲【カスタムボタン→ノーマル】の呼び出し方▲

ここからは呼び出し方は省略しますが、「ノーマル内」からお気に入りを見つけてください！

テキスト修正は可能です。ご自身のブログテーマや目的に合わせてカスタマイズできますよ！

rikuパパ

基本

詳しくはコチラ(ここでテキストを修正できます)

▲【基本】実際のプレビュー▲

詳しくはコチラ（オレンジ、グリーン、レッド、ブルー）

各色のプレビューを見てみましょう。

詳しくはコチラ(ここでテキストを修正できます)

▲【詳しくはコチラ（オレンジ）】実際のプレビュー▲

詳しくはコチラ(ここでテキストを修正できます)

▲【詳しくはコチラ（レッド）】実際のプレビュー▲

詳しくはコチラ(ここでテキストを修正できます)

▲【詳しくはコチラ（グリーン）】実際のプレビュー▲

詳しくはコチラ(ここでテキストを修正できます)

▲【詳しくはコチラ（ブルー）】実際のプレビュー▲

お問合せ

お問合せのプレビューを見てみましょう。

テキストはもちろんのこと、色味も変更できますので、ブログのテーマカラーに合わせて修正可能ですよ！

rikuパパ

お問合せ（ここでテキストを修正できます）

▲【お問合せ】実際のプレビュー▲

rikuパパがマスタマイズしてみました。
色味とテキストを修正してみました。

管理人にメールする

▲カスタマイズ【お問合せ】実際のプレビュー▲

カスタムしたサンプル用のソースコードです。
実際に挿入するとサンプルと同じように表示されます。

 html
[st-mybutton url="https://kzai-ww-lifestyle.com/contact-form/" title="管理人にメールする" rel="" webicon="st-svg-envelope" target="_blank" color="#fff" bgcolor="#ff93c9" bgcolor_top="#ffb2d8" bordercolor="#ffc6e2" borderwidth="" borderradius="20" fontsize="200" fontweight="" width="90" webicon_after=""" shadow="#ff7fbf" ref="" beacon=""]

▲カスタマイズ用コード▲

カスタマイズ用に作成したコードの意味も解説します。

コード	意味	カスタマイズ例（修正なしの項目は空欄）
st-mybutton url="https://xxxxxxx"	問い合わせ先のURLを張り付ける（任意のページでも可）	st-mybutton url="https://kzai-ww-lifestyle.com/contact-form/"
title="xxxxxx"	タイトル	title="管理人にメールする"
rel="xxxxx"	リンクに「nofollow」を付与することができます
target="xxxxx"	リンク先を「新しいタブで開く」かどうかの設定（空欄：開かない、"_blank"：新しいタブで開く）	target="_blank"
color="xxxxxx"	タイトルとロゴの色指定
bgcolor="xxxxx"	背景の下半分の色指定	bgcolor="#ff93c9"
bgcolor_top="xxxxx"	背景の上半分の色指定	bgcolor_top="#ffb2d8"
bordercolor="xxxxx"	枠線の色指定	bordercolor="#ffc6e2"
borderwidth="xx"	枠線の太さ指定　※「px」の単位で入力
borderradius="xx"	枠の四隅の丸み指定　※数値が大きいほど丸くなる	borderradius="20"
fontsize="xx"	タイトルのフォントサイズ指定　（%で数値のみ表記）	fontsize="200"
width="xx"	横幅サイズを指定　（%で数値のみ表記）
webicon_after="""	タイトルの右側（末尾に）アイコンを表示する
shadow="xxxxx"	動く影の色指定	shadow="#ff7fbf"
ref="xx"	カスタムボタンが光る演出を指定（on/空欄にて）	ref=""