WORDPRESS

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まずACTION AFFINGER6における「カスタムボタン」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-01

このように、「ボタン型」のリンクデザイン(リンクボタンと言います)で作成できる機能です

「お申し込みページ」へのリンクとかでよく見るデザインだね!
 

この「カスタムボタン」は、クリック1つで作成できる「テンプレート」だけでも…

  • ノーマル → 11種類
  • 角丸 → 5種類
  • ミニ → 5種類
  • MCボタン → 4種類
    ※MCは、ボタンの下に表示される「マイクロコピー」の略(例:お申し込みはカンタン5分!)
  • ボックスメニュー → 5種類
  • ボタンA
    ※ランキング用
  • ボタンB
    ※ランキング用

と極めてバリエーションが豊富なのに加えて、それらのテンプレートをもとに…

  • ボタンタイトル(例:詳しくはコチラ!)の名称や、フォントサイズ
  • ボタンの背景色や、枠線色・影の色
  • ボタンの横幅サイズや、枠線の幅サイズ
  • ボタンの演出や、Webアイコンの種類

など、ボタンごとで個別にカスタマイズできるという ”二段構え” の仕様になっています

お気に入りな組み合わせを一度作っちゃえば、あとは毎回「完成済みのショートコードを貼りつけるだけ」だから簡単だよ!
 

カスタマイズ例 ↓

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-a

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-b

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 top-02-c

 

そんなACTION AFFINGER6における「カスタムボタン」について、3つのステップで丁寧に解説していきます🐥

  1. 「カスタムボタン」の作り方
  2. 「カスタムボタン」のカスタマイズ方法
  3. 「カスタムボタン」のカスタマイズ例
ということで、さっそく見ていこー!
 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

第1位

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例を初心者向けに解説【ACTION/WordPressブログ】

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressクラシックエディタとグーテンベルグとは?【プラグイン「Classic Editor」の導入方法まで】
WordPressクラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法まで】

続きを見る

 

ステップ1:ACTION AFFINGER6「カスタムボタン(リンクボタン)」の作り方

WordPress ヘッダー b-01

WordPress管理画面から「投稿」もしくは「固定ページ」の編集画面を開いたら、まずは「カスタムボタン」を挿入したい箇所に…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-01-a

↑ カーソル( | )を設置した状態で、画面上部の「タグ」をクリックします

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK!
 
 

「タグ」をクリックしたら、そのなかから…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-01-b

↑「カスタムボタン」を開き、さらにそのなかから任意のデザインパターンを開きましょう

ここでは例として、「ノーマル」を開いてみるよ!
 

すると、各種デザインパターンごとで用意されている…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-01-c

↑ テンプレートが表示されるので、使用したい任意のテンプレートを選択します

例として、「詳しくはコチラ(オレンジ)」を選んでみるよ!
 

いずれかのテンプレートを選択すると…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-02

↑ 専用の「ショートコード」が本文欄に貼り付けられるので、このコード内の先頭部分にある…

st-mybutton url="#"

のなかの # にあたる場所に、ボタンのリンク先となる任意の「ページURL」をそのまま貼り付ければOK(例 st-mybutton url="https://●●●●●.com/~~~~~/" )

最初から入ってる # は消して、URLを貼りつけよう!
 

プレビュー画面で確認してみると…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-03

↑ このようなカスタムボタンができました🐥

 

ちなみにそのほかのデザインパターンは、それぞれ次の通りとなります ↓

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-1-04

上から順に、デザインパターンは下記の通りだよ!
  • ノーマル
  • 角丸
  • ミニ
  • MCボタン
    ※MCは、ボタンの下に表示される「マイクロコピー」の略(例:お申し込みはカンタン5分!)
  • ボックスメニュー

つづいて、これらの各種ボタンデザインを【カスタマイズ】していきましょう🐥

 

ステップ2:ACTION AFFINGER6「カスタムボタン(リンクボタン)」のカスタマイズ方法

WordPress ヘッダー b-02

まずは【ステップ1】でご紹介した…

タグ > カスタムボタン > 任意のデザインパターン(例:ノーマル)

という手順で…

カスタムボタンのテンプレート(例:詳しくはコチラ(オレンジ))

を1つ(どれでもOK!)選んだら、貼り付けられた…

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-2-01

