AFFINGER5（アフィンガー5） のボタンの設置のやり方！不要なアイコンを整理する方法も！

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

AFFINGER5には、他のテーマではないブロガー好みの機能があるのですが、多機能な分たくさんありすぎて何を使うか迷います。

ボタンもそうで、驚くほど多いですがある程度ブログに合わせてつかわないとゴチャゴチャする場合があります。

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

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

⇒AFFINGER5（WING）の公式ページを確認する。

※今なら、4大購入特典をお付けしています！

【AFFINGER5（アフィンガー5）のテーマ評判】実際に使ってみた感想と口コミ。【WordPressテンプレート】

2020.03.27

AFFINGER5（アフィンガー5） でいうボタンとは？

おそらくAFFINGER5（アフィンガー5） を使っていて迷うのは、同じ言葉が使われていることだと思います。

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

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

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

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

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

速報！
AFFINGER5の特典として芸大卒のなつが作ったオリジナルトップページの作り方の記事閲覧パスワードが追加されました！

⇒　詳しくはこの記事をご覧ください。

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

⇒AFFINGER5（WING）の公式ページを確認する

※今なら、4大購入特典をお付けしています！

AFFINGER5（アフィンガー5）の購入特典！見る人に刺さるテンプレート！【WordPressテーマ】

2020.03.24

AFFINGER5（アフィンガー5） のボタンの挿入方法

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

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

「もっと詳しく」ボタンは、ノーマルの中にあります。

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

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

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

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

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

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

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

拡大図

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

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

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

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

AFFINGER5（アフィンガー5） のボタンを必要なものだけ残す方法

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

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

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

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

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

管理画面

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

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

AFFINGER5（アフィンガー5）のバナー風ボックスにボタンを設置する

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）には、様々なボタンが最初から含まれています。さらにそのボタンをいろんな場所で使えるのでぜひ利用してみてください。

↓　このブログから人気のAFFINGER5（WING）を購入くださった方に特典をプレゼントしています。

AFFINGER5（アフィンガー5）の購入特典！見る人に刺さるテンプレート！【WordPressテーマ】

2020.03.24

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