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

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

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

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

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

ここではAFFINGER5のボタンの使い方や整理の仕方などお伝えしていきます。

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

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

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

AFFINGER5でいうボタンとは？種類も併せて見ておこう！

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

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

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

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

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

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

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

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

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

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

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

AFFINGER5 のボタンの挿入方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事【AFFINGER6の特典】とガチレビュー！見る人に刺さるWordPressテーマ！

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

AFFINGER5のボタンを必要なものだけ残す方法

AFFINGER5をインストールして投稿ページのテキストを見ると作業する場所が狭くなってしまいつかいづらく感じるかもしれません。

この作業はボタンに限らず自分が使うものだけ残してその他の物を見えないようにすることができます。

テキストエディタで非表示にしたいボタンの設定

テキストエディターの項目を減らして作業場所を広く使えるようにしていきます。まずは自分のブログで使うボタンや枠などを確認しておいてください。

▼　外観　⇒　AFFINGER5管理画面　⇒　投稿・固定ページ　

管理画面

管理画面の部分にはテキストエディタの操作項目を削除できる部分があります。

この部分で、自分が必要ない項目にチェックを入れて「save」をクリックします。削除をすると投稿ページのテキスト画面は以下のようになります。

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

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

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

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

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

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

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

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

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

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

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

基本のコード内の値の内容

• url=”リンク先のURL”
• rel=”nofollow” target=”リンクを別窓で開く”
• fontawesome=”アイコン”
• title=”大きいタイトル”
• width=”横幅”
• height=”高さ”
• color=”タイトルの色”
• fontsize=”文字サイズ”
• radius=”角丸”
• shadow=”タイトルの影”
• bordercolor=”枠線の色”
• borderwidth=”枠線の太さ”
• bgcolor=”背景色”
• backgroud_image=”背景にしたい画像のURL”
• blur=”ぼかしの有無”
• left=”左寄せ”

2.　高さと幅の調整

バナー風ボックスの大きさの設定をします。基本のコード内の「width=”横幅”」と「height=”高さ”」を調整します。

今回は、横幅：300px 高さ：200pxにします。

3.　背景画像の配置

背景画像を配置します。作業はテキストエディターにしてから画像のURLを挿入しないと反映しません。

注意：画像のURLを入れるときはテキストエディターにする。

画像のURLを入れると以下のような画像になります。ぼかしを入れたい時には　「blur=”on”」にします。

画像のURLの探し方

画像のURLは、メディアライブラリーにあります。

4.　ボタンの挿入とリンク追加

このバナー自体にリンクを貼ることもできますが、今回はバナー風ボックスの中に誘導ボタンを挿入していきます。

基本のコードの[/st-flexbox]の前にボタンを通常と同じように導入します。

▼　タグ　⇒　カスタムボタン　⇒　ノーマル　⇒　詳しくはコチラ（レッド）

蛍光色の部分がボタンのコードです。ボタンの誘導先のURLを設置します。

5.　タイトルの色

今回は、薄茶色の色を入れてみようと思います。

• 色番号：#eee8aa

タイトルの色が変わりました。サイズも変更が可能です。

6.　枠線の色と太さ

このバナーの外枠の色と太さの変更も可能です。外枠に赤系の色を入れてみたいと思います。

• 枠の色番号：＃08080
• 枠の太さ：　10

AFFINGER5（アフィンガー5）には、様々なボタンが最初から含まれています。挿入時にHTMLを触らないといけないので初心者のうちは難しい感じもしますが、慣れれば簡単なのでぜひ使ってみてください。

↓　当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント！

関連記事【AFFINGER6の特典】とガチレビュー！見る人に刺さるWordPressテーマ！

初心者だからこそWordpress有料テーマ を使うべき理由