WORDPRESS

AFFINGER5で、「リンクボタン」を使う手順【WordPressブログ】

AFFINGER5で、「リンクボタン」を使う手順 アイキャッチ



あずきです🐥

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

「リンクボタン」の使い方

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

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

AFFINGER5_リンクボタンの使い方_top-01

↑ こういったもの

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

「リンクボタン」の初期設定カラーを変更する方法は、↓ をどうぞ♪

AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

当ブログのWordPress環境

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

ACTION AFFINGER6 バナー 01-300px

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

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

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

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

 

About me

あずきアイコン main-01 背景透過

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

あずき

 

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

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

AFFINGER5における「リンクボタン」の使い方

WordPress ヘッダー a-01

 

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

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

↑ 本文欄の好きな場所で、カーソルをクリックしましょう

ちなみに、エディタは普通に「ビジュアルエディタ」のままでOKです

「ビジュアルエディタってなに…?」という方は、↓ をどうぞ♪

WordPressの「ビジュアルエディタ&テキストエディタ」とは? アイキャッチ
WordPressの「ビジュアルエディタ&テキストエディタ」とは?【クラシックエディタにおけるブログ記事編集】

続きを見る

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

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

↑ タグ > カスタムボタン をクリックし…

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

↑「ボタンA」「ボタンB」好きな方をクリックしましょう

ここでは例として、「ボタンA」を選択してみます

すると…

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

↑ このように、ボタンが自動で設置されます

ここから、ボタンの編集をしていくよ!

「ボタンA」という名称の上をクリックすると…

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

↑ こんなふうに、ボタンを選択した状態になります

この状態で、「ボタンA」という名称を Back Space で削除して…

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

↑ 好きなワードに入力し直しましょう

つづいて、そのすぐ下にある…

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

↑ この「編集」アイコンをクリックすると…

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

↑ URLを指定する入力欄が表示されるので…

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

↑ リンク先に設定したいURLを貼りつけましょう

最初に入ってる # の記号は消せばOK!

URLを入れられたら…

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

↑ そのすぐ右にある「適用」アイコンをクリックすると…

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

↑ これで、リンクボタンの編集はOKです

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

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

↑ こんなふうに表示されました

ちなみに ↑ のリンクボタンは、初期設定のカラーをカスタマイズしています

この「リンクボタン」の初期設定カラーを変更する方法は、↓ をどうぞ♪

AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順 アイキャッチ
AFFINGER5で、「リンクボタン」の色設定をカスタマイズする手順【WordPressブログ】

続きを見る

それと、あとからこのリンクボタンの編集をしたいときは、またリンクボタン上をクリックして…

AFFINGER5_リンクボタンの使い方_1-13

↑ この「編集」アイコンをクリックし…

AFFINGER5_リンクボタンの使い方_1-14

↑ URL入力欄を修正しましょう

もしくは、右端の「リンク設定」アイコンをクリックすると…

AFFINGER5_リンクボタンの使い方_1-15

↑ くわしい編集画面が開くので、ここで一通り編集できます

編集できたら、右下の「更新」をクリックすればOKです

おしまい♪

あずき🐥

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

ACTION AFFINGER6 バナー 01-300px

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

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

今ならプラグイン「すごいもくじLITE」を期間限定で配布中!

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

 

About me

あずきアイコン main-01 背景透過

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

あずき

 

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

 

20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter(@azuki_rinrin)にわりといるので、覗いてもらえると嬉しいです^^

-WORDPRESS