WORDPRESS

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色設定をカスタマイズする方法を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色設定をカスタマイズする方法

専業ブロガー5年目のあずきです🐥

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「テキストリンク&画像リンク」の貼り方と、リンクの文字色設定をカスタマイズする方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 

まずWordPressブログにおける「テキストリンク」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 top-01

↑ こういった、テキスト(青字部分!)内に埋め込まれたものを指します

 

そして「画像リンク」とは、そのまま「テキストリンク」の画像版です

つまり、「指定ページへのリンクが埋め込まれた画像」のこと!
 

ちなみに「テキストリンク」は、一般的に「ブルー」の文字色で表示されることが多いですが、ACTION AFFINGER6では任意の色にカスタマイズ可能です

 

そんなACTION AFFINGER6における「テキストリンク」と「画像リンク」について、3つのステップで丁寧に解説していきます🐥

  1. 「テキストリンク」の貼り方と編集方法
  2. 「画像リンク」の貼り方と編集方法
  3. 「テキストリンク」の文字色をカスタマイズする方法
ということで、さっそく見ていこー!
 

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで
ACTION AFFINGER6の購入&導入方法を初心者向けに1から解説。「子テーマ」のインストール&有効化手順まで

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

インフォトップ ワードプレステーマ売上

第1位

公式:ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

※2021年発表Infotop Affidemy

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色設定をカスタマイズする方法を初心者向けに解説【ACTION/WordPressブログ】

 

補足

ご紹介する内容は、いずれも「クラシックエディタ」の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「そもそもクラシックエディタとグーテンベルグってなに…?」という場合はこちらをどうぞ ↓(重要です)

WordPressクラシックエディタとグーテンベルグとは?【プラグイン「Classic Editor」の導入方法まで】
WordPressクラシックエディタとグーテンベルグとは?初心者向けに1から解説【プラグイン「Classic Editor」の導入方法まで】

続きを見る

補足

ご紹介する内容は、WordPressプラグイン「Advanced Editor Tools(旧:TinyMCE Advanced)」を導入していることが前提となります ↓

Advanced Editor Tools(旧:TinyMCE Advanced)の設定方法
【2022年】Advanced Editor Tools(旧:TinyMCE)の設定方法を初心者向けに解説【WordPressプラグイン/クラシックエディタ版】

続きを見る

 

ステップ1:ACTION AFFINGER6における「テキストリンク」の貼り方と編集方法

WordPress ヘッダー b-01

WordPressにおける投稿(もしくは固定ページ)の編集画面を開いたら、入力した任意のテキストのうち…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-01-a

↑ 今回「テキストリンク」にしたい該当のテキストを選択した状態で、画面上部の「リンクの挿入/編集」ボタンをクリックします

編集エディタは、「テキスト」じゃなく「ビジュアル」のままでOK!
 
 

「リンクの挿入/編集」ボタンをクリックすると…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-01-b

↑ このように「リンク先となるURL」の入力フォームが表示されるので、任意のページURLを貼り付けてから、「適用」ボタンをクリックしましょう

 

これで…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-01-c

↑ 該当のテキストが「テキストリンク」に変更されます

 

で、一度作成した「テキストリンク」の内容を編集したい場合は…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-02-a

↑ テキストリンク(青字部分)上をクリックすると表示される、「編集」ボタンをまずクリックしてから…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-02-b

↑「リンク設定」ボタンをクリックすると設定画面が開くので、こちらで編集しましょう

 

また「テキストリンク」自体を解除したい場合は、1つ前の画像のタイミングで…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-03

↑「リンクの削除」ボタンをクリックすればOKです

 

ちなみに、よく使う追加設定として「テキストリンクを新しいタブで開く」ように設定したい場合も、上記の…

編集 > リンク設定

という手順で開いた設定画面にて…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-1-04

↑「リンクを新しいタブで開く」という項目があるので、こちらのチェックを入れる形です

設定を編集したら、「更新」ボタンを忘れずにクリックしよう!
 

