専業ブロガー５年目のあずきです🐥
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「テキストリンク・画像リンク」の貼り方＆リンク文字色のカスタマイズ設定方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まずWordPressブログにおける「テキストリンク」とは、クリックすることによって指定のページへと遷移する「リンク機能」が…
↑ こういった、テキスト（青字部分！）内に埋め込まれたものを指します
そして「画像リンク」とは、そのまま「テキストリンク」の画像版です
ちなみに「テキストリンク」は、一般的に「ブルー」の文字色で表示されることが多いですが、ACTION AFFINGER6では任意の色にカスタマイズ可能です
そんなACTION AFFINGER6における「テキストリンク」と「画像リンク」について、３つのステップで丁寧に解説していきます🐥
- 「テキストリンク」の貼り方と編集方法
- 「画像リンク」の貼り方と編集方法
- 「テキストリンク」の文字色をカスタマイズする方法
▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼
【2023年3月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
-
【2023年3月】AFFINGER6の購入・導入手順を１から徹底解説。子テーマまで【ワードプレスブログ完全初心者ガイド】
続きを見る
- 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
画像付きでまるっと解説しています - 作業そのものは、正味【15分程度】でおわります（子テーマまで含めて）
Contents
AFFINGER6「テキストリンク・画像リンク」の貼り方＆リンク文字色のカスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド／第７章／No.16】
注意
ご紹介する内容は、いずれもWordPressの編集エディタが…
クラシックエディタ
の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「クラシックエディタとグーテンベルグってなに…？」という場合や、「クラシックエディタに切り替える方法（一瞬です！）」はこちらをどうぞ ↓ ※重要です
-
WordPressクラシックエディタとグーテンベルグとは？Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド／第４章／No.6】
続きを見る
補足
ご紹介する内容は、WordPressの定番プラグイン「Advanced Editor Tools（旧：TinyMCE Advanced）」を導入していることが前提となります ↓
-
【2023年】プラグイン「Advanced Editor Tools」のおすすめ設定方法：クラシックエディタ版【ワードプレスブログ完全初心者ガイド／第４章／No.8】
続きを見る
ステップ１：ACTION AFFINGER6における「テキストリンク」の貼り方と編集方法
WordPressにおける投稿（もしくは固定ページ）の編集画面を開いたら、入力した任意のテキストのうち…
↑ 今回「テキストリンク」にしたい該当のテキストを選択した状態で、画面上部の「リンクの挿入/編集」ボタンをクリックします
関連
「ビジュアルとテキストってなに…？」という場合は、こちらをどうぞ ↓
-
【2022年】WordPress「ビジュアル・テキスト」の違いとは？使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド／第７章／No.2】
続きを見る
「リンクの挿入/編集」ボタンをクリックすると…
↑ このように「リンク先となるURL」の入力フォームが表示されるので、任意のページURLを貼り付けてから、「適用」ボタンをクリックしましょう
これで…
↑ 該当のテキストが「テキストリンク」に変更されます
で、一度作成した「テキストリンク」の内容を編集したい場合は…
↑ テキストリンク（青字部分）上をクリックすると表示される、「編集」ボタンをまずクリックしてから…
↑「リンク設定」ボタンをクリックすると設定画面が開くので、こちらで編集しましょう
また「テキストリンク」自体を解除したい場合は、１つ前の画像のタイミングで…
↑「リンクの削除」ボタンをクリックすればOKです
ちなみに、よく使う追加設定として「テキストリンクを新しいタブで開く」ように設定したい場合も、上記の…
編集 ＞ リンク設定
という手順で開いた設定画面にて…
↑「リンクを新しいタブで開く」という項目があるので、こちらのチェックを入れる形です
ということで、今度は【画像リンクの貼り方】について見ていきましょう🐥
＼ 「なぜ売れないか？」を徹底解析 ／
結果が見えるサイト運営に
AffiliateRun～なぜ売れないか？
PDFマニュアル付き！
公式：「AFFINGERタグ管理マネージャー4 + PVモニター」プラグインセット
関連：WordPressにおける広告リンクの貼り方「３つ」のパターン。アフィリエイト広告の挿入方法
-
WordPressにおける広告リンクの貼り方「３つ」のパターン。アフィリエイト広告の挿入方法
続きを見る
※別売りのWordPressテーマ「ACTION AFFINGER6」最新版が必要です
ステップ２：ACTION AFFINGER6における「画像リンク」の貼り方と編集方法
まずは、「画像リンク」にしたい任意の画像ファイルを貼り付けたうえで…
↑ その画像をクリックしてから、「編集」ボタンをクリックします
関連
「画像ファイルの貼り方」については、別途こちらをどうぞ ↓
-
AFFINGER6「画像」の貼り方＆カスタマイズ、代替テキスト（alt属性）の設定方法【ワードプレスブログ「完全初心者」ガイド／第７章／No.14】
続きを見る
「編集」ボタンをクリックしたら、そのなかの…
↑「リンク先」というタブを開いて、「カスタムURL」という項目を選択すると…
↑ リンク先URLの入力フォームが表示されるので、こちらに任意のページURLを貼り付ければOKです
プレビュー画面で確認してみると…
↑ 該当の画像上にカーソルを合わせることで、左下に「リンク先のURL」が表示されるようになります
で、一度作成した「画像リンク」の内容をあとから編集したい場合は…
↑ 該当の画像リンクをクリックすると表示される「編集」ボタンから設定画面が開けるので、こちらで編集しましょう
また、一度作成した「画像リンク」を解除したい場合は、上記の手順で表示させた編集画面内の…
↑「リンク先」というタブを開いて、「なし」に戻してあげればOK
ちなみに「画像リンクを新しいタブで開く」ように設定したい場合は、上記の設定画面内にある…
↑「上級者向け設定」というタブを開き、そのなかの…
↑「リンクを新しいタブで開く」という項目にチェックを入れる形です🐥
ステップ３：ACTION AFFINGER6で、「テキストリンク」の文字色をカスタマイズする方法
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
見出しタグ（hx）/ テキスト ＞ テキスト色一括変更
の順に、タブを開きます
「テキスト色一括変更」タブを開いたら、そのなかにある…
↑「記事内リンク色」という項目で、テキストリンクの色設定を指定しましょう
参考までに当ブログのテキストリンクは、 #0044cc というカラーコードを使用しています
また、その下に表示されている…
↑「マウスオーバー色」という項目では、読者さんが「テキストリンクにカーソルを合わせた際に変化する（テキストリンクの）文字色」を設定できます
ということで…
一通り設定できたら、画面左上の「公開」ボタンを忘れずにクリックして、テキストリンクのカスタマイズも完了です🐥
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
「全８章」の総合TOPページです
