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

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

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

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

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

  1. WordPressの管理ダッシュボードにログインし、次のページに移動します。外装状態 > カスタマイズまたは外観>テーマ選択したテーマについてカスタマイズ.
  2. テーマカスタマイザーに入ったら、左のナビゲーションバーを下にスクロールし、"カラー".
イメージ[1] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを向上させるためのガイド - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応
  1. カスタマイザーからWordPressテーマカラーにアクセス。
  2. リンクカラーのオプションが見つかるまでもう一度下にスクロールし、希望の色合いに変更する。
  3. テーマカスタマイザーからリンクカラーを変更

結果は以下の通り:

画像[2] - ワードプレスの組み込み機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを向上させるためのガイド - フォトンゆらぎネットワーク|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

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

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

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

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

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

  1. WordPressの管理ダッシュボードから"">"すべての記事"をクリックし、リンクの色をカスタマイズしたい投稿の下にある"コンパイラ".
画像[3] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを向上させるガイド - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応
  1. 変更したいブロックを見つけてクリックすると、右側に編集オプションが表示されます。
画像[4] - How to Optimise Link Colour Using WordPress Built-In Features: A Guide to Enhancing Branding and User Experience - フォトンゆらぎネットワーク|WordPress修理のプロフェッショナル、グローバルリーチ、迅速な対応
  1. 色」セクションで、テキストをクリックし、希望の色を選択するか、コードを入力します。
画像[5] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを高めるためのガイド - photonwave.com|プロのワードプレス修理サービス、グローバルリーチ、迅速な対応
  1. 変更が完了したら、右上の"更新「ボタン

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

画像[6] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを高めるためのガイド - photonwave.com|プロのワードプレス修理サービス、グローバルリーチ、迅速な対応

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

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

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

画像[7] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを高めるためのガイド - photonwave.com|プロのワードプレス修理サービス、グローバルリーチ、迅速な対応

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

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

画像[8] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを高めるためのガイド - photonwave.com|プロのワードプレス修理サービス、グローバルリーチ、迅速な対応

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

画像[9] - ワードプレスの内蔵機能を使ってリンクカラーを最適化する方法:ブランディングとユーザーエクスペリエンスを高めるためのガイド - photonwave.com|プロフェッショナルなワードプレス修理サービス、グローバルなリーチ、迅速な対応

以下のように、リンクのユニークな識別名を使用してカスタム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メール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人: Xiesong
終わり
好きなら応援してください。
クドス0 分かち合う
おすすめ
解説 ソファ購入

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

    コメントなし