↑ こちらの「ショートコード」を、任意の内容にカスタマイズしていきます(編集エディタは、引き続き「ビジュアル」のままで大丈夫です)

左から順に見ていくよ!
 

st-mybutton url=""

st-mybutton url=""

さきほどの【ステップ1】でもご紹介した通り、リンク先として設定したい任意の「ページURL」を貼り付けます(例 st-mybutton url="https://●●●●●.com/~~~~~/" )

最初から入ってる # は消しちゃってOK!
 

title=""

title=""

カスタムボタンに表示される「タイトル名」を指定することができます(例 title="お申し込みはこちら!" )

 

rel=""

rel=""

リンクに「nofollow」を付与することができます(例 rel="nofollow" )

付与したい場合だけ、 nofollow と入力しよう!
 
 

webicon=""

webicon=""

タイトル名の左側に表示される「アイコン」を指定することができます

 

具体的には、画面上部の タグ > ショートコード補助 を開いたなかにある…

Webアイコン(クラス)

というところを開くと、「Webアイコン」のバリエーションが一覧表示されるので、そのなかから任意のWebアイコンを選択しましょう(例:電球)

 

使用したいWebアイコンを選択すると…

そのアイコン専用のコード(例 st-svg-lightbulb-o )

が本文欄に貼り付けられるので、このコードを webicon="●●●●●" の ●●●●● にあたる部分へ貼り付ければOKです(例 webicon="st-svg-lightbulb-o" )

アイコンをつけたくない場合は「空欄」にしておけばOKだよ!
 

target=""

target=""

カスタムボタンのリンク先を「新しいタブで開く設定」の有無について、「_blank」or「空欄」で指定することができます(例 target="_blank" )

新しいタブで開くようにしたい場合だけ、 _blank と入力しよう!
 

color=""

color=""

カスタムボタンに表示される「タイトル名」と「アイコン」の色を指定することができます

 

具体的には…

# + ●●●●●●

という形で、任意の「カラーコード」を入力します(例 color="#523634" )

タイトルとアイコンを入れてない場合、この項目は空欄のままでOK!
 

このカラーコードについては、 タグ > ショートコード補助 を開いたなかから…

HTMLカラーコード

というタブを開くと、「主要な色」のバリエーションが一覧表示されているので、そのなかから任意の色をまず選択しましょう

 

