AFFINGER6のボタンの設置のやり方まとめ！不要なアイコンを整理する方法も！

こんにちは！ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6は、パーツの種類が豊富です。ボタンについても普通の四角いボタンや角が丸いもの、さらにキラリと光るボタンなどもありいろんなシーンで使えます。

ただし、種類が多すぎるので全部使ってしまうと記事がゴチャゴチャして見づらくなるので、2種類ぐらいに絞って使うと見やすくなります。

ボタンが豊富なのでたくさん使いたくなりますが、ブログの統一感を出すために2～3個いつも使うものを決めておいた方が良いでしょう。

ここではAFFINGER6のボタンの使い方や整理の仕方など動画も含めてお伝えしていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

1 AFFINGER6でいうボタンとは？
2 【動画】AFFINGER6のボタンの配置とカスタマイズ
3 AFFINGER6のボタンの種類
4 AFFINGER6 のボタンの挿入方法
- 4.1 もっと詳しくボタン（ピンク）の挿入方法
5 AFFINGER6（アフィンガー）のボタンのリンクを貼る方法
- 5.1 ボタンAとボタンBのリンクの貼り方
6 AFFINGER6のウィジェットボタンの調整
- 6.1 色をあらかじめ設定しておきたい時
7 AFFINGER6のお問い合わせボタンの調整
- 7.1 色をあらかじめ設定しておきたい時
8 AFFINGER6のバナー風ボックスにボタンを設置する
9 初心者だからこそWordpress有料テーマを使うべき理由
- 9.1 Wordpressの有料テーマができる５つのこと

AFFINGER6でいうボタンとは？

おそらくAFFINGER6（アフィンガー）を使っていて迷うのは、種類が多すぎて最初見るとよく似た名前なのでわかりづらくなり混同してしまうことです。

例えば、一般的なボタン以外にも記事を読んでいくとそっと出てくる「戻る」もマニュアルではボタンと表現している部分もありますので、最初見ると少しわかりづらいです。

ここでは記事の装飾として使うボタンを説明していきます。

【動画】AFFINGER6のボタンの配置とカスタマイズ

この動画では、AFFINGER6のボタンの作り方全般の解説をしています。配置したけど色の変更がわからないとか、ちょっとした小技などもこの動画でわかります。

00:00　オープニング
00:13　ボタンの挿入方法
00:45　ボタンの色変更
01:24　ボタン下半分の色変更
01:54　ボタン上半部の色変更
02:15 枠と影部分の色変更
02:32　オリジナルボタン
03:19 問い合わせボタン
03:58　色設定

AFFINGER6は、可愛いパーツが多いですが、若干操作でてこずる場合があります。ひとつひとつ設定していけばできますので、動画を参考に作ってみて下さいね。

AFFINGER6のボタンの種類

ボタンを挿入するには、投稿ページのタグからできます。大きくは「ノーマル」「ミニ」「MCボタン」「ボックスメニュー」「ボタンA」「ボタンB」と分かれていてさらに細かく分かれています。

ノーマル
ミニ
MCボタン
ボックスメニュー
ボタンA
ボタンB

ボタンをすべて使うとチグハグになるので必要なボタンをある程度決めておくほうが良いでしょう。

AFFINGER6のボタンが使いやすいのは、高さのあるものから細いものなど「色」「形」「幅」「タイトル」等細分化されていることでどんなジャンルでも合わせやすくなるのが特徴です。

アフィリエイトへの誘導ボタンがキラリンと光るのも、このAFFINGER6で作ることができます。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

AFFINGER6 EX（上位版）

AFFINGER6

AFFINGER6 のボタンの挿入方法

ボタンの挿入はとても簡単です。どんなボタンがあるのか上記の表で確認していただいた上で自分が好きなものを選びます。

もっと詳しくボタン（ピンク）の挿入方法

オーバル型のこのボタンですが、色がポップ系なのでとても使いやすいです。「もっと詳しく」ボタンは、ノーマルの中にあります。

▼　投稿ページ　⇒　タグ　⇒　ノーマル　⇒　もっと詳しく（ピンク）

