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

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

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

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

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

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

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

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

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

※　現在は直接テキストを入力できるようになりました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下のような感じです。

ボタン①	ボタン②
ボタン③	ボタン④

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

AFFINGER6：テーブル作成方法

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

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

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

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

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

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

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

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

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

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

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

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

①

STEP.4　テーブル（表）をHTML表示にする

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

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

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

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

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

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

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

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

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

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

ボタン①

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

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

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

\\ 無料お試し利用がずっと可能なAIライティングツール//

AFFINGER6：記事一覧

• AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
• （通常版）AFFINGER6と（上位版）AFFINGER6 EXの違い【まとめ】
• AFFINGER6を実際に利用したガチ評価-２年以上愛用して感じたメリットとデメリット
• AFFINGER6は初心者が購入しても大丈夫？-初心者にお勧めの理由

AFFINGER6の購入とインストール方法

• AFFINGER6の購入方法と購入プランの選び方
• AFFINGER6（アフィンガー6）のインストール方法-初心者でも安心！購入プランから徹底解説！
• AFFINGER６（アフィンガー６）EX版の購入とアップグレードの方法

AFFINGER6の設定関係

• AFFINGER6導入後にまず何をしたらいいの？-初心者にお勧めの初期設定４項目
• AFFINGER6（アフィンガー６）にお勧めのプラグイン【初心者向け】
• AFFINGER６のアップデート方法（２パターンを解説）
• AFFINGER６（アフィンガー６）でGoogleアナリティクスを導入する方法
• AFFINGER6：Googleサーチコンソールへの登録方法
• AFFINGER6のステマ規制対策-広告表記を表示させる方法

AFFINGER6の使い方

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

AFFINGER6のデザインカスタマイズ

• AFFINGER6のカスタマイズ方法-初心者向けガイド-