選択すると、その色のカラーコード(例:#523634)が本文欄に貼り付けられるので、このコードを color="#●●●●●●" の #●●●●●● にあたる部分に貼り付けるだけ

カラーコードは、先頭に必ず # が入るよ!
 

ちなみに!

「もっと色んなカラーを使いたい!」という場合は、「WEB色見本 原色大辞典」様を始めとした各種「色見本サイト」でカラーコードを確認できます

 

bgcolor=""

bgcolor=""

カスタムボタンの「背景色」のうち「下半分」を、カラーコードで指定できます(例 bgcolor="#523634" )

やり方は、 color="" と同じ!
 

bgcolor_top=""

bgcolor_top=""

カスタムボタンの「背景色」のうち「上半分」を、カラーコードで指定できます(例 bgcolor_top="#523634" )

 

bordercolor=""

bordercolor=""

カスタムボタンの「枠線色」を、カラーコードで指定することができます(例 bordercolor="#523634" )

 

borderwidth=""

borderwidth=""

カスタムボタンの「枠線の太さ」を、「px」のサイズ単位で指定できます(例 borderwidth="2" )

「1」刻みで指定できて、数字が大きいほど「太く」なる形!
 

borderradius=""

borderradius=""

カスタムボタンの「四隅の丸み」を、数字で指定できます(例 borderradius="5" )

同じく「1」刻みで指定できて、数字が大きいほど「丸く」なる形!
 

fontsize=""

fontsize=""

タイトル名の「フォントサイズ」を、「%」の比率で指定することができます(例 fontsize="95" )

これも「1」刻みで指定できるよ!
 

fontweight=""

fontweight=""

タイトル名の「フォントの太さ」を、 空欄(通常) もしくは bold(太字) で指定できます(例 fontweight="bold" )

太字にしたい場合だけ、 bold と入力すればOK!
 

width=""

width=""

カスタムボタンの「横幅サイズ」を、「%」の比率で指定できます(例 width="75" )

「%」は入力不要だよ!
 

webicon_after=""

webicon_after=""

タイトル名の右側(末尾側!)に表示される「アイコン」を指定することができます(例 webicon_after="st-svg-chevron-right" )

やり方は webicon="" と一緒!
 

shadow=""

shadow=""

カスタムボタンの最下部に表示される「影」の色を、カラーコードで指定できます(例 shadow="#523634" )

やり方は、 color="" と同じだよ!
 

ref=""

ref=""

カスタムボタンの「光る演出」の有無について、「on」or「空欄」で指定できます(例 ref="on" )

光らせたい場合だけ、 on と入力しよう!
 

beacon=""

beacon=""

こちらは通常、デフォルトの「空欄」のままでOKです

 

ステップ3:ACTION AFFINGER6「カスタムボタン(リンクボタン)」のカスタマイズ例

WordPress ヘッダー b-03

カスタムボタンのカスタマイズは、経験上「よく使う組み合わせ」が自然と決まってくるため…

  • カスタマイズ済みのショートコードは、Excelなどに丸々貼り付けておく!
  • 実際にカスタムボタンを使うときには、Excelからコピペで貼り付けるだけ!

といった形にしておくと、記事作成の効率がぐんと上がります

「マイボックス」とか「見出し付きフリーボックス」と一緒だね!
 
 

ということで!

ここまでご紹介した「ショートコード」のカスタマイズ項目をふまえて、サンプルを3つほど作ってみました🐣

 

1つ目のカスタマイズ例 ↓(デザインパターン:ノーマル)

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-3-01

参考までに、コード内容は下記の通り!
  • title="お申し込みはこちら"
  • rel=""
  • webicon=""
  • target=""
  • color="#ffffff"
  • bgcolor="#ff8800"
  • bgcolor_top=""
  • bordercolor="#ff6600"
  • borderwidth="1"
  • borderradius="2"
  • fontsize="95"
  • fontweight="bold"
  • width="80"
  • webicon_after="st-svg-angle-right"
  • shadow=""
  • ref=""
  • beacon=""

2つ目のカスタマイズ例 ↓(デザインパターン:ミニ)

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-3-02

まず「左側」のボタンから、コード内容は下記の通り!
  • title="公式サイト"
  • rel=""
  • webicon=""
  • target=""
  • color="#ffffff"
  • bgcolor="#1001b2"
  • bgcolor_top=""
  • bordercolor=""
  • borderwidth=""
  • borderradius="1"
  • fontsize="90"
  • fontweight=""
  • webicon_after=""
  • shadow=""
  • ref=""
  • beacon=""
つづいて、「右側」のボタンは下記のコード内容だよ!(改行せずに、左側用のコードのあとにそのまま並べればOK!)
  • title="詳細ページ"
  • rel=""
  • webicon=""
  • target=""
  • color="#ffffff"
  • bgcolor="#3fcc7d"
  • bgcolor_top=""
  • bordercolor=""
  • borderwidth=""
  • borderradius="1"
  • fontsize="90"
  • fontweight=""
  • webicon_after=""
  • shadow=""
  • ref=""
  • beacon=""

3つ目のカスタマイズ例 ↓(デザインパターン:MCボタン)

AFFINGER6「カスタムボタン(リンクボタン)」の作り方とカスタマイズ方法、カスタマイズ例 1-3-03

これも、コード内容は下記の通り!
  • title="お申し込みページへ"
  • rel=""
  • webicon=""
  • target=""
  • color="#ffffff"
  • bgcolor="#000000"
  • bgcolor_top=""
  • bordercolor=""
  • borderwidth=""
  • borderradius="1"
  • fontweight="bold"
  • fontsize="100"
  • width="90"
  • webicon_after=""
  • shadow=""
  • ref=""
  • mcbox_bg="#fafafa"
  • mcbox_color="#999999"
  • mcbox_title="\ 人気No.1! /"
  • beacon=""
  • 末尾のMC部分(※マイクロコピーを書いてみよう) → ※今なら10日間の無料トライアル実施中!

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

”全8章” の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー&PVモニター バナー 01-1000px

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です

About me

あずきアイコン main-01 背景透過

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にいるので覗いてもらえると嬉しいです^^

-WORDPRESS