ということで、今度は【画像リンクの貼り方】について見ていきましょう🐥

 

ステップ2:ACTION AFFINGER6における「画像リンク」の貼り方と編集方法

WordPress ヘッダー b-02

まずは、「画像リンク」にしたい任意の画像ファイルを貼り付けたうえで…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-01-a

↑ その画像をクリックしてから、「編集」ボタンをクリックします

 
 

「編集」ボタンをクリックしたら、そのなかの…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-01-b

↑「リンク先」というタブを開いて、「カスタムURL」という項目を選択すると…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-01-c

↑ リンク先URLの入力フォームが表示されるので、こちらに任意のページURLを貼り付ければOKです

貼り付けたら、右下の「更新」ボタンをクリックして設定完了!
 

プレビュー画面で確認してみると…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-01-d

↑ 該当の画像上にカーソルを合わせることで、左下に「リンク先のURL」が表示されるようになります

 

で、一度作成した「画像リンク」の内容をあとから編集したい場合は…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-02

↑ 該当の画像リンクをクリックすると表示される「編集」ボタンから設定画面が開けるので、こちらで編集しましょう

 

また、一度作成した「画像リンク」を解除したい場合は、上記の手順で表示させた編集画面内の…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-03

↑「リンク先」というタブを開いて、「なし」に戻してあげればOK

 

ちなみに「画像リンクを新しいタブで開く」ように設定したい場合は、上記の設定画面内にある…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-04-a

↑「上級者向け設定」というタブを開き、そのなかの…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-2-04-b

↑「リンクを新しいタブで開く」という項目にチェックを入れる形です🐥

最後に、【テキストリンクの文字色を変える方法】について見ていくよ!
 

ステップ3:ACTION AFFINGER6で、「テキストリンク」の文字色をカスタマイズする方法

WordPress ヘッダー b-03

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

見出しタグ(hx)/ テキスト > テキスト色一括変更

の順に、タブを開きます

 

「テキスト色一括変更」タブを開いたら、そのなかにある…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-3-01

↑「記事内リンク色」という項目で、テキストリンクの色設定を指定しましょう

 

参考までに当ブログのテキストリンクは、 #0044cc というカラーコードを使用しています

あんまり突拍子のない色だと、読者さんが「テキストリンク」と認識してくれないかもだから、基本は「ブルー系」がおすすめ!
 

また、その下に表示されている…

AFFINGER6「テキストリンク&画像リンク」の貼り方と、リンクの文字色をカスタマイズする方法 1-3-02

↑「マウスオーバー色」という項目では、読者さんが「テキストリンクにカーソルを合わせた際に変化する(テキストリンクの)文字色」を設定できます

ちなみに自分はデフォルトのままにしてるよ!
 

ということで…

一通り設定できたら、画面左上の「公開」ボタンを忘れずにクリックして、テキストリンクのカスタマイズも完了です🐥

 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

”全8章” の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

\ 「なぜ売れないか?」を徹底解析 /

AFFINGERタグ管理マネージャー&PVモニター バナー 01-1000px

結果が見えるサイト運営に

AFFINGERタグ管理マネージャー4 + PVモニター

 

   ✔ よく使用する文章や画像、広告リンクを「テンプレート化」して使い回せる!

   ✔ 元データの更新だけで全記事に「一括反映」されるため、広告の差替えも一瞬!

   ✔ 広告の「クリック回数」「クリックされたページ」などを自動計測!

AffiliateRun~なぜ売れないか?

PDFマニュアル付き!

 

公式:「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット

関連:WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

WordPressにおける広告リンクの貼り方
WordPressにおける広告リンクの貼り方を「3つのパターン」で1から解説【 ”タグ管理” が最強におすすめ】

続きを見る

※当プラグインの使用には、別売のWordPressテーマ「ACTION AFFINGER6」最新版が必要です

About me

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

suzu azuki
あずき鈴々

 

独立5年目の専業ブロガー / 元アパレル → 歴10年

 

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

-WORDPRESS