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をお伝えしています。

AFFINGER6 EX（上位版）

AFFINGER6

AFFINGER5 のボタンの挿入方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

管理画面

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

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

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

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

ここでは、そのバナー風ボックスの中に目立つようにボタンを設置する方法をお伝えします。こちらも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″]

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

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