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

青いきりん
「ブログのボタンを作りたい!」

 

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

 

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

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

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

 

この記事でわかること

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

 

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

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

 

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

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

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

 

ボタン作成方法

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

 

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

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

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

 

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

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

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

 

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

 

ボックスによるボタン作成(実施例:あおろぐTOP)

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

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

 

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

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

 

バナー風ボックス

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

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

 

バナー風ボックス

 

 

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

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

 

バナー風ボックスコード

[■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]

 

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

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

 

コード 「〇」に入る内容
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(アフィンガー5)」で「タグ」→「カスタムボタン」というボタン作成機能があります。

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

一気にご紹介します!

 

1)タグ > カスタムボタン > ノーマル

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

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

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

 

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

 

ボタン

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

お問合せ

もっと詳しく

もっと詳しく

もっと詳しく

人気ランキング

ランキングはコチラ

 

2)タグ > カスタムボタン > 角丸

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

ノーマルと同じぐらいの調整しろです。

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

 

3)タグ > カスタムボタン > ミニ

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

上記と同じような調整しろです。

 

ボタン

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

 

4)タグ > カスタムボタン > MCボタン

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

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

 

5)タグ > カスタムボタン > ボックスメニュー

変わったボタン配置です。

■ 基本(4列)■

■ サブあり(4列)■

■ 縦並びタイプ ■

■ 縦並びタイプ(サブあり)■

■ 縦並びタイプ(単品)■

 

6)タグ > カスタムボタン > ボタンA・ボタンB

このボタンは、自身のAFFINGER5(アフィンガー5)の設定によって変わってきます。

 

 

まとめ

いかがだったでしょうか?

おさらいをしますと、ボタン作成には主に次の2つがあります。

 

ボタン作成方法

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

 

それぞれ自分に合ったボタンを作成するように一度振り返ってみてください。

自分のブログにはどんなボタンなのか、どう配置したいか、など要件によって好きな機能を選択してみてください。

是非、ユーザを引き寄せるボタンを作成してみてくださいね!

 

  • B!