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

変更方法ワードプレスのリンクの色

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

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

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

  1. WordPressの管理ダッシュボードにログインし、次のページに移動します。外装状態 > カスタマイズまたは外観>テーマ選択したテーマについてカスタマイズ.
  2. テーマカスタマイザーに入ったら、左のナビゲーションバーを下にスクロールし、"カラー".
WordPressの組み込み機能を使ってリンクカラーを最適化する方法:ブランドとユーザーエクスペリエンスを向上させるガイド
  1. カスタマイザーからWordPressテーマカラーにアクセス。
  2. リンクカラーのオプションが見つかるまでもう一度下にスクロールし、希望の色合いに変更する。
  3. テーマカスタマイザーからリンクカラーを変更

結果は以下の通り:

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

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

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

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

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

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

  1. WordPressの管理ダッシュボードから"">"すべての記事"をクリックし、リンクの色をカスタマイズしたい投稿の下にある"コンパイラ".
WordPressの組み込み機能を使ってリンクカラーを最適化する方法:ブランドとユーザーエクスペリエンスを向上させるガイド
  1. 変更したいブロックを見つけてクリックすると、右側に編集オプションが表示されます。
WordPressの組み込み機能を使ってリンクカラーを最適化する方法:ブランドとユーザーエクスペリエンスを向上させるガイド
  1. 色」セクションで、テキストをクリックし、希望の色を選択するか、コードを入力します。
WordPressの組み込み機能を使ってリンクカラーを最適化する方法:ブランドとユーザーエクスペリエンスを向上させるガイド
  1. 変更が完了したら、右上の"更新「ボタン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

概要

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


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間:月~金、9:30~18:30、祝日休み
投稿者:photon fluctuations、リツイート(帰属表示付き):https://www.361sale.com/ja/14435/

好き (0)
前へ 2024年7月23日 午前11時30分
次のページ 2024年7月23日(水)午後4時18分

おすすめ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

お問い合わせ

020-2206-9892

QQ咨询:1025174874

Eメール:info@361sale.com

勤務時間:月~金、9:30~18:30、祝日休み

カスタマーサービス WeChat
グローバルユーザー登録およびログインを容易にするため、電話によるログイン機能を停止いたしました。ログインに問題が発生した場合は、カスタマーサービスまでご連絡ください。