WORDPRESS

AFFINGER5で、リンクの各種「カスタムボタン」を使う手順【WordPressブログ】

AFFINGER5で、リンクの各種「カスタムボタン」を使う手順 アイキャッチ



あずきです🐥

このブログでも愛用中のWordPressテーマ、「WING(AFFINGER5)」における…

リンクの「カスタムボタン」の使用方法

について、初心者さん向けに1から解説していきます(簡単です♪)

まず「WING(AFFINGER5)」における「カスタムボタン」とは、例えば…

このカスタムボタンはサンプルです

このカスタムボタンはサンプルです

このカスタムボタンはサンプルです

このカスタムボタンはサンプルです

↑ こういったもの

ほかにもたくさんあるよ!

特徴としては…

  • 元々できあがってる豊富な種類の「テンプレ」を、一瞬で使用できる!
  • 「テンプレ」をもとに、ショートコードを編集してデザインをカスタマイズできる!

この通り

で、具体的には…

  • カスタムボタンの基本的な挿入手順
  • カスタムボタンのテンプレ一覧

この2点にわけて紹介していきますね

デザインのカスタマイズについては ↓ をどうぞ♪

AFFINGER5の各種「ショートコード」のカスタマイズ手順 アイキャッチ
AFFINGER5の各種「ショートコード」のカスタマイズ手順を解説【WordPressブログ】

続きを見る

それではさっそく見ていきましょー🐥

当ブログのWordPress環境

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

AFFINGER5における「カスタムボタン」の使用方法

カスタムボタンの基本的な挿入手順

WordPress ヘッダー a-01

 

まずは、カスタムボタンの基本的な挿入手順からです

WordPressで記事の編集画面を開いたら…

AFFINGER5_リンクのカスタムボタンの使い方_1-01

↑ 本文欄のボタンを入れたい場所で、一度クリックします

その状態で、画面上部の…

AFFINGER5_リンクのカスタムボタンの使い方_1-02

↑ タグ > カスタムボタン を開くと…

AFFINGER5_リンクのカスタムボタンの使い方_1-03

↑ カスタムボタンのタイプが表示されるので、使いたい種類を選びます

ちなみに各タイプの実際のデザインについては、この記事の「2つ目のパート」ですべてご紹介してます

試しに「ノーマル」を開いてみると…

AFFINGER5_リンクのカスタムボタンの使い方_1-04

↑「ノーマル」ボタンにおける、テンプレ一覧が表示されました

このなかから、使いたいテンプレを選択しましょう

それぞれどんなボタンになるのかは、2つ目のパートへ!

試しに「詳しくはコチラ(オレンジ)」を選んでみると…

AFFINGER5_リンクのカスタムボタンの使い方_1-05

↑ こんな感じで、専用のショートコードが自動挿入されました

これでもう、カスタムボタンは表示されてる状態です

プレビューで見てみると…

AFFINGER5_リンクのカスタムボタンの使い方_1-06

↑ こんな感じ

つづいてこのボタンに、リンク先のURLを設定していきます

さきほどのショートコードにおける…

AFFINGER5_リンクのカスタムボタンの使い方_1-07

↑ この url="#" という場所の、 # を削除して…

AFFINGER5_リンクのカスタムボタンの使い方_1-08

↑ 任意のURLを貼りつけましょう

これで、このボタンをクリックすると、設定したURLリンク先にジャンプするようになります

次に、ボタンのタイトルを変更してみましょう

タイトルの変更は…

AFFINGER5_リンクのカスタムボタンの使い方_1-09

↑ この title="詳しくはコチラ" の 詳しくはコチラ にあたる部分を削除して…

AFFINGER5_リンクのカスタムボタンの使い方_1-10

↑ 任意のタイトルを入力すればOKです

プレビューで改めて見てみると…

AFFINGER5_リンクのカスタムボタンの使い方_1-11

↑ タイトルが無事変更されました

基本的な使い方は、この通りです🐥

ただ、この「カスタムボタン」の真骨頂は、その名の通り…

  • ボタンのデザインをカスタマイズできること

このカスタマイズについては、この記事の「3つ目のパート」でご紹介してます

あとちなみに…

AFFINGER5_リンクのカスタムボタンの使い方_1-12

↑ この「ボタンA」「ボタンB」だけは、ショートコードは表示されないので、編集方法が若干変わってきます

くわしくは ↓ をどうぞ♪

AFFINGER5で、「リンクボタン」を使う手順 アイキャッチ
AFFINGER5で、「リンクボタン」を使う手順【WordPressブログ】

続きを見る

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

カスタムボタンのテンプレ一覧

WordPress ヘッダー a-02

 

WING(AFFINGER5)」におけるカスタムボタンのタイプは、次の通り

  • ノーマル
  • ミニ
  • MCボタン
  • ボックスメニュー
  • ボタンA・ボタンB

実際に使うとどんな感じなのか、順に見ていきましょう🐥

ノーマル

カスタムボタンの「ノーマル」は次の通りです

AFFINGER5_リンクのカスタムボタンの使い方_2-01

上から順に並べていきます

ボタン

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

お問合せ

もっと詳しく

もっと詳しく

もっと詳しく

人気ランキング

ランキングはコチラ

ミニ

カスタムボタンの「ミニ」は次の通りです

AFFINGER5_リンクのカスタムボタンの使い方_2-02

上から順に並べていきます

ボタン 詳しくはコチラ 詳しくはコチラ 詳しくはコチラ 詳しくはコチラ

MCボタン

カスタムボタンの「MCボタン」は次の通りです

AFFINGER5_リンクのカスタムボタンの使い方_2-03

上から順に並べていきます

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ボックスメニュー

カスタムボタンの「ボックスメニュー」は次の通りです

AFFINGER5_リンクのカスタムボタンの使い方_2-04

上から順に並べていきます

ボタンA・ボタンB

最後に、カスタムボタンの「ボタンA・ボタンB」です

AFFINGER5_リンクのカスタムボタンの使い方_2-05

それぞれ、次の通り

ちなみに今回の「カスタムボタン」を始め、「AFFINGER5」の各種「タグ」パーツは

  • 「ショートコード」を編集

することで、デザインをいろいろカスタマイズできます

くわしくは ↓ をどうぞ♪

AFFINGER5の各種「ショートコード」のカスタマイズ手順 アイキャッチ
AFFINGER5の各種「ショートコード」のカスタマイズ手順を解説【WordPressブログ】

続きを見る

おしまい♪

あずき🐥

\ 当ブログで愛用しています /

ACTION AFFINGER6 バナー 01-300px

検証と改善を重ねた唯一無二のテーマ

ACTION AFFINGER6

今ならプラグイン「すごいもくじLITE」の無料配布キャンペーンも実施中!!!

公式:「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』

関連:【1番の本質】ACTION AFFINGER6って実際どう?気に入ってる点・気になる点を、専業ブロガーが本気レビュー【愛用テーマ】

 

-WORDPRESS