この記事には広告が含まれています。

AFFINGER6:カスタムボタンの作成方法【初心者向け】

AFFINGER6:カスタムボタンの作成方法【初心者向け】

この記事がお勧めな方

この記事は次のような疑問を解決したい方にお勧めになっています♪

  • AFFINGER6でカスタムボタンの作成はどうやってやるの?
  • AFFINGER6ではカスタムボタン作成はどんな機能があるの?
  • カスタムボタンを表の中に表示させたいけど、初心者でわからない?
パパくま
パパくま

この記事ではAFFINGER6でカスタムボタンを作成する方法を初心者向けに解説しています。

カスタムボタンの作成方法

記事にカスタムボタンを設置する方法はとても簡単です。

挿入したい箇所でブロックツールから「STINGER:カスタムボタン」をクリックすれば下の画像のようなカスタムボタンが簡単に作成でます。

「STINGER:カスタムボタン」をクリック

カスタムボタンのテキスト変更方法

カスタムボタンを作成したデフォル状態だと、テキスト表示は「ボタン」となっています。

テキスト内容の変更は画面右の「テキスト」入力欄に表示させたい文字列を入力します。

「STINGER:カスタムボタン」のテキスト入力欄

例えば「購入はこちら」と入力してみると

こんな感じにテキストを変更することができます。

カスタムボタンのアイコン表示変更方法

画面右のアイコン選択一覧から好きなアイコンを表示させることができます。

「STINGER:カスタムボタン」のアイコン表示設定方法

テキストの前後にリストの中から好きなアイコンを表示することができます。

例えば、こんな感じです。

アイコンクラスにクラス名を入力することでもアイコンを表示することができます。

例えば右のリストにはないワードプレスのロゴをクラス名を入力して表示させてみるとこんな感じです。

アイコンの種類は100以上あり、クラス名を入力することで表示させることができます。

クラス名のリストはアフィンガーの公式マニュアルで確認することができます。

カスタムボタンのリンク設定方法

画面右のリンク先URLに入力することでリンクを設定することができます。

「STINGER:カスタムボタン」のリンク設定

リンク設定の「nofollow」タブは

自分のサイトとリンク先のサイトを関連付けたくない時に設定します。

初心者の方はよくわからないと思うのでそのままで問題ないです。

「新しいページで開く」タブを設定することで、リンク先を新しいページで開くことができます。

カスタムボタンのデザイン変更方法

その他の設定でカスタムボタンの形・色や影を付けたりすることができます。

「STINGER:カスタムボタン」のデザイン変更設定

「影」を設定することでボタンに影を付けることが可能。

影部分の色を変更することもできます。

「光る演出」を設定することでボタンに光る演出を付加することが可能。

「ボーダー設定」でボタンの形状を変えることが可能

「色設定」でボタンのテキスト色・背景色・ボーダー色・影の色を変更することが可能

設定を組み合わせることで、ボタンを色々とカスタマイズすることができます。

【コピペで出来る】表にボタンを設置する方法【初心者向け】

記事にテーブル(表)を挿入した際に、テーブル(表)の中にボタンを表示させる方法です。

下のような感じです。

ボタン①

ボタン②

ボタン③

ボタン④

アフィンガー6で表を作成する方法は別記事で紹介しているのでそちらの記事も参考にしてみてください。

関連記事

テーブル(表)にボタンを挿入するには表の任意の場所に直接カスタムボタンを選択することはできず、HTMLとして編集する必要があります。

プログラミング言語の知識がある方は簡単にできると思いますが、初心者の方にとってはハードルが高いと思ってしまいますよね。

そこで、知識ゼロでもコピペでできる方法を説明します。

STEP.1 表に挿入したいボタンを作成

前半で説明した方法で表に挿入したいカスタムボタンを作成します。

リンク設定やボタンのデザインなどは完成させた状態にしてください。

STEP.2 作成したボタンをHTML表示にする

作成したボタンのオプションから「HTMLとして編集」をクリックします。

「STINGER:カスタムボタン」で作成したボタンのHTML表示

ボタンがHTML表示されます。

ボタンのHTML表示

STEP.3 挿入したい表の場所に番号を入力しておく

作成したボタンを挿入したい表の場所に番号を入力しておきます。

※ 自分がわかれば番号でなくても何でも大丈夫です。

STEP.4 テーブル(表)をHTML表示にする

作成したテーブル(表)をHTML表示にします。

STEP.2と同様にオプションの「HTMLとして編集」を選択するとHTML表示になります。

HTML表示の表は下のようになります。

テーブル(表)のHTML表示

STEP.5 ボタンのHTMLをコピペする

表のHTML表示を確認するとSTEP.3で入力した番号の場所が確認できると思います。

その番号を削除して、その場所にSTEP.2のカスタムボタンのHTMLをコピペします。

初心者にとってテーブルのHTML表示はわかりにくいと思います。

ビジュアルのボタンを挿入したい場所がHTML表示でもわかりやすくするために、番号をふっただけなので番号である必要はありません。

テーブル(表)のHTMLにボタンのHTMLをコピペする
テーブル(表)のHTMLにボタンのHTMLをコピーした状態

STEP.6 ビジュアルに戻して確認する

オプションの「ビジュアル編集」をクリックするとビジュアル画面に戻し、表示を確認することができます。

ボタン①

以上が知識ゼロで初心者がコピペで可能なテーブルへのボタン挿入方法でした。

AFFINGER6ではこんな感じに簡単にカスタムボタンの作成が可能です。

AFFINGER6の使い方については、このブログで詳しく解説しています。

AFFINGER6の使い方【まとめ】-初心者向けガイド-
AFFINGER6の使い方【まとめ】-初心者向けガイド-

2025/7/8    

AFFINGER6の使い方に関するまとめ記事です。 記事数が多いので、知りたい内容を目次から探してみてください。 設定に関する使い方 インストールの方法 AFFINGER6を使えるようにするまでの手順 ...

2025/9/5

【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!

AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できます。 また、購入プランに迷っている方も要チェックです! AFFINGER6とは?購入を検討している方へ AFFINGER6は多くの有名ブロガーさんも利用している人気の有料テーマです。 特徴としては、次ような点を挙げることができます。 収益化に特化 「稼ぐに特化したテーマ」がコンセプトでアフィリエイトにお勧め。 ...

AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2025/7/10

AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内容を初心者向けに詳しく解説しています。 AFFINGER6を使ってみたいなぁと思った方は参考にしてみてください。 価格 14,800円(税込み) 有名ブロガーさん多数使用のWordPressテーマ! 「稼ぐ」に特化!アフィリエイトサイトにお勧め! 高いカスタマイズ性能! 直感操作で初心者にもおすすめ! このブ ...

(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】

2025/6/3

(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違いをまとめてみました。 購入する際やアップグレードを検討している方は参考にしてみてください。 機能比較表:AFFINGER6 vs AFFINGER6 EX 機能AFFINGER6AFFINGER6 EX記事のカード化無限スクロール機能トップページの1カラム化ヘッダーナビゲーション・ ...

AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由

2025/6/3

AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由

WordPressの有料テーマであるAFFINGER6(アフィンガー6)は、「収益化に強い」と評判のテーマです。 ただ、初めてブログを始める初心者にとっては「本当に使いこなせるの?」と不安もありますよね。 この記事では、AFFINGER6が初心者におすすめな理由と購入前に知っておきたいポイント、導入のコツまでをわかりやすく紹介しています。 AFFINGER6は初心者にこそお勧めのテーマ! 結論から言えば、AFFINGER6は初心者の方が購入しても大丈夫です。 むしろ初心者の方にこそお勧めのテーマです。 A ...

【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット

2025/6/3

【本音レビュー】AFFINGER6の評判は?実際に使ってわかったメリット・デメリット

「収益化に強いWordPressテーマ」として有名なAFFINGER6(アフィンガー6)。 ブロガーやアフィリエイターに人気ですが、「評判は本当?」「使いこなせるの?」と不安に感じる方も多いのではないでしょうか? この記事では、実際にAFFINGER6を使ってわかったリアルな使用感と世間の評判を本音でお伝えします。 AFFINGER6の良い評判・口コミまとめ AFFINGER6の口コミ・評価をまとめてみると次のような声が多くあります。  良い口コミ・評価 良い口コミ・評価としては次の内容が多かったです。 ...

AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!

2025/6/3

AFFINGER6 vs SWELL|どっちを選ぶべき?徹底比較!

この記事では、迷ってしまうことの多いテーマ選びについて今回は『SWELL』と『AFFINGER6』の比較ガイドをお届けします。 現在、シェアNo,1の有料テーマである『SWELL』と有名ブロガーさんも多数愛用している人気有料テーマの『AFFINGER6』で迷っている方も多いと思います。 『SWELL』と『AFFINGER6』の二択! という方向けの記事なので、迷っている方は参考にしてみてください。 SWELLとAFFINGER6を比較 『SWELL』と『AFFINGER6』について10個のポイントで徹底比 ...

AFFINGER6 vs THE THOR|どっちが稼げる?初心者にもおすすめのテーマ比較

2025/6/3

AFFINGER6 vs THE THOR|どっちが稼げる?初心者にもおすすめのテーマ比較

WordPressブログで収益化を目指すなら、テーマ選びは極めて重要です。 「AFFINGER6」と「THE THOR」は、稼ぐ系ブログやアフィリエイターに支持されている人気テーマです。 AFFINGER6とTHE THORのどちらを利用しようか迷っている方も多いのではないでしょうか。 この記事では、AFFINGER6とTHE THORの違いを徹底比較! AFFINGER6とTHE THORの比較 『AFFINGER6』と『THE THOR』を10の視点から比較してみていきます。 操作性・使いやすさ 価格 ...

AFFINGER6をおすすめする5つの理由【買う価値ある?】

2025/7/10

AFFINGER6をおすすめする5つの理由【買う価値ある?】

ブログで本気で稼ぎたいならテーマ選びも重要です。 数あるテーマの中でも AFFINGER6 は「稼ぐ」に特化したテーマをコンセプトに多くのトップアフィリエイターの方にも支持されているテーマの1つです。 この記事では 「本当に買う価値があるの?」 と迷う方に向けて、実際に導入して感じたメリットを 5つ に絞って解説します。 お勧めする理由 豊富な記事作成機能 SEO対策済み テンプレートが豊富 収益化に特化 アップデートの対応が早い 理由① 豊富な記事作成機能 メインとなる記事作成の機能が豊富で、ある程度直 ...