広告 WORDPRESS

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

AFFINGER6「カスタム(リンク)ボタン」の作り方&カスタマイズ設定方法。作例付き【ワードプレスブログ「完全初心者」ガイド/第7章/No.18】

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

当ブログでも愛用中の人気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の「購入~導入手順」はこちらから ▼

【2024年3月】AFFINGER6の購入&導入手順を徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】

AFFINGER6の購入&導入手順を1から徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】
【2024年3月】AFFINGER6の購入&導入手順を徹底解説。子テーマの設定方法まで初心者向けに完全ガイド【WordPressブログ】

続きを見る

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

インフォトップ 2023年度 WordPressテーマ売上

公式:ACTION AFFINGER6

すごいもくじLITE

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

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

 

注意

 

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「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日間の無料トライアル実施中!

おしまい🐥

 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

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

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

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

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS