【アフィンガー５】WordPressブログのボタン作成（コード解説あり)

青いきりん

「ブログのボタンを作りたい！」

そんな要望を応える記事です。

WordPressブログを開設して記事やTOPページを作成していくと、リンクを貼りたくなりますよね。

内部・外部問わず、リンクを貼って流入を促したいところです。

本記事は基本的な流入を促すボタンの作成について記事にしました。

この記事でわかること

参考画像のようなボタン配置の使い方がわかる
ボタンのカスタマイズができる

オーソドックスな内容になりますが、自分のTOPページのボタンデザインを例に解説するとともに、

テーマ(ここではAFFINGER5（アフィンガー５）)で簡単にボタンを作れる方法も紹介していきたいと思います。

【予想設定時間：15分以内】

結論：ボタンはボックスで作成するか備え付けのボタンを使うかが基本

ボタン作成には主に次の２つがあります。

ボタン作成方法

ボックスからボタンを作成する
テーマ備え付けのボタン作成機能を使って作成する（プラグイン含）

私が使用しているテーマ「AFFINGER5（アフィンガー５）」を例に解説していきたいと思います。

テーマ備え付けのボタン作成機能はとても簡単に作成できる点がメリットで手間が省けます。

一方でボックスでボタンを作成するときは、場合によってカスタマイズしやすいところがメリットです。

「AFFINGER5（アフィンガー５）」のボタン作成機能では「あおろぐTOP」のようなボタン間の間隔などの設定が

ボタン機能作成コードに含まれていないため、配置的デザインに困惑します。

一方でボックスでボタンを作る際は細かな設定が可能点が今回の使用することの決定打になりました。

自分がどんなふうにボタンを使いたいかで選ぶとよいでしょう。

ボックスによるボタン作成（実施例：あおろぐTOP）

ボックスでボタンを作成した例で「あおろぐTOPページ（旧）」を参考にします。

ここで注目したいところは、ボタン間の間隔です。

細かな調整が可能なボックスでは様々な調整項目があるので、デザイン等に凝りたい方におすすめです。

それではどんな調整が可能なのか見ていきましょう。

バナー風ボックス

「AFFINGER5（アフィンガー５）」で「タグ」→「ボックスデザイン」→「バナー風ボックス」というボックス作成機能があります。

次のように表示されるものです。

バナー風ボックス

この機能はバナー作成としてはもちろん、リンクを貼ってボタンとしても活用できて、様々な使い方が考えられます。

では実際どんな調整が可能なのでしょうか？

バナー風ボックスコード

[■st-flexbox url="" rel="nofollow" target="" fontawesome="" title="" 
width="360" height="160" color="#fff" fontsize="200" radius="0" shadow="#424242" 
bordercolor="#ccc" borderwidth="1" bgcolor="#ccc" backgroud_image="" blur="on" left="" margin_bottom="0"]

[/st-flexbox]

上記のようなコードなのですが、いろいろ書かれていますよね？

１つずつは次の通りです。

コード	「〇」に入る内容
url="〇"	リンクのURL
rel="〇"	nofollowの指定
target="〇"	リンクを別ウィンドウで開く場合に使用する
fontawesome="〇"	アイコンフォントのクラス名（Font Awesomeのサイトはこちら）
title="〇"	タイトル
width="〇"	ボックスの横幅（％）
height="〇"	ボックスの高さ（px)
color="〇"	タイトルの色（＃）
fontsize="〇"	文字サイズ（％）
radius="〇"	枠線の丸み（％）
shadow="〇"	タイトルの影の色（＃）
bordercolor="〇"	枠線の色（＃）
borderwidth="〇"	枠線の太さ（px)
bgcolor="〇"	背景の色（＃）
backgroud_image="〇"	背景にしたい画像のURL
blur="〇"	ぼかし効果の有無（on/off)
left="〇"	左寄せの可否（on/off)
margin_bottom="〇"	下の余白(px)
[/st-flexbox]の前の空白	テキストやコンテンツの追加場所

「あおろぐTOP（旧）」のようにボタンを作成して配置するなら、「margin_bottom」で間隔を狭めて設定する必要があります。

工夫次第で好みのボタンを作成できます。

是非オリジナルのボタンを作成してみてください！

テーマ備え付けのボタン作成

「AFFINGER5（アフィンガー５）」で「タグ」→「カスタムボタン」というボタン作成機能があります。

ここは簡単にいろいろなボタンを作成可能です。

一気にご紹介します！

１）タグ＞カスタムボタン＞ノーマル

11種類のボタンがあります。

ここでも様々な調整が可能ですが、ボタン間のスキマやボタン自体の高さ調整は即変更できません。

新規で追加があったコードは次のものがあります。

コード	「〇」に入る内容
borderradius="〇"	４つ角の丸み（px px px px）
fontweight="〇"	文字の太さ（normal/bold）
ref="〇"	輝きが動く（on/off）
fontawesome_after="〇"	文字の後ろにアイコンフォントを挿入