クリックするだけで以下のように挿入できます。

ビジュアル画面でもこのように出ますので、全体的にわかりづらいですが、プレビューで見るときちんとボタンの形がでています。

AFFINGER6（アフィンガー）のボタンのリンクを貼る方法

ボタンを挿入した後には、そのボタンをどんなページに誘導するのか設定をしなければいけませんのでボタンにリンクを貼ります。

AFFINGER6の場合には、ビジュアルエディターに以下のようなHTMLが出てきます。リンクを貼るには手作業でURLを挿入してください。

url=”#”　の部分に誘導するURLを挿入し「＃」を消します。

ボタンAとボタンBのリンクの貼り方

ボタンAとボタンBの設定の仕方は同じです。投稿ページにはボタンの形で出てきますので、通常通りに設置していきます。

ボタンAを挿入すると上のように出てきます。このボタンの上で右クリックをするとリンクを貼る部分が出てきます。

枠内に誘導したいURLを入力し適用ボタンをクリックするとリンクが貼れます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」

⇒AFFINGER6（アフィンガー）の公式ページを確認する
※今なら、5大購入特典をお付けしています！

記事を取得できませんでした。記事IDをご確認ください。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6のウィジェットボタンの調整

AFFINGER6には、いろんな位置に配置するためのウィジェットボタンがあります。なにかに誘導するボタンをトップページの上部や、サイドバー、フッターに配置することができます。

▼　外観　⇒　ウィジェット

ウィジェットの左側に、「06_STINGERオリジナルボタン」というものがありますので、右側の配置したい場所にドラッグ＆ドロップします。

タイトル
URL

2点を入力し、保存をクリック。

色はここで設定可能です。

色をあらかじめ設定しておきたい時

ブログのテーマカラーがあったり、好きな色を設定しておきたい場合にはカスタマイザーで設定しておくことも可能です。

▼　外観　⇒　カスタマイズ　⇒　オプション（その他）　⇒　オリジナルボタン（ウィジェット）

カラーパレットがありますので、色を設定します。

AFFINGER6のお問い合わせボタンの調整

お問あわせボタンもウィジェットで行います。手順はオリジナルボタンと同じです。

▼　外観　⇒　ウィジェット

左側の「06_STINGERオリジナルボタン」を右の場所の部分にドラッグ＆ドロップします。

タイトルとURLを入力し保存をクリックします。

色をあらかじめ設定しておきたい時

好きな色などこだわりのある方はあらかじめ設定しておくことができます。

▼　外観　⇒　カスタマイズ　⇒　オプション（その他）　⇒　問い合わせボタン（ウィジェット）

カラーパレットで色を設定します。

AFFINGER6のバナー風ボックスにボタンを設置する

AFFINGER6（アフィンガー）にある機能のひとつにバナー風ボックスの作成ができることがあります。

ここでは、そのバナー風ボックスの中に目立つようにボタンを設置する方法をお伝えします。こちらもHTMLに手作業で入力していきますので順を追って説明します。

バナー風ボックスを作る手順

バナー風ボックスのコードを配置
高さと幅の調整
背景画像の配置
ボタンの挿入とリンク追加
タイトルの色
枠線の色と太さ

　訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

1.　バナー風ボックスのコードを配置

まずは基本となるコードを配置します。

▼　タグ　⇒　バナー風ボックス　⇒　基本

基本をクリックすると以下のようなコードが入ります。

↓　プレビューの画像（基本の画像）

ここから、調整をしていきます。

全体的に、コード内に手作業で値を入れていけば完了します。

基本のコード

[st-flexbox url=”” rel=“nofollow” target=”” fontawesome=”” title=”タイトル” width=”” height=”” color=”#fff” fontsize=”200″ radius=”0″ shadow=”#424242″ bordercolor=”#ccc” borderwidth=”1″ bgcolor=”#ccc” backgroud_image=”” blur=”on” left=”” margin_bottom=”0″]

最初は手作業なので、難しく感じますが、ひとつひとつ押さえていけばできますので安心してください。

試しに入力しながら調整をしていくとどこに何があるのかわかりやすいです。