WordPressの組み込み機能を使ってリンクカラーを最適化する方法:ブランドとユーザーエクスペリエンスを向上させるガイド

WordPressのリンクの色を変更する方法

WordPressでは、ハイパーリンクの書式設定がすぐに使えます。テーマカスタマイザー、WordPressデフォルトのブロックエディタ、またはカスタムCSSの実装です。

方法1:WordPressテーマカスタマイザーを使う

カスタマイザーのインターフェースは、使用するテーマによって若干異なる場合があります。ただし、以下に手順の概要を示します:

  1. WordPressの管理ダッシュボードにログインし、次のページに移動します。外装状態 > カスタマイズまたは外観>テーマ選択したテーマについてカスタマイズ.
  2. テーマカスタマイザーに入ったら、左のナビゲーションバーを下にスクロールし、"カラー".
图片[1]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复
  1. カスタマイザーからWordPressテーマカラーにアクセス。
  2. リンクカラーのオプションが見つかるまでもう一度下にスクロールし、希望の色合いに変更する。
  3. テーマカスタマイザーからリンクカラーを変更

結果は以下の通り:

图片[2]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复

テーマカスタマイザーを使って、リンクの色の前後を変更してください。

この方法は、ウェブサイト全体のリンクカラーを変更する場合に最適です。ハイパーリンクにカスタムカスタマイズを追加する柔軟性はありません。

方法2:デフォルトのWordPressブロックエディタを使用する

Gutenbergは、WordPressのデフォルトのブロックベースのエディタです。コンテンツの個々のブロックを使って、サイトのレイアウトやその他のカスタム設定を作成します。これにより、HTMLやCSSを気にすることなく、コンテンツの追加、移動、削除が簡単に行える。

また、ウェブサイト上の個々のリンクの色を変更することも可能です:

  1. WordPressの管理ダッシュボードから"">"すべての記事"をクリックし、リンクの色をカスタマイズしたい投稿の下にある"コンパイラ".
图片[3]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复
  1. 変更したいブロックを見つけてクリックすると、右側に編集オプションが表示されます。
图片[4]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复
  1. 色」セクションで、テキストをクリックし、希望の色を選択するか、コードを入力します。
图片[5]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复
  1. 変更が完了したら、右上の"更新「ボタン

方法3:カスタムCSSを使う

图片[6]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复

WordPressテーマにリンクカラーのカスタマイズオプションが組み込まれていない場合は、カスタムCSSを追加してリンクスタイルを設定することができます。これは以下のように行う:

  1. WordPressの管理画面から外装状態 > カスタマイズ追加CSSオプションまでスクロールダウンし、それをクリックしてCSSエディタを開き、カスタムコードを追加します。
  2. テーマカスタマイザーにCSSを追加します。

サイト全体のリンクカラーを変更するには、特定のクラスやIDではなく、タグを使用する必要があります:

图片[7]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复

このCSSコードでは、デフォルトでサイト上のすべてのリンクに下線が引かれ、#5246F1(青)で表示されます。マウスをリンクの上に置くと、リンクは薄い色(#B4AFFF)に変わり、下線は削除されます。

あなたはあるべき姿になった:

图片[8]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复

特定のリンクの色を変更したい場合は、ブラウザのInspectツールを使って、変更したいリンクのカテゴリーまたはIDを確認します。リンク上で右クリックし、Inspectを選択します。

图片[9]-如何使用 WordPress 内置功能优化链接颜色:提升品牌和用户体验的指南-光子波动网 | WordPress教程、Elementor教程与故障修复

以下のように、リンクのユニークな識別名を使用してカスタムCSSコードを追加します:

a.customise-unpreviewable{。
    color: #5246F1;
    text-decoration: underline;
}
a.customize-unpreviewable:hover{次のようになります。
    color: #B4AFFF; text-decoration: none; } }.
    text-decoration: none; } }.
}

カスタムCSSコードの追加は効果的ですが、かなりの労力と一連の手順を必要とします。うっかりウェブサイトの美観や機能を台無しにしてしまうような専門知識がない場合は、このオプションを選択しないでください。

概要

これらの方法を使えば、WordPressウェブサイトのリンクカラーをブランディングやユーザーエクスペリエンスのニーズに合わせて調整することが可能です。テーマカスタマイザー、ブロックエディター、カスタムCSSのいずれを使用する場合でも、リンクカラーをウェブサイト全体のデザインやブランディングと統一させることは、ユーザーエクスペリエンスを向上させる重要なステップです。


お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨询:1025174874
Eメール:[email protected]
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
本文作者:红牛独立站
終わり
好きなら応援してください。
クドス0 分かち合う
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし