AFFINGER6「カスタム（リンク）ボタン」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】

専業ブロガー７年目のあかね猫です

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

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

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

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

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

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

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

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

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

カスタマイズ例 ↓

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

ということで、さっそく見ていこー！

AFFINGER6「カスタム（リンク）ボタン」の作り方＆カスタマイズ設定方法。作例付き【ワードプレスブログ完全初心者ガイド】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上から順に、デザインパターンは下記の通りだよ！

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

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

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

という手順で…

を１つ（どれでもOK！）選んだら、貼り付けられた…

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

左から順に見ていくよ！

st-mybutton url=""

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

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

title=""

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

rel=""

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

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

webicon=""

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

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

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

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

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

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

target=""

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

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

color=""

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

具体的には…

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

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

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

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

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

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

ちなみに！

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

bgcolor=""

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

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

bgcolor_top=""

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

bordercolor=""

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

borderwidth=""

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

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

borderradius=""

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

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

fontsize=""

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

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

fontweight=""

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

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

width=""

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

「%」は入力不要だよ！

webicon_after=""

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

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

shadow=""

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

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

ref=""

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

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

beacon=""

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

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

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

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

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

ということで！

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

１つ目のカスタマイズ例 ↓（デザインパターン：ノーマル）

参考までに、コード内容は下記の通り！

２つ目のカスタマイズ例 ↓（デザインパターン：ミニ）

まず「左側」のボタンから、コード内容は下記の通り！

つづいて、「右側」のボタンは下記のコード内容だよ！（改行せずに、左側用のコードのあとにそのまま並べればOK！）

３つ目のカスタマイズ例 ↓（デザインパターン：MCボタン）

これも、コード内容は下記の通り！

おしまい🐥