ワードプレス

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

AFFINGER5_リンクのカスタムボタンの使い方_アイキャッチ



あずきです🐥

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

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

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

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

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

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

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

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

↑ こういったもの

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

特徴としては…

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

この通り

で、具体的には…

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

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

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

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

続きを見る

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

このブログのWordPress環境

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

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

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

ブログガイド_見出し_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ブログ】

続きを見る

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

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

ブログガイド_見出し_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ブログ】

続きを見る

おしまい♪

あずき🐥

このブログで使用中のワードプレステーマ

本気でブログ収益化するなら /

WING AFFINGER5 バナー01

-「実績」と「信頼」。 検証と改善を重ねた唯一無二のテーマ -

WING AFFINGER5

  • ターゲットに合わせた圧倒的な最適化!
  • SEO対策と広告収入UPの機能が標準装備!
  • 面倒なカスタマイズも「クリック1つ」で簡単・時短!

今なら超時短ツール「タグ管理プラグイン」配布キャンペーン中!

公式:「稼ぐ」に特化したWordPressテーマ『WING AFFINGER5』

関連:「AFFINGER5」の購入・導入方法を1から解説
関連:「AFFINGER5」導入後にまず行うべきステップまとめ

著者

azuki_01

- 専業ブロガー・フリーランス -

あずき

独立3年目 / 元アパレル → 歴10年

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます

普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^

Twitter

-ワードプレス

© 2020 あずきのぶろぐ。